Formulierlabels

Een tekstvak naast het woord ‘E-mail’ heeft pas een label als het label-element eraan gekoppeld is; tot dan zegt een schermlezer mogelijk alleen ‘tekst bewerken’.

Elk veld heeft een naam nodig

Als de focus op een formulierveld komt, kondigt een schermlezer het label, type en de toestand aan: ‘E-mail, tekst bewerken, verplicht’. Het label komt van een label-element dat aan het veld gekoppeld is. Koppelen kan op twee manieren. Geef de invoer een id en het label een bijbehorende for, of plaats de invoer binnen het label. In beide gevallen verplaatst klikken op de labeltekst ook de focus naar het veld, waardoor kleine selectievakjes en keuzerondjes veel gemakkelijker te raken zijn.

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

<label>
  <input type="checkbox" name="news"> Send me the weekly menu
</label>

WCAG 2.2-succescriterium 3.3.2 Labels of instructies, niveau A, vraagt labels of instructies wanneer inhoud gebruikersinvoer nodig heeft. 1.3.1 Info en relaties vraagt dat de koppeling tussen label en veld in de code bestaat, niet alleen op het scherm. Een alinea die toevallig boven een invoerveld staat, is alleen visueel dichtbij; niets vertelt hulptechnologie dat beide bij elkaar horen.

Placeholders zijn geen labels

Het attribuut placeholder toont grijze hinttekst in een leeg veld. Het is verleidelijk dit als label te gebruiken en veel aanmeldformulieren doen dat. Het probleem is dat de tekst verdwijnt zodra je typt, zodat je niet meer kunt controleren waarvoor het veld was. Ook is die meestal te bleek voor de contrastregels uit het vorige hoofdstuk. Gebruik een zichtbaar label en desgewenst daarnaast een placeholder met een voorbeeldwaarde.

Groepen, doel en fouten

Keuzerondjes en bijbehorende selectievakjes hebben ook een groepslabel nodig. Omhul ze met een fieldset en zet de vraag in de legend, zodat een schermlezer ‘Grootte, groep’ zegt vóór ‘Klein, keuzerondje, 1 van 3’. Voor persoonsgegevens vertelt het attribuut autocomplete de browser waarvoor een veld dient, met namen uit de HTML-standaard zoals name, email, tel, new-password en one-time-code. Criterium 1.3.5 Identificeer het doel van de input, niveau AA, vraagt precies dit: zo kunnen browsers velden invullen en sommige hulpmiddelen herkenbare pictogrammen ernaast tonen.

Zeg in woorden wat er misgaat. Criterium 3.3.1 Foutidentificatie vraagt dat een invoerfout in tekst wordt aangeduid en beschreven, niet alleen met een rode rand. WCAG 2.2 voegde ook 3.3.7 Overbodige invoer toe: informatie die iemand al binnen hetzelfde proces invulde, moet opnieuw worden ingevuld of ter selectie aangeboden, in plaats van tweemaal te worden getypt. En 3.3.8 Toegankelijke authenticatie (minimum), niveau AA, zegt dat inloggen niet van onthouden of overschrijven mag afhangen tenzij hulp beschikbaar is. Wachtwoordmanagers laten invullen en plakken toestaan tellen beide als die hulp.

Zeg vóór het begin wat nodig is

Instructies horen vóór de beschreven velden, niet in een foutmelding nadat iemand is vastgelopen. Moet een wachtwoord minstens 15 tekens bevatten, zeg dat dan bij het label. Markeer verplichte velden in de labeltekst, bijvoorbeeld met ‘verplicht’, en voeg het attribuut required toe zodat de browser dit ook aankondigt. Verschijnt een foutmelding, houd die bij het veld en koppel beide met aria-describedby dat naar het id van de melding verwijst. De schermlezer leest de melding dan bij focus op het veld. Verplaats ten slotte de focus naar het eerste probleemveld of naar een foutenoverzicht bovenaan, zodat een toetsenbordgebruiker niet onderaan een lang formulier blijft zonder te weten wat er gebeurde.