Standarder

ARIA

Se även: WAI-ARIA, Accessible Rich Internet Applications

Accessible Rich Internet Applications — en W3C-specifikation som definierar roller, tillstånd och egenskaper för att göra anpassade UI-kontroller tillgängliga för hjälpmedelsteknik.

WAI-ARIA — Accessible Rich Internet Applications — är en W3C-specifikation som fyller ett specifikt behov: när inbyggda HTML-element inte räcker till för att beskriva en anpassad UI-kontroll, tillhandahåller ARIA ett vokabulär av roller, tillstånd och egenskaper som hjälpmedelsteknik (framför allt skärmläsare) kan förstå.

Vad ARIA är och inte är

ARIA är ett lager ovanpå HTML. Det tillför inte beteende. Att sätta role="button" på ett <div> får en skärmläsare att annonsera det som en knapp, men det gör inte <div> fokuserbart, lägger inte till tangentbordshantering och lägger inte till visuell stil. Allt det måste du lägga till själv.

Det är här de flesta ARIA-buggar i produktion uppstår: utvecklare lägger till rollen och slutar, och levererar sedan en “knapp” som inte svarar på Enter eller Mellanslag, inte nås via Tab och saknar fokusindikator.

Den första regeln i ARIA

Om du kan använda ett inbyggt HTML-element med den semantik och det beteende du behöver, gör det.

Varje rad ARIA du skriver är en rad HTML-semantik du har beslutat att återimplementera för hand. <button> annonseras redan som en knapp, är fokuserbart, svarar på Enter och Mellanslag och har en fokusring — utan kostnad. <div role="button" tabindex="0"> med anpassade tangentbordshanterare ger dig samma plats, men skörare och med mer kod.

De stora kategorierna

ARIA definierar tre typer av attribut:

  • Roller — vad elementet är (role="button", role="dialog", role="navigation", role="alert"). Den fullständiga rolllistan har över 80 poster; WAI:s ARIA Authoring Practices Guide grupperar dem i landmärkesroller, widget-roller och dokumentstrukturroller.
  • Tillstånd — vad elementets aktuella status är (aria-expanded="true", aria-checked="false", aria-disabled="true"). Tillstånd ändras vid körning.
  • Egenskaper — vad elementets relationer är (aria-labelledby="title-id", aria-describedby="help-id", aria-controls="menu-id"). Egenskaper är vanligtvis statiska.

ARIA:s övriga tre regler

W3C:s femstegssekvens efter “använd inbyggd HTML när möjligt”:

  1. Ändra inte inbyggd semantik, om du inte verkligen måste. (<h1 role="button"> förvirrar skärmläsare om det är en rubrik eller en knapp.)
  2. Alla interaktiva ARIA-kontroller måste kunna användas med tangentbordet.
  3. Använd inte role="presentation" eller aria-hidden="true" på ett fokuserbart element.
  4. Alla interaktiva element måste ha ett tillgängligt namn.

Att följa dessa fem regler eliminerar 80 %+ av ARIA-buggar.

Var man hittar mer

Den mest användbara operativa referensen är ARIA Authoring Practices Guide (APG), som ger heltäckande implementeringsmönster för vanliga widgets — comboboxar, dialoger, trädvyer, flikar — inklusive tabeller för tangentbordsinteraktion och DOM-exempel.