Aria Hidden Focus
Serious - WCAG Level AA
The issue at hand is that elements marked with aria-hidden="true" should not be focusable, nor should they contain any focusable elements. This is crucial because when assistive technologies, such as screen readers, encounter elements that are hidden but still focusable, it can lead to confusion and a poor user experience.
To fix this issue, follow these steps:
Identify Focusable Elements: Review your HTML to identify any elements that are focusable (e.g.,
<a>,<button>,<input>, etc.) within any parent elements that havearia-hidden="true".Remove Focusability: Ensure that these elements are not focusable. You can do this by removing the
tabindexattribute or setting it to-1for elements that should not be focusable.Remove or Adjust
aria-hidden: If an element is meant to be hidden and still contains focusable elements, you may need to reconsider the use ofaria-hidden. If the element should be visible at some point, consider using JavaScript to toggle thearia-hiddenattribute dynamically based on user interaction.
Dynamic aria-hidden:
If the aria-hidden value is dynamic, you may need to edit the javascript setting this value or add a new script mirroring the aria-hidden value.
Best Practices:
Use
aria-hiddenonly on elements that are truly not relevant to the user at that moment.Consider using CSS to visually hide elements instead of
aria-hiddenif they are still needed for screen readers.
Tip:
The
inertproperty can be used to make all child elements not focusable.