Tilbage til Forms og tilgængelighed

1. semester / Tema 4: Grundlæggende UI

Forbind fejlbeskeder og instruktioner

Brug `id` og `aria-describedby` til at koble et inputfelt til de tekster, der forklarer og hjælper.

Se undervisningsslides

Relevante links

TL;DR

  1. Et inputfelt bør være koblet til både instruktioner og fejlmeddelelser.
  2. aria-describedby forbinder feltet med tekst via id.
  3. Det samme felt kan godt pege på flere tekster på én gang.
  4. Når struktur, krav og styling hænger sammen, bliver formularen lettere at bruge.

Hvis du kun husker én ting: Et felt er først ordentligt forklaret, når hjælpetekst og fejlmeddelelse er koblet til det.

Kobl fejlbeskeden til feltet

Koblingen mellem et input og en fejlbesked kan fx se sådan her:

<div>
  <label for="password">Password</label>
  <p>Password must be at least 8 characters</p>
  <input id="password" aria-describedby="password-error" />
  <p id="password-error">Please enter a value</p>
</div>

Pointen er, at fejlteksten ikke bare står “i nærheden”. Den er eksplicit koblet til feltet.

Det giver mere mening for hjælpemidler og gør strukturen mere bevidst.

Det gælder også instruktioner

Det samme mønster kan bruges til instruktionstekst:

<div>
  <label for="password">Password</label>
  <p id="password-instruction">Password must be at least 8 characters</p>
  <input id="password" aria-describedby="password-instruction password-error" />
  <p id="password-error">Please enter a value</p>
</div>

Her er den vigtige detalje, at aria-describedby kan pege på mere end én id.

Det betyder, at ét inputfelt kan være forbundet til:

på samme tid.

Det bliver hurtigt teknisk

Et rigtigt felt kan hurtigt ende med flere attributter:

<input type="password"
       id="password"
       name="password"
       aria-describedby="password-instructions password-error"
       minlength="8"
       required />

Det kan godt se tungt ud første gang. Men hver del har en funktion:

Så selv om koden bliver længere, bliver intentionen også tydeligere.