ARIA

WAI-ARIA — Accessible Rich Internet Applications — er en W3C-specifikation, der udfylder et specifikt hul: når native HTML-elementer ikke er nok til at beskrive en brugerdefineret UI-kontrol, giver ARIA et vokabular af roller, tilstande og egenskaber, som hjælpeteknologier (særligt skærmlæsere) kan forstå.

Hvad ARIA er og ikke er

ARIA er et lag oven på HTML. Det tilføjer ikke adfærd. At sætte role="button" på en <div> får en skærmlæser til at annoncere den som en knap, men det gør ikke <div>-elementet fokuserbart, tilføjer ikke tastaturhåndtering og tilføjer ikke den visuelle styling. Alt det skal man tilføje selv.

Det er kilden til de fleste ARIA-fejl i produktion: udviklere tilføjer rollen og stopper der, og leverer en “knap”, der ikke reagerer på Enter eller mellemrum, ikke kan nås med Tab og ikke har et fokusindikator.

ARIAs første regel

Hvis du kan bruge et native HTML-element med den semantik og adfærd, du har brug for, så gør det.

Hver linje ARIA man skriver, er en linje HTML-semantik, man har besluttet at reimplementere i hånden. <button> annonceres allerede som en knap, er fokuserbar, reagerer på Enter og mellemrum og har en fokusring — gratis. <div role="button" tabindex="0"> med brugerdefinerede tastaturhåndtere fører til samme sted, skrøbeligt og med mere kode.

De tre kategorier

ARIA definerer tre slags attributter:

• Roller — hvad elementet er (role="button", role="dialog", role="navigation", role="alert"). Den fulde rolleliste har over 80 poster; WAI’s ARIA Authoring Practices Guide grupperer dem i landmærkeroller, widget-roller og dokumentstrukturroller.
• Tilstande — hvad elementets aktuelle tilstand er (aria-expanded="true", aria-checked="false", aria-disabled="true"). Tilstande ændres under kørsel.
• Egenskaber — hvad elementets relationer er (aria-labelledby="title-id", aria-describedby="help-id", aria-controls="menu-id"). Egenskaber er typisk statiske.

ARIAs tre øvrige regler

W3C’s femdelte regelsæt efter “brug native HTML, når det er muligt”:

2. Ændr ikke native semantik, medmindre det er strengt nødvendigt. (<h1 role="button"> forvirrer skærmlæsere om, hvorvidt det er en overskrift eller en knap.)
3. Alle interaktive ARIA-kontroller skal kunne bruges med tastaturet.
4. Brug ikke role="presentation" eller aria-hidden="true" på et fokuserbart element.
5. Alle interaktive elementer skal have et tilgængeligt navn.

At følge disse fem regler eliminerer 80 %+ af ARIA-fejl.

Hvor man finder hjælp

Den mest nyttige operationelle reference er ARIA Authoring Practices Guide (APG), som giver end-to-end implementeringsmønstre for almindelige widgets — comboboxes, dialoger, trævisninger, faneblade — herunder tabeller for tastaturinteraktion og DOM-eksempler.