TL;DR
- Usynligt betyder ikke nødvendigvis utilgængeligt for tastatur eller skærmlæser.
- Visuelt skjult tekst kan supplere et navn; dekorative ikoner kan skjules med aria-hidden.
- hidden og inert løser andre opgaver end aria-hidden.
Visuelt skjult tekst
En .visually-hidden-klasse — ofte kaldet .sr-only — er en CSS-teknik,
ikke et særligt HTML-attribut. Den kan skjule en kort tekst visuelt,
mens teksten stadig kan indgå i et accessible name.
.visually-hidden:not(:focus-within, :active) { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; border: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}Fokus-undtagelsen undgår at fastholde fokuseret indhold i denne visuelle skjulning. Et skiplink skal derudover have en tydelig synlig stil.
Skjul ikke instruktioner visuelt, hvis alle har brug for dem. Teknikken er et supplement, ikke en grund til at fjerne nyttig tekst fra designet.
Synlighed, semantik og interaktion
Tabellen tager udgangspunkt i en almindelig aktiverbar knap, uden andre skjule- eller deaktiveringsregler:
| Teknik | Synlig? | Med i Tab-rækkefølgen? | Eksponeret for hjælpemidler? |
|---|---|---|---|
opacity: 0 |
Nej | Ja | Ja |
hidden |
Nej | Nej | Nej |
inert på knappen eller dens forælder |
Ja | Nej | Nej |
aria-hidden="true" |
Ja | Ja — derfor en fejl på denne knap | Skal skjules, men fokus kan skabe en konflikt |
inert forhindrer også klik og fokusering i området, men styler det ikke
automatisk som inaktivt. aria-hidden gør hverken elementet usynligt eller
ude af stand til at modtage fokus. Sæt det derfor ikke på fokuserbare
kontroller eller deres forældre.
Om aria-hidden på MDN.
hidden betyder her den almindelige booleske tilstand, ikke
hidden="until-found", og CSS må ikke overstyre skjulningen.
Forudsig effekten, aktivér én teknik, og prøv Tab. Kontrollér derefter med Chromes accessibility-træ. Øvelsens inspector er en forenklet hjælp, ikke facit for browserens fokus- eller træadfærd.