Een formulierveld zonder correct gekoppeld label is de meestvoorkomende fout die wij tegenkomen op contactformulieren, bestelstappen en inlogschermen. Het label staat er vaak wel, visueel netjes boven of naast het invoerveld, maar het is in de broncode niet aan dat veld gekoppeld. Een schermlezer leest het veld dan voor als \"bewerken, leeg\" zonder te vertellen waar het veld voor dient.
Het probleem ontstaat meestal doordat een label en een invoerveld er visueel bij elkaar horen, maar de programmeur (of het bouwsysteem) geen technische relatie tussen beide heeft gelegd. Voor een ziende gebruiker maakt dat niets uit: die ziet het label gewoon staan. Voor iemand die met een schermlezer werkt, bestaat die visuele nabijheid niet. Wat telt is de koppeling in de code, en die ontbreekt vaker dan u zou verwachten, ook op sites die er verzorgd uitzien.
Drie varianten van dezelfde fout
De meest voorkomende vorm is het label dat wel op het scherm staat maar los van het veld in de code leeft, zonder technische koppeling. De tweede vorm is het gebruik van een placeholdertekst in het veld zelf als enige uitleg: zodra de gebruiker begint te typen, verdwijnt die tekst, en een schermlezer behandelt een placeholder bovendien niet altijd als volwaardig label. De derde vorm ziet u vooral bij iconen: een zoekveld met alleen een vergrootglas-icoon, of een knop met alleen een pictogram, zonder tekst die een schermlezer kan voorlezen.
Al deze varianten hebben gemeen dat de fout meestal niet opzettelijk is. Niemand bouwt een formulier om het ontoegankelijk te maken. Het gebeurt doordat een label visueel klopt en de bouwer aanneemt dat daarmee klaar is, terwijl de technische koppeling een aparte stap is die makkelijk wordt overgeslagen, zeker onder tijdsdruk of bij een sjabloon dat oorspronkelijk niet met toegankelijkheid in gedachten is gebouwd.
Waarom dit zwaarder weegt dan het lijkt
Een formulier is vaak het punt waarop een bezoeker daadwerkelijk iets wil regelen: een bestelling afronden, een account aanmaken, contact opnemen. Als het label ontbreekt op precies dat moment, stokt het proces voor een deel van uw bezoekers, terwijl de rest van de site prima werkt. Toezichthouders en beoordelaars kijken bij formulieren dan ook vaak eerst naar dit soort knelpunten, omdat ze direct invloed hebben op of iemand een dienst kan afnemen.
Daarbij komt dat deze fout zich makkelijk verspreidt. Een label zonder koppeling in één sjabloon voor een adresveld duikt vaak op tientallen pagina's tegelijk op, omdat hetzelfde onderdeel overal wordt hergebruikt. Eén gemiste koppeling in de basis raakt zo de hele bestelstap of het hele inlogscherm.
Hoe u het test, en waar een automatische scan tegen zijn grenzen loopt
Een automatische scan herkent een deel van deze fouten goed: hij ziet of een label technisch aan een veld gekoppeld is en of een invoerveld helemaal geen naam heeft. Wat een scan lastiger beoordeelt, is of een label inhoudelijk klopt, of een placeholder als enige uitleg voldoende duidelijk is, en of de leesvolgorde voor een schermlezer logisch aanvoelt. Dat is precies waarom wij in elk rapport benoemen wat een automatische toets wel en niet dekt; zo weet u wat er nog handmatig bekeken moet worden.
Wilt u zelf een eerste indruk krijgen, dan is de eenvoudigste test het formulier doorlopen met alleen het toetsenbord en te controleren of elk veld een duidelijke naam krijgt wanneer u erop tabt. Voor een grondiger beeld, inclusief de bestelstap en de inlogflow, helpt de volledige scan die verder kijkt dan de startpagina om te zien waar labels ontbreken of los staan van hun veld.
Wat een overlay-widget hier niet oplost
Een toegankelijkheidswidget die bovenop de site wordt geplakt, kan geen ontbrekende koppeling tussen een label en een veld herstellen; die koppeling zit in de broncode zelf en moet daar ook worden aangepast. Dit is een van de redenen waarom wij geen overlays verkopen: ze verhullen dit soort fouten voor het oog, maar een schermlezer merkt er niets van.
De oplossing zelf is meestal beperkt van omvang: de bouwer koppelt het label aan het veld, vervangt een placeholder-als-label door een echt label, of voegt een onzichtbare tekst toe aan een icoon-knop. Het is geen grote verbouwing, maar wel werk dat gericht moet gebeuren, per formulier en per sjabloon. In de kennisbank met uitleg per onderwerp leest u hoe deze en vergelijkbare fouten zich verhouden tot de eisen uit EN 301 549.
Na de reparatie: vastleggen en bewaken
Een label dat u nu herstelt, kan bij de volgende wijziging van het sjabloon weer verdwijnen, bijvoorbeeld wanneer een ontwerper het formulier restylet zonder de koppeling opnieuw te controleren. Daarom hoort een fix niet alleen technisch opgelost te worden, maar ook opgenomen te worden in het verbeterplan, zodat duidelijk is wie verantwoordelijk is en wanneer het opnieuw gecontroleerd wordt. Hoe wij die controle en herhaling inrichten, staat toegelicht op de pagina over hoe de beoordeling tot stand komt.
Twijfelt u of uw eigen formulieren deze fout bevatten, dan is dat met een paar minuten toetsenbordnavigatie vaak al te zien. Wilt u het gestructureerd en met een geprioriteerde lijst, dan begint dat met de gratis quick-scan, of bekijkt u eerst de veelgestelde vragen over wat een scan wel en niet controleert.