Standarder · ARIA

Tilstand Global tilstand

aria-hidden

Fjerner et element og alle dets efterkommere fra tilgængelighedstræet. Seende brugere ser stadig elementet; hjælpeteknologi når aldrig frem til det. Forbeholdt dekorativt indhold — anvend det aldrig på et fokuserbart element.

Hvornår bruges den

På dekorativt indhold, der ikke tilfører noget for skærmlæserbrugere — typisk ikoner, der allerede sidder ved siden af en tekstlabel, skillelinjer, baggrundsgrafik eller duplikeret tekst, der udelukkende er til layoutformål. Markering af disse elementer med aria-hidden="true" holder tilgængelighedstræet fokuseret på meningsfuldt indhold.

Sammenlignet med lignende mekanismer:

  • aria-hidden="true" — synlig for seende brugere, usynlig for hjælpeteknologi. Elementet optager stadig plads i layoutet.
  • CSS display: none og HTML-attributten hidden — usynlig for alle (seende brugere og hjælpeteknologi). Elementet gengives slet ikke.
  • CSS visibility: hidden — usynlig for alle, men elementet optager stadig plads i layoutet.
  • inert-attributten — element og efterkommere er ikke-fokuserbare, klikhændelser undertrykkes, men de forbliver i tilgængelighedstræet (i modsætning til aria-hidden). Det rette værktøj til modale baggrunde og deaktiverede skærme.

Det er afgørende aldrig at anvende aria-hidden="true" på et element, der er — eller indeholder — et fokuserbart element. Tastaturbrugere kan stadig sætte fokus på det med Tab, men deres skærmlæser vil ikke annoncere det. De lander på et usynligt element. Dette er en af de hyppigst rapporterede axe-core-fejl.

Synkronisering

Gyldige værdier er "true", "false" og "undefined". Den nyttige er "true"; "false" eksisterer for at tilsidesætte en forfaders aria-hidden, hvilket næsten aldrig er nødvendigt i praksis.

Tilstanden kan være statisk (et ikon, der altid er dekorativt) eller dynamisk. Hvis du skifter aria-hidden på en region — for eksempel for at skjule hoved-appen, mens en modal er åben — skal du synkronisere det med den faktiske visuelle tilstand og kombinere det med inert, så regionen heller ikke kan fokuseres.

Hyppige fejl

  • aria-hidden="true" på et fokuserbart element — det hyppigst rapporterede axe-core-problem.
  • Brug af aria-hidden til at skjule synlig tekst, som man ikke ønsker, at skærmlæsere skal læse. Fjern enten teksten eller flyt den ud af DOM’en.
  • Glemsel af aria-hidden="true" på et rent dekorativt ikon ved siden af en labelled knap — skærmlæseren annoncerer ikonets tilgængelige navn ud over knapetiketten.
  • Angivelse af aria-hidden="true" på <body>- eller <main>-elementet for at spærre baggrundsindhold bag en modal uden også at bruge inert — tastaturnavigation kan stadig slippe ud.
  • Brug af aria-hidden="false" for at “vise” noget, der er skjult med CSS. CSS skjuler det stadig.

Eksempel

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