Verplichte velden aangeven zonder alleen een sterretje

Wat betekent een sterretje achter een woord? In een contract verwijst het naar de kleine lettertjes. In een advertentie betekent het “voorwaarden van toepassing”. In een formulier betekent het, volgens afspraak, “verplicht”. Maar die afspraak kent niet iedereen, een klein rood sterretje is niet voor iedereen goed te zien, en een screenreader leest het voor als “ster” of slaat het over. Verplichte velden in een formulier aangeven lijkt een detail. Toch is het een van de eerste dingen die bepalen of iemand het formulier in één keer goed invult.

Wat er mis kan gaan met het sterretje

• Niet iedereen kent de betekenis. Wie weinig formulieren invult of de conventie niet kent, raadt maar wat.
• Klein en licht. Een sterretje in een klein lettertype en lichtrood is voor slechtziende bezoekers makkelijk te missen.
• Alleen kleur. Soms is er geen sterretje en is alleen het label rood. Dan is de informatie alleen via kleur beschikbaar.
• Screenreaders. Afhankelijk van de instellingen wordt het sterretje voorgelezen als “ster”, “asterisk”, of helemaal niet.
• Geen uitleg. Nergens op de pagina staat wat het sterretje betekent.

Wat WCAG vraagt

WCAG noemt het sterretje niet, maar een paar criteria zijn van toepassing:

• 3.3.2 Labels of instructies (A): als invoer wordt gevraagd, zijn er labels of instructies. Dat een veld verplicht is, hoort bij die instructies.
• 1.3.1 Info en relaties (A): wat zichtbaar is, moet ook in de code vastliggen. Is een veld zichtbaar verplicht, dan moet hulpsoftware dat ook kunnen weten.
• 1.4.1 Gebruik van kleur (A): verplicht mag niet alleen met kleur worden aangegeven.

Het sterretje zelf is dus geen probleem. Het moet alleen uitgelegd worden en ondersteund door de code.

Drie goede manieren om verplichte velden aan te geven

1. Het sterretje, met uitleg

Wilt u het vertrouwde sterretje houden, zet dan bovenaan het formulier, vóór het eerste veld, een korte uitleg: “Velden met een * zijn verplicht.” Zorg dat het sterretje groot genoeg is en voldoende contrast heeft.

2. Het woord “verplicht”

Nog duidelijker is het woord zelf in het label: “E-mailadres (verplicht)”. Geen uitleg nodig, geen symbool dat iemand moet kennen.

3. Optionele velden markeren

In veel formulieren zijn de meeste velden verplicht. Dan is het overzichtelijker om juist de uitzonderingen te markeren: “Bedrijfsnaam (optioneel)”. Zet bovenaan dat alle velden verplicht zijn, tenzij anders vermeld. Dit werkt vooral goed bij korte formulieren, en het helpt u om kritisch te kijken: is dat optionele veld eigenlijk nodig?

Kies één aanpak en gebruik die consequent op de hele site.

In de code: required en aria-required

Wat zichtbaar is, moet ook in de code staan. Gebruik het html-attribuut required:

<label for="naam">
  Naam <span aria-hidden="true">*</span>
</label>
<input id="naam" name="naam" type="text" required autocomplete="name">

Wat hier gebeurt:

• required vertelt de browser en hulpsoftware dat het veld verplicht is. Een screenreader zegt dan bijvoorbeeld “Naam, verplicht, invoerveld”.
• Het sterretje is met aria-hidden="true" verborgen voor screenreaders, zodat het niet als “ster” wordt voorgelezen. De informatie komt al uit het required-attribuut.

Er is ook aria-required="true". Dat geeft dezelfde informatie aan hulpsoftware, maar zonder de ingebouwde browsercontrole. Gebruik het als u die controle niet wilt, of bij zelfgebouwde onderdelen die geen gewoon invoerveld zijn.

De browsercontrole: handig of niet?

Met required laat de browser een eigen melding zien als iemand het veld leeg laat. Die melding is redelijk toegankelijk, maar verdwijnt na een paar seconden, ziet er per browser anders uit en is niet aan te passen in uw eigen woorden. Veel sites zetten de browsercontrole daarom uit met novalidate op het formulier en tonen een eigen foutmelding. Dat mag, mits die eigen melding goed is. Hoe dat werkt, leest u in foutmeldingen die mensen echt helpen.

Groepen: keuzerondjes en vinkjes

Bij een groep keuzerondjes (“Hoe wilt u benaderd worden?”) of een verplicht vinkje voor de voorwaarden zit de aanduiding bij de vraag, niet bij elk rondje. Gebruik een fieldset met een legend:

<fieldset>
  <legend>Hoe wilt u benaderd worden? (verplicht)</legend>
  <input type="radio" id="tel" name="contact" value="tel" required>
  <label for="tel">Telefonisch</label>
  <input type="radio" id="mail" name="contact" value="mail">
  <label for="mail">Per e-mail</label>
</fieldset>

Formulierplugins en de praktijk

Contact Form 7, Gravity Forms, WPForms en de meeste andere plugins hebben per veld een optie “verplicht”. Die zet meestal het required– of aria-required-attribuut en een sterretje. Wat u zelf controleert:

1. Staat er bovenaan het formulier wat het sterretje betekent? Zo niet, voeg een zin toe in de omschrijving van het formulier.
2. Heeft het sterretje voldoende contrast en grootte? Pas dat aan in de CSS als het nodig is.
3. Wordt “verplicht” voorgelezen? Test met VoiceOver of NVDA, of kijk in de toegankelijkheidsweergave van de ontwikkelaarstools bij “Required”.
4. Wordt het sterretje als “ster” voorgelezen? Dan is het niet verborgen voor screenreaders. Sommige plugins hebben daar een instelling voor; anders is het een kleine aanpassing.

Let ook op dat de aanduiding in het label staat en niet in een placeholder. Een “Naam*” als grijze tekst in het veld verdwijnt zodra iemand typt; waarom dat een probleem is, leest u in waarom een placeholder geen label is.

Minder velden, minder verplichtingen

De beste manier om verplichte velden duidelijk te maken, is er minder te hebben. Vraag alleen wat u echt nodig heeft om de bezoeker te helpen. Elk verplicht veld is een drempel, voor iedereen, en voor mensen met een beperking een grotere. Een telefoonnummer dat u nooit belt of een bedrijfsnaam die er niet toe doet, kan weg of optioneel worden.

Meer over wat een formulier van begin tot eind bruikbaar maakt, vindt u op toegankelijke formulieren. Het bredere overzicht van toegankelijkheid op uw site staat op uw website toegankelijk laten maken.