# Bad value “alert” for attribute “role” on element “ul”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-alert-for-attribute-role-on-element-ul
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `alert` ARIA role is used to communicate important, typically time-sensitive messages to the user. When an element has `role="alert"`, assistive technologies like screen readers will immediately announce its content to the user, interrupting whatever they are currently doing. This makes it ideal for error messages, warnings, or status updates that require immediate attention.

However, not every HTML element can accept every ARIA role. The WHATWG HTML specification and WAI-ARIA in HTML define rules about which roles are allowed on which elements. The `<ul>` element has an implicit role of `list`, and the `alert` role is not among the roles permitted on `<ul>`. This restriction exists because overriding the semantic meaning of a list element with an alert role creates a conflict — assistive technologies would no longer convey the list structure to users, and the element's children (`<li>` elements) would lose their meaningful context as list items.

This matters for accessibility and standards compliance. If a screen reader encounters a `<ul>` with `role="alert"`, the behavior becomes unpredictable. Some screen readers might announce it as an alert but fail to convey the list structure, while others might ignore the role entirely. Users who rely on assistive technology could miss either the alert or the list semantics, both of which may be important.

The fix depends on your intent. If you need to alert the user about content that happens to include a list, wrap the `<ul>` in a container element (like a `<div>`) and apply `role="alert"` to that container. If the content doesn't need to be a list, replace the `<ul>` with a more appropriate element like `<div>` or `<p>`.

## Examples

### ❌ Invalid: `role="alert"` directly on a `<ul>`

```html
<ul role="alert">
  <li>Your password must be at least 8 characters.</li>
  <li>Your password must contain a number.</li>
</ul>
```

This triggers the validation error because `alert` is not a valid role for the `<ul>` element.

### ✅ Fixed: Wrapping the list in a `<div>` with `role="alert"`

```html
<div role="alert">
  <ul>
    <li>Your password must be at least 8 characters.</li>
    <li>Your password must contain a number.</li>
  </ul>
</div>
```

Here, the `<div>` carries the `role="alert"`, so assistive technologies will announce the content immediately. The `<ul>` retains its native `list` semantics, and the `<li>` items are properly conveyed as list items.

### ✅ Fixed: Using a non-list element when list structure isn't needed

```html
<div role="alert">
  <p>Your session will expire in 2 minutes.</p>
</div>
```

If your alert content is a simple message rather than a list of items, use a more appropriate element like `<p>` or `<div>`.

### ✅ Fixed: Using `aria-live` as an alternative for dynamic updates

```html
<div aria-live="assertive" role="alert">
  <ul>
    <li>Error: Email address is required.</li>
    <li>Error: Name field cannot be empty.</li>
  </ul>
</div>
```

The `aria-live="assertive"` attribute on the wrapper ensures that when the content is dynamically updated, assistive technologies announce the changes immediately. Combined with `role="alert"` on the wrapper (not the list), this provides robust accessible notifications while preserving list semantics.

### Key points to remember

- The `role="alert"` attribute cannot be placed on `<ul>`, `<ol>`, or `<li>` elements.
- Always apply `role="alert"` to a generic container element like `<div>` or `<span>`.
- If your alert content includes a list, nest the list inside the alert container rather than making the list itself the alert.
- The `alert` role implicitly sets `aria-live="assertive"` and `aria-atomic="true"`, so you don't need to add those separately when using `role="alert"`.