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

Lees hierover meer op de richtlijnen over labels.

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; }