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

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-p-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/)

A `<p>` element has an `aria-expanded` attribute, but a paragraph has no role that supports it.

`aria-expanded` tells assistive technologies whether the content an element controls, such as an accordion panel or a menu, is shown or hidden. ARIA allows it on roles like `button`, `link`, `combobox`, `tab` and `treeitem`. A `<p>` has the `paragraph` role, which has no expanded state, so the attribute means nothing there. The message lists three attributes, but only `role` clears it. Add `aria-checked` or `aria-level` and the validator asks for `role` alone.

The attribute often ends up on the paragraph that holds a toggle's text, or on the content a script opens and closes. If the paragraph doesn't show or hide anything, delete the attribute. If clicking it does, put a `<button type="button">` inside the paragraph and move `aria-expanded` and `aria-controls` onto the button. Keyboard users can't reach a clickable `<p>`, because it doesn't take focus, and screen readers don't announce it as something to press.

Adding `role="button"` and `tabindex="0"` to the `<p>` also clears the message, but then the Enter and Space keys have to be handled in script. A `<button>` gets focus and keyboard activation without any script.

## Invalid example

```html
<p aria-expanded="false" aria-controls="hours">Opening hours</p>
<div id="hours" hidden>
  <p>Monday to Friday, 9:00 to 17:00.</p>
</div>
```

## Valid example

```html
<p>
  <button type="button" aria-expanded="false" aria-controls="hours">Opening hours</button>
</p>
<div id="hours" hidden>
  <p>Monday to Friday, 9:00 to 17:00.</p>
</div>
```