Toegankelijke formulieren: labels, hints en foutmeldingen

Zes succescriteria voor formulieren

WCAG 2.2 is de huidige W3C-aanbeveling voor toegankelijke webinhoud. Voor de teksten van een formulier zijn zes succescriteria het belangrijkst:

• 1.3.1 Info en relaties (niveau A): wat de opmaak laat zien, bijvoorbeeld welk label bij welk veld hoort, is ook in de code of in tekst beschikbaar.
• 1.3.5 Identificeer het doel van de input (niveau AA): velden die om informatie over de gebruiker vragen, zoals naam of e-mail, geven hun doel in de code aan.
• 3.3.1 Foutidentificatie (niveau A): als een invoerfout automatisch wordt opgemerkt, wordt het veld genoemd en de fout in tekst beschreven.
• 3.3.2 Labels of instructies (niveau A): er zijn labels of instructies wanneer de inhoud invoer van de gebruiker vraagt.
• 3.3.3 Foutsuggestie (niveau AA): als een fout wordt opgemerkt en een correctie bekend is, wordt die voorgesteld, tenzij dat de beveiliging of het doel van de inhoud in gevaar brengt.
• 4.1.2 Naam, rol, waarde (niveau A): elk bedieningselement heeft een naam en een rol die software kan lezen.

Elk veld heeft een zichtbaar label nodig

Een label zegt wat er in het veld hoort, en het blijft zichtbaar terwijl de gebruiker typt. Koppel in HTML het label-element aan het veld: het for-attribuut van het label heeft precies dezelfde waarde als de id van het veld. Schermlezers lezen het label dan samen met het veld voor, en een klik op het label zet de cursor in het veld. Een knop krijgt zijn label uit zijn tekst, en 'Bericht versturen' zegt meer dan 'Verzenden'. Labels staan meestal rechts van keuzerondjes en selectievakjes en links van of boven andere velden; labels boven velden nemen minder ruimte in de breedte in.

Een placeholder is geen label

De grijze tekst in een leeg veld lijkt op een label, maar is het niet. Het W3C noemt de problemen:

• Hij verdwijnt zodra iemand typt, dus het is lastiger om de invoer te controleren voor het verzenden.
• Browsers tonen hem vaak in een lichte kleur met te weinig contrast.
• Schermlezers behandelen hem niet als label, en de ondersteuning verschilt.

Gebruik een placeholder hooguit voor een voorbeeld, en zet alles wat belangrijk is in het label of in een hint.

Hints en verplichte velden

• Zet regels in een hint: de datumnotatie, de lengte van een klantnummer, waar een wachtwoord aan moet voldoen. In HTML kun je de hint koppelen met aria-describedby, zodat schermlezers hem na het label voorlezen.
• Zeg welke velden verplicht zijn en welke optioneel. Gebruik je een sterretje, leg het dan één keer uit aan het begin van het formulier.
• Zet instructies voor het hele formulier vóór het formulier, bijvoorbeeld over een tijdslimiet.
• Houd hints kort. Te veel instructies maken een formulier moeilijker, niet makkelijker.

Groepeer velden die bij elkaar horen

Keuzerondjes en selectievakjes die bij elkaar horen, groepeer je met het fieldset-element, en het legend-element geeft de groep een naam, bijvoorbeeld 'Hoe mogen we contact met je opnemen?'. Het W3C zegt dat groepen keuzerondjes altijd zo gegroepeerd moeten worden. Houd de legend kort, want sommige schermlezers lezen hem bij elk veld voor. Groepen helpen ook bij velden met hetzelfde label, zoals de straat in een verzend- en in een factuuradres.

autocomplete: laat de browser helpen

Voor velden die om informatie over de gebruiker vragen, vraagt 1.3.5 dat hun doel in de code te bepalen is. WCAG 2.2 heeft een lijst met deze doelen, gebaseerd op het autofill-onderdeel van de HTML-specificatie, zoals name, given-name, family-name, email, tel, street-address en postal-code. In HTML stel je ze in met het autocomplete-attribuut, bijvoorbeeld autocomplete="email". Browsers kunnen dan opgeslagen waarden invullen, wat typewerk scheelt. Velden die niet over de gebruiker gaan, hebben geen doel nodig.

Foutmeldingen die helpen

Een foutmelding heeft drie taken: het veld noemen, zeggen wat er fout is en zeggen hoe je het oplost. 3.3.1 vraagt de eerste twee, in tekst, dus een rode rand of een icoon alleen is niet genoeg. 3.3.3 vraagt de correctie als die bekend is.

• Toon de melding naast het veld en koppel die met aria-describedby, zodat schermlezers hem samen met het veld voorlezen.
• Toon na het verzenden bovenaan, vóór het formulier, een lijst met alle fouten onder een duidelijke kop. Elk item noemt het veld, het probleem en de oplossing, en linkt naar het veld.
• Pas ook de paginatitel aan, bijvoorbeeld '2 fouten – Contactformulier', en zet de focus op het eerste veld met een fout.
• Bewaar wat de gebruiker al heeft ingevuld. Dit is ons advies, geen WCAG-regel: na één fout alles opnieuw moeten typen, laat mensen afhaken.

Controleer je formulier met Do4U

De tool Formulierteksten controleert de teksten van een webformulier. Je plakt de HTML van het formulier of geeft het adres van de pagina op, en je kunt de foutmeldingen toevoegen die je formulier toont. De code leest elk veld: het label en waar het label vandaan komt, hints, placeholders, verplichte velden, autocomplete-waarden en groepen keuzerondjes of selectievakjes. Hij vindt problemen zoals een veld zonder label, een placeholder als enig label, verplichte velden die de tekst niet noemt, ontbrekende autocomplete-waarden en vage foutmeldingen, elk met het bijbehorende succescriterium. De AI stelt een duidelijk label voor, een korte hint en een foutmelding die het veld noemt en zegt hoe je de invoer verbetert. De code controleert elke suggestie en maakt van je formulier een verbeterd HTML-concept.

Do4U vindt hints en maakt een concept, jij controleert en beslist. De tool controleert de opmaakcode, niet je stijlen, scripts of de bediening met het toetsenbord, en zegt niet of je formulier toegankelijk is. Test het verbeterde formulier met een toetsenbord en een schermlezer.