About This HTML Issue
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
<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
<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>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.