Element met aria-hidden is focusbaar
Laatste wijziging:
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.
Deze html is een voorbeeld van een niet toegankelijke website. Het element is focusbaar terwijl
de parent het aria-hidden="true" attribuut heeft.
<div aria-hidden="true">
<a href="/">Link</a>
</div>
Het doel van aria-hidden is om assistieve technologieën te laten weten dat een element niet zichtbaar is op het scherm en daarom niet moet worden aangekondigd door bijvoorbeeld schermlezers.
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
Verwijder het aria-hidden="true" attribuut als het element zichtbaar is op de pagina.
De HTML wordt dan:
<div>
<a href="/">Link</a>
</div>
Verberg de link met CSS
Voeg display: none toe om het element te verbergen. Dit zorgt ervoor dat het element niet focusbaar is.
<div aria-hidden="true">
<a href="/" style="display:none">Link</a>
</div>
Voeg tabindex="-1" attribuut toe
Het toevoegen van tabindex="-1" zorgt ervoor dat gebruikers van keyboard navigatie het element
niet kunnen gebruiken.
<div aria-hidden="true">
<a href="/" tabindex="-1">Link</a>
</div>
Disable input elementen
Voeg disabled toe aan het input element om te voorkomen dat het element focus kan verkrijgen.
<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.
Gratis Website Accessibility Audit
De diensten van ExcellentWebCheck
Het doel van ExcellentWebCheck is om de online gebruikerservaring van alle bezoekers van websites te verbeteren. De tools van ExcellentWebCheck helpen bij het detecteren en verbeteren van usability-problemen op uw website.