Formulierlabels verdwijnen zodra je begint te typen

Een label is de tekst die bij een formulierveld hoort en dat veld benoemt. Een placeholder is een hint die in het veld zelf staat en verdwijnt zodra er tekst staat. Ze lijken inwisselbaar, maar dat zijn ze niet.

• Label: blijft staan, benoemt het veld en geeft bezoekers en hulptechnologie een vaste verwijzing.
• Placeholder: is een tijdelijk voorbeeld of hint, geschikt voor een formaatvoorbeeld zoals een datumnotatie, niet voor de naam van het veld.

Het probleem ontstaat wanneer de placeholder de rol van label overneemt. Dan bestaat de betekenis van het veld alleen zolang het veld leeg is. De toegankelijkheidstutorials van het W3C (Toegankelijkheidstutorials) behandelen formulieren als een van de onderwerpen waarvoor je concrete richtlijnen en voorbeelden vindt. Gebruik die tutorials voor de exacte technische uitwerking, en lees ze na op wat jouw formuliertype vraagt.

Je hebt geen speciale tools nodig om te zien of de betekenis van een veld blijft staan. Doe deze controle op je live formulier, op een telefoon en op een computer.

1. Open het formulier en kijk naar elk veld zonder iets in te vullen. Noteer waar de benaming staat: boven, naast of enkel in het veld.
2. Vul het eerste veld in met fictieve invoer (verstuur nooit het live formulier), ga naar het volgende en kijk of je nog weet wat in het eerste veld stond. Doe dat voor elk veld.
3. Vul alle velden half in met fictieve invoer, laat het formulier even liggen en ga terug.
4. Verzend niets: sluit de pagina zonder op verzenden te klikken. Weet je zonder te scrollen of te raden wat elk veld vroeg?
5. Klik op de tekst van een label. In een goed gekoppeld label komt de cursor dan in het bijhorende veld.
6. Navigeer met enkel het toetsenbord (Tab) en kijk of de focus zichtbaar is en of de volgorde logisch loopt.

Noteer per veld of de betekenis blijvend zichtbaar is. Die lijst gebruik je in het beslisblad hieronder. Een scherm-voorleesprogramma testen vraagt extra kennis; laat dat zo nodig door een specialist doen en baseer je niet op een eigen vermoeden.

Een zwevend label dat bij typen naar boven schuift, kan een goede tussenoplossing zijn, op voorwaarde dat de tekst leesbaar blijft en niet wegvalt. Test dat patroon op een kleine telefoon voor je het kiest.

Pas het formulier aan in een vaste volgorde, zodat je altijd weet welke wijziging een effect veroorzaakte.

1. Maak eerst een kopie of testversie, of werk in een testomgeving als je die hebt.
2. Voeg bij elk veld een zichtbaar label toe en koppel het technisch aan het veld. De exacte manier hangt af van je formulierbouwer of thema; lees dat na in de documentatie van je tool.
3. Verklein de placeholder tot een echt voorbeeld, of schrap hem als hij niets toevoegt.
4. Controleer de breedte op een kleine telefoon: lange labels mogen niet over elkaar of buiten het scherm lopen.
5. Verstuur alleen in een veilige testomgeving, of met duidelijk fictieve invoer en een uniek testbericht (bijvoorbeeld "TEST label-wijziging"), een testaanvraag en controleer of die nog aankomt bij de juiste persoon. Controleer ook dat een eventuele melding of foutpagina niet misleidt: een time-out kan optreden nadat de aanvraag al is opgeslagen, dus zoek eerst of het testbericht is aangekomen voor je opnieuw verstuurt, en ruim testgegevens daarna op.

Voor wie de impact op laden en reactiesnelheid wil nagaan, geven de leerpagina's over prestaties (Prestaties leren) en de overzichtsgids van MDN (Webprestaties) achtergrond bij hoe laden, renderen en reactiesnelheid samenhangen. Een paar labels meer zullen zelden de oorzaak van traagheid zijn, maar meet je eigen pagina als je twijfelt.

Stel dat een formulier vier velden heeft: naam, e-mailadres, telefoonnummer en een bericht. Invoer voor dit voorbeeld: elk veld heeft alleen een placeholder die de veldnaam herhaalt, er zijn geen zichtbare labels, en bij het invullen van het derde veld weet een testpersoon niet meer wat in het eerste stond.

Verwachte technische controles na aanpassing: boven elk veld staat een label dat blijft staan tijdens het typen. De placeholder van het telefoonveld toont enkel een voorbeeld van de gewenste notatie. Een klik op elk label zet de cursor in het juiste veld. Op een kleine telefoon past elk label zonder afbreken. Een testaanvraag komt aan.

Dit scenario bevat geen aantallen, omdat het effect op het aantal ingevulde formulieren van je eigen bezoekers afhangt. Wil je daar iets over weten, vergelijk dan je eigen cijfers voor en na de wijziging, met voldoende tijd en zonder dat een campagne of seizoenswisseling het beeld vertekent.

Herhaal na de aanpassing je diagnose uit de tweede sectie en voeg twee punten toe:

• Test met browserzoom op een groter percentage en kijk of labels en velden niet over elkaar schuiven.
• Test het gedrag bij een foutmelding: blijven label en melding allebei zichtbaar?

Deze gids geeft een praktische eigen controle, geen volledige toegankelijkheidsaudit en geen garantie op naleving van een norm. De W3C-tutorials zijn de plaats om de technische uitwerking voor jouw formuliertype na te lezen. Wil je de zichtbare signalen van je website laten bekijken, dan kan dat via Marketing Scan. Een publieke scan kijkt naar wat van buiten zichtbaar is en bevestigt niet dat je formulier technisch juist is gekoppeld of toegankelijk is voor iedereen.