HTML check: Element “a” is missing one or more of the following attributes: “aria-checked”, “href”, “role”.

About This HTML Issue

An <a> element without an href attribute can't use aria-selected unless it also has a role that supports the selected state.

Only four roles support aria-selected: tab, option, row and gridcell. An <a> with an href has the link role, and one without href is a placeholder with the generic role. Neither has a selected state, so the attribute tells assistive technology nothing it can use. An anchor without href also can't receive keyboard focus, which leaves keyboard users unable to reach it.

The error usually comes from tabs or filter buttons built from bare <a> tags, where a script moves aria-selected="true" to the active item. The message also lists aria-checked and href, but adding either one only swaps this error for another: links don't support aria-selected, and aria-checked doesn't stand in for the missing role.

For tabs, give each tab role="tab", wrap the group in a role="tablist" container and point each tab at its role="tabpanel" with aria-controls. A <button type="button"> works better than an <a> here because it's focusable without a tabindex. If the control shows and hides content, use a <button> with aria-expanded. If it marks the current page in a navigation menu, give the link its href and use aria-current="page" instead.

Invalid example

<div class="tabs">
  <a aria-selected="true" aria-controls="panel-specs">Specifications</a>
  <a aria-selected="false" aria-controls="panel-reviews">Reviews</a>
</div>
<div id="panel-specs">
  <p>Weight: 1.2 kg</p>
</div>
<div id="panel-reviews" hidden>
  <p>No reviews yet.</p>
</div>

Valid example

<div role="tablist" aria-label="Product details">
  <button type="button" role="tab" id="tab-specs" aria-selected="true" aria-controls="panel-specs">Specifications</button>
  <button type="button" role="tab" id="tab-reviews" aria-selected="false" aria-controls="panel-reviews" tabindex="-1">Reviews</button>
</div>
<div role="tabpanel" id="panel-specs" aria-labelledby="tab-specs">
  <p>Weight: 1.2 kg</p>
</div>
<div role="tabpanel" id="panel-reviews" aria-labelledby="tab-reviews" hidden>
  <p>No reviews yet.</p>
</div>