ARIA (Accessible Rich Internet Applications) är en uppsättning attribut som lägger till tillgänglighetssemantica — roller, tillstånd och egenskaper — som inbyggd HTML inte kan uttrycka. Men den viktigaste ARIA-regeln är: föredra inbyggd HTML först.
Save
Save
Inbyggda element har korrekta roller, tangentbordsbeteende och fokus gratis. Gå till ARIA bara när inget inbyggt element gör 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 -->
Detta är verkligt användbar ARIA: att berätta för skärmläsare om innehål som ändras utan en siduppdatering (sökresultat, notiser, valideringsfel).
Felaktig ARIA är värre än ingen — det ger skärmläsareanvändare falsk information. Och ARIA ändrar bara semantik, aldrig beteende: role="button" på en <div> gör den inte fokusbar eller klickbar; du måste själv lägga till tabindex och tangentbordshanterare.
Använd semantisk HTML för 95-procentsfallet; använd ARIA för att fylla luckorna för anpassade widgetar (flikar, kombinationsrutor, menyer) och för att meddela dynamiska uppdateringar via live-regioner.
Följa reglerna — föredra inbyggd, ändra inte inbyggd semantik i onödan, håll tillstånden synkroniserade och använd aldrig en roll du inte fullt implementerar.