Sitecheck Din hjemmeside, fuldt dækket
All terms
Glossary · ARIA

ARIA (Accessible Rich Internet Applications)

En W3C-specifikation med HTML-attributter, der eksponerer roller, tilstande og egenskaber for UI-komponenter til hjælpeteknologi.

Sitecheck Team

ARIA — Accessible Rich Internet Applications — er en W3C-specifikation, der tilføjer semantisk betydning til HTML via attributter som role, aria-label, aria-hidden, aria-expanded og aria-live. Screen readers, stemmestyringssoftware og anden hjælpeteknologi bruger disse attributter til at beskrive widgets, som ren HTML ikke kan udtrykke alene, f.eks. brugerdefinerede tabs, modals, comboboxes eller toast notifications.

Hvorfor det er vigtigt

Uden ARIA er dynamiske JavaScript-komponenter usynlige eller forvirrende for screen reader-brugere. Men forkert brugt ARIA er værre end ingen — en button med role="link" annonceres forkert og bryder keyboard-forventninger. Fællesskabsreglen, gentaget i de officielle ARIA Authoring Practices, er "no ARIA is better than bad ARIA." Overholdelse af WCAG 2.2 success criteria afhænger ofte af korrekt ARIA for non-native widgets.

Sådan bruger du det

  • Brug native HTML først: <button>, <a href>, <details>, <dialog> har allerede de rigtige roller.
  • Tilføj aria-label eller aria-labelledby til icon-only buttons og formfelter, så de får et tilgængeligt navn.
  • Brug aria-expanded, aria-controls og aria-selected til at eksponere komponenttilstand på menuer, accordions og tabs.
  • Annoncer ikke-blokerende opdateringer med aria-live="polite"; reservér assertive til reelle nødsituationer.
  • Test med en rigtig screen reader (VoiceOver, NVDA eller TalkBack) plus et automatiseret tjek i Lighthouse eller axe.
  • Hold paritet på tværs af breakpoints, da mobile-first indexing og mobile screen readers ser den samme markup.

Se også