Status Globale status

`aria-hidden`

Verwijdert een element en al zijn nakomelingen uit de toegankelijkheidsstructuur. Ziende gebruikers zien het element nog steeds; hulptechnologie bereikt het nooit. Gebruik uitsluitend voor decoratieve inhoud; nooit toepassen op een focusbaar element.

Wanneer te gebruiken

Op decoratieve inhoud die niets toevoegt voor schermlezers — doorgaans pictogrammen naast een tekstlabel, scheidingslijnen, achtergrondafbeeldingen of gedupliceerde tekst die puur voor de opmaak bestaat. Door die elementen te markeren met aria-hidden="true" blijft de toegankelijkheidsstructuur gericht op betekenisvolle inhoud.

In vergelijking met vergelijkbare mechanismen:

aria-hidden="true" — zichtbaar voor ziende gebruikers, onzichtbaar voor hulptechnologie. Het element neemt nog steeds ruimte in de opmaak.
CSS display: none en het HTML-attribuut hidden — onzichtbaar voor iedereen (ziende gebruikers en hulptechnologie). Het element wordt helemaal niet weergegeven.
CSS visibility: hidden — onzichtbaar voor iedereen, maar het element neemt nog steeds ruimte in de opmaak.
Het inert-attribuut — element en nakomelingen zijn niet-focusbaar, klikgebeurtenissen worden onderdrukt, maar ze blijven in de toegankelijkheidsstructuur (in tegenstelling tot aria-hidden). Het juiste hulpmiddel voor modale achtergronden en uitgeschakelde schermen.

aria-hidden="true" mag nooit worden toegepast op een element dat een focusbaar element is of bevat. Toetsenbordgebruikers kunnen er nog steeds naartoe tabben, maar hun schermlezer kondigt het niet aan. Ze komen terecht op een voor hen onzichtbaar element. Dit is een van de meest gerapporteerde axe-core-fouten.

Synchroniseren

Geldige waarden zijn "true", "false" en "undefined". De nuttige waarde is "true"; "false" bestaat om een bovenliggend aria-hidden te overschrijven, wat in de praktijk vrijwel nooit nodig is.

De toestand kan statisch zijn (een pictogram dat altijd decoratief is) of dynamisch. Als aria-hidden op een regio wordt omgeschakeld — bijvoorbeeld bij het verbergen van de hoofdapplicatie terwijl een modaal venster open is — synchroniseer dit dan met de werkelijke visuele toestand en combineer het met inert zodat de regio ook niet-focusbaar is.

Veelvoorkomende fouten

aria-hidden="true" op een focusbaar element — het meest gerapporteerde axe-core-probleem.
aria-hidden gebruiken om zichtbare tekst te verbergen die men liever niet door schermlezers wil laten voorlezen. Verwijder de tekst of verplaats hem uit de DOM.
Vergeten aria-hidden="true" in te stellen op een puur decoratief pictogram naast een gelabelde knop — de schermlezer kondigt de toegankelijke naam van het pictogram aan naast het knoplabel.
aria-hidden="true" instellen op het element <body> of <main> om achtergrondinhoud achter een modaal te vergrendelen, zonder ook inert te gebruiken — toetsenbordfocus kan nog steeds ontsnappen.
aria-hidden="false" gebruiken om iets dat door CSS verborgen is “zichtbaar te maken”. De CSS verbergt het nog steeds.

Voorbeeld

<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Opslaan
</button>