Toegankelijk

Een formulier moet toegankelijk zijn. Dit betekent dat er in ontwerp en techniek rekening is gehouden met alle verschillende manieren waarop mensen websites gebruiken, inclusief mensen met een beperking.

Maak alles bereikbaar met het toetsenbord

Sommige gebruikers navigeren door een formulier met hun Tab-toets. Zorg dat alle onderdelen van het formulier bereikbaar zijn en gebruikt kunnen worden met alleen een toetsenbord (inclusief bijvoorbeeld kalenders). Dit ondersteunt toetsenbordgebruikers, maar ook gebruikers met andere randapparatuur die zich als toetsenbordpresenteert, zoals een switch control.

Geef elk veld een naam

Elk formulierveld moet een “toegankelijke naam” hebben, dit is een naam die in de code gekoppeld is aan het veld. Dit wordt bijvoorbeeld gebruikt in hulptechnologieën als schermlezers en stembediening.

De snelste manier om een veld een naam te geven, is door een <label>-element in code te koppelen aan het veld.

Tips:

• houd de toegankelijke naam en de zichtbare naam hetzelfde (zie ook WCAG 2.5.3 Label in naam)
• een snelle test of de koppeling werkt: klik op het label en ga na of het veld focus krijgt

Doen: Gekoppeld label met “for” en “id”

Het <label>-element heeft een for attribuut (of htmlFor in React) dat verwijst naar het id van het bijbehorende invoerveld.

Voornaam

<label for="voornaam">Voornaam</label>
<input
  type="text"
  name="first_name"
  id="voornaam"
/>

Niet doen: Label zonder gekoppelde input

Door het label element te gebruiken zonder for mis je de koppeling tussen het label en de input voor mensen die de visuele context niet waarnemen.

Voornaam

<label>Voornaam</label>
<input
  type="text"
  name="first_name"
/>

Niet doen: Verkeerde HTML element voor het label

Door geen label element te gebruiken mis je de ingebouwde logica die zorgt dat hij als label kan worden geinterpreteerd. Er bestaat zo geen enkele koppeling tussen het label en de input voor mensen die de visuele context niet waarnemen.

Voornaam

<p for="name">Voornaam</p>
<input
  type="text"
  name="first_name"
  id="name"
/>

Vertrouw niet alleen op kleur

Soms gebruikt een formulier kleur om een status aan te geven, bijvoorbeeld dat een veld een fout bevat. Zorg er dan voor dat kleur niet de enige manier is waarop het verschil tussen “goede” en “foute” invoer wordt aangegeven. Dan is de status namelijk mogelijk niet te onderscheiden door mensen met kleurenblindheid.

Dit is verplicht om te voldoen aan WCAG 2.1, 1.4.1 Gebruik van kleur.

Doen: Beschrijf in tekst

Vul de kleur aan met een beschrijving in tekst dat een melding een fout betreft, bijvoorbeeld “Fout: ”.

Voornaam

Fout: Dit is geen goede naam

<div class="utrecht-form-field utrecht-form-field--text">
  <label
    for="name"
    class="utrecht-form-label"
  >
    Voornaam
  </label>
  <div invalid="true">Fout: Dit is geen goede naam</div>
  <input
    name="first_name"
    id="name"
    type="text"
    class="utrecht-textbox utrecht-textbox--html-input"
    dir="auto"
  />
</div>

Zorg voor focusstijlen

Er is op je hele website altijd precies één element dat “focus” heeft. Als gebruikers een formulier invullen, krijgt het veld waar ze in typen focus. Zorg dat het als zodanig herkenbaar is door een duidelijke focusstijl te gebruiken.

Dit is verplicht om te voldoen aan WCAG 2.1, criterium 2.4.7 Focus Zichtbaar.

Niet doen: Focus uitgezet

In CSS kan focus worden uitgezet met outline: none of outline: 0. Doe dit net, want het zorgt dat gebruikers niet kunnen zien of het veld focus heeft.

:focus { outline: none; }