Skjult innhold og fokus

Hva er problemet?

Hvis du bruker aria-hidden="true" på et element, blir det usynlig for skjermlesere. Hvis det samme elementet (eller innholdet i det) fortsatt kan motta tastaturfokus (f.eks. en lenke eller knapp), oppstår en farlig situasjon:

Tastaturbrukeren hopper til et element som skjermleseren ikke sier noe om. Det virker som om fokus har forsvunnet i "intet".

Hvordan fikse det?

• Hvis innholdet skal være helt skjult: Bruk display: none eller visibility: hidden. Dette fjerner det både visuelt, for skjermlesere og for tastatur.
• Hvis innholdet skal være synlig men ignoreres av skjermleser (f.eks. dekorativt ikon): Sørg for at det ikke er interaktivt. Ikke sett aria-hidden="true" på fokuserbare elementer.

<!-- FEIL: Knappen får fokus, men skjermleser sier ingenting -->
<div aria-hidden="true">
  <button>Klikk meg</button>
</div>

<!-- RIKTIG: Skjuler elementet helt -->
<div style="display: none;">
  <button>Klikk meg</button>
</div>