1. semester / Tema 4: Grundlæggende UI

WAI-ARIA og form-navngivning

Når HTML ikke kan sige nok alene, kan ARIA hjælpe. Men først skal grundstrukturen være på plads.

Se undervisningsslides

Relevante links

TL;DR

WAI-ARIA er et teknisk supplement, ikke en erstatning for god HTML.
Start altid med labels, rigtige elementer og god struktur.
aria-label kan bruges til at give en formular et tydeligt navn.
Brug ARIA bevidst, når det faktisk løser et problem.

Hvis du kun husker én ting: Brug først god HTML, og tilføj kun ARIA, når HTML alene ikke kan sige nok.

Hvad er WAI-ARIA?

WAI-ARIA er en specifikation, der kan gøre webindhold og webapplikationer mere tilgængelige.

Det er vigtigt at forstå det rigtigt:

ARIA er ikke det første du skal gribe efter
ARIA er noget du bruger, når almindelig HTML ikke er nok

For nybegyndere er tommelfingerreglen derfor:

Start med god HTML
Tilføj ARIA, når der er et konkret behov

Navngiv formularen

En af de enkleste ting du kan gøre, er at give selve formularen et navn:

<form aria-label="EK signup form">
  <!-- resten af koden -->
</form>

Det hjælper skærmlæsere med at finde og identificere formularen på siden.

Det betyder ikke, at du skal putte aria-label på alt. Men det er et godt eksempel på en situation, hvor ARIA tilfører noget ekstra, som den synlige HTML ikke nødvendigvis gør alene.

Først og fremmest: få HTML på plads

Selv i et ARIA-emne er den vigtigste pointe stadig, at grundstrukturen skal være rigtig:

brug labels
brug for og id, når de skal kobles
brug fieldset og legend til grupper
brug de rigtige input-typer

Hvis de ting mangler, bliver ARIA hurtigt en plasterløsning i stedet for en reel forbedring.

Øvelse

Her kan du træne netop de grundlæggende HTML-rettelser, som bør komme før ARIA: