Element met aria-hidden is focusbaar

Hoe het probleem op te lossen?

Elementen met het attribuut aria-hidden="true" zouden niet focusbaar moeten zijn, en dat geldt ook voor hun children.

<div aria-hidden="true">
    <a href="/">Link</a>
</div>

Met aria-hidden geef je aan dat een element niet zichtbaar is op het scherm. Assistieve technologieën zoals schermlezers slaan het dan over. Het aria-hidden attribuut moet bijvoorbeeld worden gebruikt wanneer een element verborgen is achter een ander element.

Oplossingen voor het probleem

Verwijder het aria-hidden="true" attribuut

<div>
    <a href="/">Link</a>
</div>

Verberg de link met CSS

<div aria-hidden="true">
    <a href="/" style="display:none">Link</a>
</div>

Voeg tabindex="-1" attribuut toe

<div aria-hidden="true">
    <a href="/" tabindex="-1">Link</a>
</div>

Disable input elementen

<div aria-hidden="true">
    <input name="email" disabled/>
</div>

Waarom is dit belangrijk?

Het aria-hidden="true" attribuut zorgt ervoor dat het element en zijn children niet aanwezig is in de Accessibility tree. Als aria-hidden="true" aanwezig is, is het element niet langer te gebruiken middels een screen reader en andere assistieve technologieën. Het is belangrijk dat het verborgen element niet met toetsenbord navigatie alsnog te bereiken is. aria-hidden=true verwijdert een element namelijk niet automatisch uit de tabvolgorde. Regel dit apart via tabindex="-1" of door het element te verbergen met CSS.