Een formulier met de labels ín de velden ziet er rustig uit. Dat is ook precies waarom het zo vaak zo gebouwd wordt. Het probleem begint zodra iemand gaat typen.
Vier dingen die misgaan
Je kunt niet nalezen wat erin hoort. Bij het eerste teken dat je typt verdwijnt de tekst. Bij “Naam” merk je dat niet. Bij “Telefoonnummer, zonder spaties” of “Factuuradres als dat afwijkt” merk je het wel, precies op het moment dat je twijfelt.
De kleur is bijna altijd te licht. Browsers zetten een placeholder standaard grijs, en niemand meet dat na. In het voorbeeld hieronder is het 2,78 : 1, terwijl 4,5 : 1 de eis is. Het lijkt bovendien op uitgeschakelde tekst, dus mensen slaan het veld over.
Een ingevuld formulier is niet meer te controleren. Scroll terug langs tien ingevulde velden en er staat nergens meer bij wat elk veld was. Dat raakt iedereen, maar het hardst wie langzaam leest of werkt met een vergroting waarin maar een stuk van het scherm past.
Hulpsoftware doet er onvoorspelbaar mee. Een placeholder is geen label. Sommige combinaties van browser en schermlezer lezen hem voor, andere niet, en zodra er wél tekst in het veld staat lezen ze hem geen van alle nog voor. Dat maakt het verschil tussen “kan het formulier invullen” en “kan het niet”.
Kijk zelf
Links een veld zoals je het overal tegenkomt, rechts wat er in plaats daarvan hoort.
Zoals je het overal tegenkomt
Het woord “Naam” staat ín het veld. Zodra je begint te typen is het weg. De grijze tekst haalt hier 2,78 : 1 en de veldrand 1,39 : 1; de eis is 4,5 : 1 voor tekst en 3 : 1 voor de rand van een bedienelement. Dit monster is met opzet fout en staat op aria-hidden.
Zoals het hoort
Hier staat geen nagemaakt veld, want dat zou weer een plaatje zijn. Het echte formulier staat onderaan deze pagina. Scroll erheen, klik in het eerste veld en typ een letter: het label blijft staan.
- Het label staat boven het veld en blijft staan als je typt.
- Het woord “verplicht” staat er voluit, niet als sterretje en niet alleen in kleur.
- Autocomplete staat aan, dus je browser mag hem invullen.
- Het veld is minstens 44 pixels hoog.
Wat er dan wel moet
Een zichtbaar <label> boven het veld, met een for dat naar het id van het veld wijst. De placeholder mag blijven bestaan, maar dan voor wat hij is: een vóórbeeld van het antwoord, niet de vraag. Dus label “Telefoonnummer” en placeholder “06 12 34 56 78”, nooit andersom.
Twee dingen die er meestal bij horen. Zet autocomplete op de velden die daarvoor bestaan, zoals name, tel en email: dan mag de browser ze invullen, en dat scheelt iemand met een motorische beperking het hele formulier. En schrijf “verplicht” voluit in plaats van een sterretje, want een sterretje is een teken waarvan je de betekenis moet kennen.
Wat je zelf kunt doen
Open je eigen contactformulier, klik in het eerste veld en typ één letter. Kun je daarna nog lezen wat er in dat veld hoort? Zo niet, dan staat je label op de verkeerde plek. Dat is een reparatie van een half uur, en het is het soort half uur dat je aan afgebroken formulieren terugverdient.
Het formulier onderaan deze pagina is het monster. Daarom staat er geen nagemaakt goed veld in dit artikel.