Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung →
Barrierefreiheit
Hoe toont een website formulierfouten correct?
Een website toont formulierfouten correct door het betrokken veld te noemen en de fout in woorden te beschrijven: 'Voer alstublieft uw e-mailadres in.' Een rode rand alleen volstaat niet — blinde bezoekers zien het niet, kleurenblinde bezoekers missen het. WCAG-criterium 3.3.1 vereist dat gedetecteerde invoerfouten automatisch worden opgespoord en in tekstform aan de bezoeker wordt meegedeeld.
Een rode rand alleen laat bezoekers gissen
Stel je voor dat uw contactformulier terugkomt met het bericht 'Controleer alstublieft uw invoer' — meer staat er niet. Een zienende bezoeker zoekt nu naar rode randen. Een blinde bezoeker heeft deze kans ook niet: zijn schermleezer leest teksten voor, geen kleuren. Hij gaat veld voor veld opnieuw langs en raadt waar het probleem zit. Velen geven op dit punt op — en u verliest een aanvraag of bestelling. Een goed foutbericht noemt drie dingen: welk veld betrokken is, wat eraan fout is en in het beste geval hoe het correct eruit ziet. Bovendien moet het bericht technisch aan het veld gekoppeld zijn, zodat schermlezers het bij het veld zelf aankondig.
Zo meet de controledienst foutherkenning
De controledienst test uw formulier in een echte browser met een gecontroleerde poging: hij zoekt een formulier met verplichte velden en verzendt het opzettelijk leeg. Dan observeert hij de reactie. Worden de verplichte velden als foutief gemarkeerd en is de foutbeschrijving technisch aan de velden gekoppeld, dan wordt het criterium als bestaan beschouwd — het rapport noemt hoeveel velden correct benoemd zijn. Pure zoekbalken en formulieren zonder verplichte velden laat de meting opzettelijk achterwege, om op uw website niets ongewensts uit te lokken; zulke gevallen wijst het rapport openlijk als handmatige testcase aan. Bij de gouden standaard controleert een persoon bovendien of de foutteksten verständig geformuleerd zijn.
Beispiele
Fehler ohne Ort und Text
<p class="rot">Bitte Eingaben prüfen.</p>
<input name="iban"><label for="iban">IBAN</label>
<input id="iban" name="iban" aria-invalid="true" aria-describedby="iban-fehler">
<p id="iban-fehler">IBAN: 20 Zeichen erwartet, 18 eingegeben.</p>Die Meldung nennt das Feld und den Fehler und ist mit dem Feld verbunden, damit das Vorleseprogramm sie beim Feld ansagt.
- Verzend uw contactformulier eens opzettelijk leeg en lees het foutbericht met de ogen van een vreemde.
- Formuleer elk foutbericht volgens het patroon: veldnaam, probleem, oplossing — 'E-mailadres: voer alstublieft een adres met @-teken in.'
- Vraag uw bureau foutmeldingen technisch aan het betreffende veld te koppelen, zodat schermlezers ze aankondigen.
- Vertrouw nooit alleen op kleur — elke rode rand heeft een verklarende tekst ernaast nodig.