TL;DR
- Native HTML giver både semantik og indbygget adfærd.
- ARIA beskriver elementer for hjælpemidler; det implementerer ikke tastaturbetjening.
- Inspicér den beregnede semantik, men test interaktionen separat.
En rolle er et løfte
<div role="button" tabindex="0"> kan blive eksponeret som en knap og få
tastaturfokus. Det får ikke automatisk en native knaps aktivering med Enter
og Mellemrum.
<button type="button">Læg i kurv</button>En native knap har allerede denne adfærd. Brug et link med href til
navigation og en knap til en handling; vælg ikke element efter udseendet.
Det er pointen i APG’s “A role is a promise”.
Prøv først med mus og tastatur. Udskift derefter det generiske element med en knap, behold den eksisterende klasse og click-handler, og test igen. Hvilken kode behøvede du ikke selv at skrive?
Inspicér det andet interface
Browseren bygger et accessibility-træ ud fra blandt andet DOM, HTML-semantik, CSS og ARIA. Det er ikke en kopi af alle DOM-elementer: Wrappere kan være udeladt, mens navne og relationer kan komme fra andre elementer.
Vælg en knap, et link og en overskrift i Chrome DevTools under
Elements → Accessibility. Forudsig først deres roller og navne, og
sammenlign derefter med resultatet. En h2 har fx rollen heading og niveau 2.
Øvelsernes inspector er en læringshjælp, ikke browserens faktiske accessibility-træ. Brug Chrome til at kontrollere, hvad der eksponeres, og tastaturet til at kontrollere fokus og betjening.
Rolle, navn og tilstand
En disclosure-knap kan fortælle tre forskellige ting:
- Rolle: Hvilken type kontrol er det? Knap.
- Navn: Hvilken kontrol er det? “Vis tips om pasform”.
- Tilstand: Er dens indhold foldet ud?
aria-expanded="false".
WAI-ARIA udvikles af W3C’s ARIA Working Group; WCAG beskriver krav til tilgængelighed, mens ARIA er et teknisk middel til at formidle semantik, når HTML ikke dækker behovet. Om ARIA Working Group.
“Programmatisk” betyder her, at informationen kan bestemmes af software. Et korrekt attribut i HTML kan være nok — det kræver ikke JavaScript, medmindre informationen skal ændres undervejs.