HTML Guides for aria-selected

The <a> element has an implicit ARIA role of link (when it has an href) or generic (when it doesn’t). Certain ARIA state attributes, like aria-checked, are only valid on elements with specific roles that support them. For instance, aria-checked is designed for roles like checkbox, menuitemcheckbox, radio, switch, or option. If you place aria-checked on an <a> element without assigning one of these compatible roles, the validator raises this error because the attribute doesn’t make sense in the context of the element’s current role.

This matters for several reasons. Screen readers and other assistive technologies rely on the relationship between roles and their supported states to convey meaningful information to users. An aria-checked attribute on a plain link creates a confusing experience — the user hears that something is “checked” but the element is announced as a link, which isn’t a concept that supports checked/unchecked states. This mismatch can make interfaces unusable for people relying on assistive technology.

To fix this issue, you need to either:

1. Add an appropriate role that supports the ARIA state attribute you’re using.
2. Use a more semantically appropriate element, such as <input type="checkbox"> or <button>, which natively supports the concept of being checked or toggled.
3. Remove the unsupported ARIA attribute if it doesn’t actually reflect the element’s behavior.

Examples

Incorrect: aria-checked without a compatible role

This triggers the validation error because <a> doesn’t support aria-checked without an explicit role:

<a href="#" aria-checked="true">Dark mode</a>

Fixed: Adding a compatible role

Adding role="menuitemcheckbox" (within a menu context) or role="switch" makes aria-checked valid:

<ul role="menu">
  <li role="none">
    <a href="#" role="menuitemcheckbox" aria-checked="true">Show notifications</a>
  </li>
  <li role="none">
    <a href="#" role="menuitemcheckbox" aria-checked="false">Dark mode</a>
  </li>
</ul>

Fixed: Using a <button> with role="switch" instead

In many cases, a <button> is a better semantic fit than an <a> for toggle-like interactions:

<button role="switch" aria-checked="true">Dark mode</button>

Correct: Tab list using <a> elements with proper roles

When building a tab interface with anchor elements, each tab needs role="tab" along with supporting attributes like aria-selected:

<div class="tab-interface">
  <div role="tablist" aria-label="Settings">
    <a role="tab" href="#panel-1" aria-selected="true" aria-controls="panel-1" id="tab-1">
      General
    </a>
    <a role="tab" href="#panel-2" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
      Advanced
    </a>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>General settings content</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Advanced settings content</p>
  </div>
</div>

Incorrect: aria-selected on a plain <a> without a role

<a href="/settings" aria-selected="true">Settings</a>

Fixed: Adding the appropriate role

<a href="/settings" role="tab" aria-selected="true">Settings</a>

When choosing a fix, always consider whether the <a> element is truly the best choice. If the element doesn’t navigate the user to a new URL, a <button> is usually more appropriate. Reserve <a> for actual navigation, and use ARIA roles and states only when they accurately describe the element’s behavior in the interface.