ARIA-feil

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) er et kraftig verktøy som kan gjøre komplekse webapplikasjoner tilgjengelige for skjermleserbrukere. Men det er et tveegget sverd: feil bruk av ARIA gjør nettsiden verre, ikke bedre. Faktisk viser studier fra WebAIM at sider med ARIA i gjennomsnitt har flere tilgjengelighetsfeil enn sider uten.

Hva betyr dette?

WCAG 4.1.2 «Navn, rolle, verdi» (nivå A) krever at alle brukergrensesnittkomponenter har et tilgjengelig navn og en korrekt rolle som kan leses av hjelpemidler. ARIA-attributter brukes ofte for å oppfylle dette kravet, men når de brukes feil, oppstår det alvorlige problemer.

ARIA fungerer ved å gi tilleggsinformasjon til tilgjengelighetstreet – en datastruktur som nettleseren bygger opp og deler med skjermlesere og andre hjelpemidler. Når du bruker et ARIA-attributt, endrer du direkte hva skjermleseren forteller brukeren. Hvis informasjonen er feil, blir brukeren villedet.

Hvorfor er det viktig?

Skjermlesere stoler blindt på ARIA

Når du setter role="button" på et element, forteller du skjermleseren at elementet er en knapp. Brukeren forventer da at den kan aktiveres med Enter eller mellomromstasten. Hvis elementet faktisk er en <div> som bare reagerer på museklikk, blir brukeren lurt – de trykker Enter, og ingenting skjer.

Feil ARIA er verre enn ingen ARIA

Et element uten ARIA-attributter vil i det minste bli presentert som det det er (en div, et avsnitt, en lenke). Men et element med feil ARIA-roller eller -attributter blir aktivt feilpresentert. Det er forskjellen mellom å ikke si noe og å lyve.

Vanlige ARIA-feil

Her er feilene vi oftest ser:

• Roller som ikke finnes: role="popup" eller role="container" er ikke gyldige ARIA-roller.
• Manglende påkrevde attributter: En role="slider" krever aria-valuenow, aria-valuemin og aria-valuemax. Uten disse vet ikke skjermleseren hva slideren viser.
• Ugyldige attributt-kombinasjoner: Ikke alle ARIA-attributter kan brukes på alle roller. For eksempel er aria-checked bare gyldig på elementer med rolle checkbox, radio eller switch.
• Tomme eller meningsløse label-er: aria-label="" eller aria-label="klikk her" gir ikke nyttig informasjon.
• Referanser til ikke-eksisterende ID-er: aria-labelledby="beskrivelse" gir ingenting hvis det ikke finnes et element med id="beskrivelse".

Den første regelen for ARIA

Fellesskapet rundt ARIA har formulert fem regler for bruk av ARIA. Den første og viktigste er:

Hvis du kan bruke et standard HTML-element med den semantikken og funksjonaliteten du trenger, skal du gjøre det i stedet for å bruke ARIA.

Med andre ord: en <button> er alltid bedre enn <div role="button">. Standardelementer har innebygd tastatursupport, riktig rolle og tilgjengelighetsnavigering – helt uten at du trenger å gjøre noe ekstra.

Eksempler på å velge HTML fremfor ARIA

<!-- Dårlig: Lager en knapp med ARIA -->
<div role="button" tabindex="0" onclick="sendSkjema()">
  Send inn
</div>

<!-- Bra: Bruker standard HTML-knapp -->
<button type="submit">Send inn</button>

<!-- Dårlig: Navigasjon med ARIA -->
<div role="navigation">
  <a href="/">Hjem</a>
  <a href="/om">Om oss</a>
</div>

<!-- Bra: Navigasjon med HTML5 -->
<nav>
  <a href="/">Hjem</a>
  <a href="/om">Om oss</a>
</nav>

<!-- Dårlig: Overskrift med ARIA -->
<div role="heading" aria-level="2">Vår historie</div>

<!-- Bra: Standard overskrift -->
<h2>Vår historie</h2>

Hvordan fikser jeg det?

Steg 1: Bytt ut ARIA med HTML der det er mulig

Gå gjennom koden din og se etter steder der du bruker ARIA-roller som tilsvarer HTML5-elementer:

Steg 2: Valider gjenværende ARIA

For de stedene der du faktisk trenger ARIA (komplekse widgets som tabs, trevisninger, eller modaler), sjekk at:

1. Rollen er gyldig. Se WAI-ARIA-spesifikasjonen for listen over gyldige roller.
2. Påkrevde attributter er til stede. Hver rolle har en liste over attributter som er påkrevd eller støttet.
3. Attributt-verdiene er gyldige. aria-hidden skal være "true" eller "false", ikke "yes" eller "no".
4. Referanser peker på eksisterende elementer. Hvis du bruker aria-labelledby eller aria-describedby, sjekk at ID-en faktisk finnes.

Steg 3: Test med skjermleser

Den ultimate testen er å bruke en skjermleser. NVDA (gratis for Windows) eller VoiceOver (innebygd på Mac) lar deg høre hvordan nettsiden din faktisk oppleves av skjermleserbrukere. Lyt etter om elementer annonseres med riktig navn og rolle.

Steg 4: Bruk automatiske verktøy

UUKontroll fanger opp de fleste ARIA-feil automatisk: ugyldige roller, manglende attributter, ugyldige verdier og brutte referanser. Kjør en sjekk jevnlig for å fange opp feil tidlig.

Oppsummert

ARIA er et viktig verktøy, men det bør være siste utvei – ikke første. Start med god, semantisk HTML. Bruk ARIA kun når standard HTML ikke gir deg den funksjonaliteten du trenger. Og når du bruker ARIA, sjekk at du bruker det riktig. Brukerne dine fortjener informasjon de kan stole på.