ARIA (Accessible Rich Internet Applications) er et sett med attributter som legger til accessibility-semantikk — roller, tilstander og egenskaper — som native HTML ikke kan uttrykke. Men den viktigste ARIA-regelen er: foretrekk native HTML først.
Save
Save
Native elementer har korrekte roller, tastaturoppførsel og fokus gratis. Bruk ARIA bare når ikke nativt element gjør jobben.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Dette er genuint nyttig ARIA: fortelle skjermlesere om innhold som endres uten sideinnlasting (søkeresultater, varsler, valideringsfeil).
Feil ARIA er verre enn ingen — det gir skjermleserbrukere falsk informasjon. Og ARIA endrer bare semantikk, aldri atferd: role="button" på en <div> gjør den ikke fokusbar eller klikkbar; du må legge til tabindex og nøkkelbehandlere selv.
Bruk semantisk HTML for 95%-saken; bruk ARIA for å fylle hullene for tilpassede skjemaer (faner, kombinasjoner, menyer) og for å kunngjøre dynamiske oppdateringer via live regions.
Følg reglene — foretrekk native, endre ikke native semantikk unødvendig, hold tilstander synkronisert og bruk aldri en rolle du ikke fullt ut implementerer.