Je formuliervelden hebben geen naam: zo koppel je labels
Een label is de tekst die zegt wat er in een veld hoort, zoals "E-mailadres". Is dat label niet aan het veld gekoppeld, dan hoort een schermlezergebruiker alleen "invoerveld" en moet hij raden wat hij moet invullen.
In het kud-rapport Je formuliervelden hebben geen naam
Waarom het uitmaakt
Een formulier zonder goede labels is voor blinde bezoekers vaak onbruikbaar. Dat kost je aanvragen, bestellingen en inschrijvingen.
Een gekoppeld label is ook voor andere bezoekers handig: wie op het label klikt, komt in het veld. Bij vinkjes maakt dat het tikvlak een stuk groter.
Zo los je het op
- Zet boven elk veld een zichtbaar
label-element. - Koppel het met
foraan hetidvan het veld. - Gebruik een placeholder niet als vervanging van een label. Hij verdwijnt zodra je begint te typen, en is vaak te licht om te lezen.
- Kan er echt geen zichtbaar label staan, zoals bij een zoekveld met een vergrootglas? Gebruik dan
aria-label. - Geef ook aan welke velden verplicht zijn, en in tekst, niet alleen met een rode kleur.
<label for="email">E-mailadres</label>
<input id="email" name="email" type="email" autocomplete="email">Op jouw platform
- WordPress
- Contact Form 7, Gravity Forms en WPForms maken standaard labels. Let op instellingen als "labels verbergen" of "alleen placeholder".
- Shopify
- Controleer je nieuwsbriefveld in de footer; daar staat vaak alleen een placeholder.
Veelgestelde vragen
Is een placeholder niet genoeg?
Nee. Schermlezers lezen hem niet altijd voor, hij verdwijnt tijdens het typen en is vaak te licht. Een label is altijd beter.
Mag het label ook naast het veld staan?
Ja, de plek maakt niet uit, zolang het label met for en id aan het veld gekoppeld is.