WAI-ARIA introduktion

Hvad er WAI-ARIA?

En værktøjskasse du kan bruge til at forbedre tilgængeligheden på især dynamiske websites. Kort sagt går det ud på at tilføje noget ekstra information til din HTML-kode, så det bliver nemmere for bl.a. skærmlæser – og tastaturbrugere, at bruge løsningen.

Så længe du kun benytter standard HTML-elementer i din brugergrænseflade, har skærmlæserbrugere god mulighed for, at forstå og betjene elementerne.  Der er helt faste rammer for, hvordan et skærmlæserprogram formidler fx et input element af typen tjekboks til brugeren. Brugeren får besked om, at det er en tjekboks, tjekboksens navn og om den er tjekket af eller ej. For tastaturbrugeren er det muligt at navigere til, aktivere eller deaktivere tjekboksen.

I dynamiske web applikationer benyttes ofte mere komplekse brugergrænsefladeelementer, der er bygget vha. teknikker som javascript og CSS. Når du vælger at bruge ikke standard HTML-elementer er der et behov for at tilføje ekstra information til elementerne, som fortæller fx skærmlæserbrugere, hvilke type element der er tale om. WAI-ARIA tilføjer altså ekstra semantisk information til HTML-elementer, så de bliver nemmere at fortolke for skærmlæserprogrammer og nemmere at navigere vha. tastatur.

Hvordan fungerer WAI-ARIA?

Ganske simpelt ved at tilføje nogle attributter til de eksisterende HTML-elementer. WAI-ARIA er en integreret del af HTML 5, men du kan også sagtens bruge WAI-ARIA i andre HTML-versioner.

Lad os sige, at du har en billed-boks, som brugeren kan lukke ved at klikke på ”×” i øverste højre hjørne. Koden til luk knappen ser sådan her ud:

<span class=”close_button” onclick=”luk()”>×</span>

Visuelt fungerer det som en knap, men skærmlæserbrugeren får læst teksten ”gange”, fordi det jo faktisk er et gangetegn.

Billedboks med gangetegn til at lukke med

Vi kan forbedre knappen, ved at tilføje et par ARIA-attributter:

<span class=”close_button” onclick=”luk()” role=”button” aria-lable=”Luk billedboks” >×</span>

Nu vil skærmlæserprogrammet læse  ”Luk billedboks knap,” i stedet for ”gange.”

  • Role=”button” fortæller at <span> elementet i virkeligheden skal opfattes som en knap.
  • Aria-label=”Luk billedboks” fortæller hvad knappens funktion er.

Brug ARIA så lidt som muligt

Nu har vi set, at vi kan få skærmlæserprogrammet til at opfatte et <span> element som en knap vha. role="button". Det fungerer fint, men når det er muligt, bør du altid benytte HTML-elementer med den rigtige semantiske betydning frem for at tilføje det via ARIA. Hvis vi bytter <span> ud med <button> kan vi undgå role="button".

<button class=”close_button” onclick="luk()" aria-lable=”Luk billedboks" >×</button>

Når vi bruger <button> frem for role="button" vil browseren også behandle vores knap som en knap. Dvs. at vi kan tabulere hen til den og aktivere den fra tastaturet. Det kunne vi ikke da vi brugte <span> og role="button". WAI-ARIA har ingen indflydelse på hvordan browseren opfatter og behandler elementerne. Det har kun betydning for kompenserende teknologi som skærmlæserprogrammer.

 

WAI-ARIA er altså et super værktøj som vi kan bruge til at forbedre tilgængeligheden. Men før du tilføjer ARIA til alt din kode, så overvej lige om ikke du kan opnå samme resultat med alm. HTML-elementer. Det giver normalt den bedste og mest kompatible løsning.

Tilbage