Hva kreves i praksis?
Alle UI-komponenter skal ha et tilgjengelig navn, en rolle og en verdi som hjelpemidler kan lese — inkludert egendefinerte widgets. Kravet gjelder sider som brukes i Norge, uavhengig av om du er offentlig virksomhet, butikk eller byrå som leverer nettsiden.
Vanlige feil og avvik
- Ikonknapper uten navn.
- Egendefinerte faner uten role="tab" og aria-selected.
- input type="image" uten alt.
Før og etter — kodeeksempler
Eksemplene er forenklet. Lim inn mønsteret, ikke nødvendigvis klassenavnene, i din egen kodebase.
Feil kode — bryter WCAG
Knappen har ingen tilgjengelig tekst. En div later som fane uten rolle og tilstand.
Feil eksempel
<button type="button"><svg><!-- meny --></svg></button>
<div class="tab active" onclick="showPanel()">Faktura</div>Riktig kode — utbedret
Ekte kontroller, eller ARIA som speiler det visuelle. Navn, rolle og tilstand henger sammen.
Riktig eksempel
<button type="button" aria-label="Åpne meny" aria-expanded="false">
<svg aria-hidden="true"><!-- meny --></svg>
</button>
<button type="button" role="tab" aria-selected="true">Faktura</button>Hvordan UUvakta tester dette
Dette er et av de mest automatiserte kriteriene: button-name, aria-allowed-attr, aria-required-attr, aria-roles, input-button-name og flere. UUvakta lister komponenten, siden og et konkret fiks-forslag. Feil ARIA er ofte verre enn ingen ARIA — rapporten skiller på det.