ARIA (Accessible Rich Internet Applications) er et sæt attributter, der tilføjer tilgængelighedssemantik — roller, tilstande og egenskaber — som native HTML ikke kan udtrykke. Men den vigtigste ARIA-regel er: foretrk native HTML først.
Save
Save
Native elementer kommer med korrekte roller, tastaturopførsel og fokus gratis. Grib kun efter ARIA, når intet native element udfører jobbet.
<!-- 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 virkelig brugbar ARIA: at fortælle skærmlæsere om indhold, der ændres uden en sideopdatering (søgeresultater, toast-meddelelser, valideringsfejl).
Forkert ARIA er værre end ingen — det giver skærmlæsebrugere falske informationer. Og ARIA ændrer kun semantik, aldrig opførsel: role="button" på en <div> gør det ikke fokuseret eller klikbart; du skal selv tilføje tabindex og tasteturahandlere.
Brug semantisk HTML til 95%-sagen; brug ARIA til at udfylde huller for tilpassede widgets (faner, kombinationsbokse, menuer) og til at annoncere dynamiske opdateringer via live-regioner.
Follow reglerne — foretrk native, ændre ikke native semantik unødvendigt, hold tilstande synkroniseret, og anvend aldrig en rolle, du ikke fuldt implementerer.