# Element “span” is missing one or more of the following attributes: “aria-checked”, “aria-level”, “role”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-span-is-missing-one-or-more-of-the-following-attributes-aria-checked-aria-level-role
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-expanded` attribute requires the element to have an appropriate `role` attribute (or be an element that natively implies one). A `<span>` is a generic inline element with no implicit ARIA role, so you must explicitly assign a role when using ARIA state attributes like `aria-expanded`.

The `aria-expanded` attribute indicates whether a grouping element controlled by this element is currently expanded or collapsed. It is only valid on elements with specific roles such as `button`, `link`, `combobox`, `menuitem`, or other widget roles. When a `<span>` uses `aria-expanded` without a `role`, validators flag it because there's no semantic context for that state.

Since this element toggles a dropdown menu and has `aria-label`, `aria-controls`, and `aria-expanded`, the most appropriate role is `button`. This tells assistive technologies that the element is interactive and can be activated.

Also note that when using `role="button"` on a non-interactive element like `<span>`, you should ensure it is focusable by adding `tabindex="0"` and that it handles keyboard events (Enter and Space keys).

## HTML Examples

### ❌ Invalid: `aria-expanded` on a `span` without a `role`

```html
<span class="navbar-dropdown-icon"
  aria-expanded="false"
  aria-label="List options"
  aria-controls="dropdown-menu-item-1-1menu-item-2-6"
  data-toggle="dropdown">
</span>
```

### ✅ Valid: adding `role="button"` and `tabindex="0"`

```html
<span class="navbar-dropdown-icon"
  role="button"
  tabindex="0"
  aria-expanded="false"
  aria-label="List options"
  aria-controls="dropdown-menu-item-1-1menu-item-2-6"
  data-toggle="dropdown">
</span>
```

### ✅ Better: use a `<button>` element instead

```html
<button class="navbar-dropdown-icon"
  type="button"
  aria-expanded="false"
  aria-label="List options"
  aria-controls="dropdown-menu-item-1-1menu-item-2-6"
  data-toggle="dropdown">
</button>
```

Using a native `<button>` is preferred because it is focusable and keyboard-accessible by default, without needing `role` or `tabindex`.