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

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

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

```html
<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

```html
<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>
```
