Forstå hva ARIA er – og hva det ikke er
Forfatter: Tommy Olsson
Ekspert på universell utforming av ikt
tommy.olsson@useit.se
Lesetid 4 minutter
ArtikkelFinn ut hva ARIA er og hva det ikke er. Tommy Olsson forklarer hva du som webutvikler bør være oppmerksom på før du tar i bruk ARIA.
1. ARIA er ikke et mål i seg selv
Grunnprinsippet i webutvikling er å benytte semantisk HTML så langt det er mulig, og kun ty til ARIA i tilfeller hvor HTML alene ikke strekker til. ARIA bør være et supplement, ikke regelen, noe som også understrekes tydelig i selve ARIA-spesifikasjonen. Å bruke mye ARIA på et nettsted gjør det ikke automatisk mer universelt utformet.
ARIA-spesifikasjonen på W3cs nettsted (på engelsk).
2. ARIA lover mye, men handler lite
ARIA inneholder en rekke attributter som du kan bruke på HTML-elementer, ofte etter spesifikke og komplekse regler.
For brukere uten hjelpeteknologier har disse attributtene ingen praktisk effekt. Deres hovedformål er å formidle informasjon til hjelpeteknologier, spesielt skjermlesere.
Typisk innebærer denne informasjonen løfter som utvikleren må sørge for å innfri.
ARIA-roller kompliserer
Det mest sentrale ARIA-attributtet, "role", antyder at et HTML-element har en annen rolle enn det normalt ville hatt. Dette er bare et løfte – det endrer ikke elementenes underliggende HTML-struktur eller hvordan nettleseren håndterer det. Nettleseren formidler kun denne rollen til programmeringsgrensesnittet som hjelpeteknologier bruker til å kommunisere.
For eksempel, en <div role="button"> er fortsatt en <div> som:
- må overholde alle vanlige regler for <div>-elementer, inkludert hvor de kan plasseres og hvilket attributt og innhold den kan ha,
- ikke er tilgjengelig via tastaturet med mindre man også legger til tabindex="0",
- ikke reagerer på museklikk eller tastetrykk på samme måte som en faktisk knapp,
- ikke ser ut som en knapp med mindre utvikleren legger til stil og funksjonalitet gjennom CSS og JavaScript.
Videre, mens noen attributter er tillatt for HTML-elementet <button>, som «disabled», kan disse ikke brukes på en <div> med role="button". For å formidle at en slik "knapp" er inaktiv, må man bruke aria-disabled="true", gjøre elementet ikke-fokuserbart (tabindex="-1"), endre utseendet med CSS, og sørge for at hendelseslyttere (event listeners) ikke reagerer på museklikk og tastetrykk.
Dette strider mot prinsippet om progressiv forbedring, da "knappen" verken vil se ut eller fungere som en knapp uten tilleggsprogrammering med CSS og JavaScript.
3. Velg enten belte eller bukseseler, ikke begge deler
Da ARIA var nytt, ble det anbefalt å bruke doble attributter, som både "required" og "aria-required". Dette var fordi eldre nettlesere ikke støttet "required", og dermed ikke formidlet denne informasjonen til hjelpeteknologier. Nå som dette ikke er et problem lenger, er rådet å bruke kun HTML-attributter for standard HTML-elementer og ARIA-attributter for tilpassende komponenter. Det anbefales også sterkt å unngå å bruke "role"-attributtet for roller som et HTML-element allerede har som standard, slik som <button role="button">.
Arbeid videre med ARIA
ARIA tilbyr kun løfter om funksjonalitet, så det er viktig å prioritere bruk av semantisk HTML. Som utvikler er det ditt ansvar å sikre at funksjonaliteten faktisk oppfyller disse løftene ved å implementere og teste nødvendige funksjoner. En effektiv måte å teste ARIA-implementeringer på er å bruke skjermlesere.
Å bruke ARIA på et nettsted garanterer ikke økt tilgjengelighet; feilaktig bruk kan faktisk redusere tilgjengeligheten.
I Hanna Fredholms artikkel "Hvordan utviklere kan lage tilgjengelige nettsteder med WAI-ARIA" kan du fordype deg i hvordan ARIA kan benyttes.
