Zorg ervoor dat de tekst in de Form Field Error Message duidelijk genoeg is om de foutmelding te begrijpen. Het is dan niet nodig om informatieve icons te gebruiken die een alternatieve tekst nodig hebben voor bezoekers die het scherm niet kunnen zien.

Je kunt wel decoratieve icons gebruiken in de Form Field Error Message. Een icon is decoratief als er een beschrijvende tekst boven, naast of onder staat.

Het is daarom niet nodig dat gebruikers die hulpsoftware gebruiken, zoals een screenreader, weten dat er een icon aanwezig is. Verberg decoratieve icons, bijvoorbeeld met aria-hidden="true" op de component.

Let op: VoiceOver in combinatie met Safari (in de NL Design System Baseline van juli 2025) negeert Unicode-emoji’s met aria-hidden="true" wél in voorleesmodus, maar niet wanneer de bezoeker alleen met de pijltoetsen (virtuele cursor) navigeert. Dit is een bug in WebKit. Gebruik daarom liever SVG icons.

NL Design System richtlijnen:

• Toegankelijke foutmeldingen bij formuliervelden
• Toegankelijke formulieren
• Decoratieve afbeeldingen
• Richtlijnen voor iconen

Koppel de Form Field Error Message met aria-describedby aan het bijbehorende element voor formulierinvoer:

<label for="name">Naam</label>
<p id="error-name">Het veld 'Naam' is een verplicht veld.</p>
<p id="description-name">Vul je voor- en achternaam in.</p>
<input id="name" aria-describedby="error-name description-name" autocomplete="name" type="text" />

NL Design System richtlijnen:

• Toegankelijke foutmeldingen bij formuliervelden
• Toegankelijke formulieren

Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.

Zorg ervoor dat de component meegroeit met de tekst. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem.

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

NL Design System richtlijnen:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn

Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.

Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.

NL Design System richtlijnen:

• De juiste taal instellen

Een foutmelding vertelt de bezoeker dat er iets fout is gegaan. Als het element voor formulierinvoer met een foutmelding geen toetsenbordfocus krijgt, zorg er dan voor dat gebruikers die de melding niet zien, deze informatie toch meteen meekrijgen.

Dit kun je op verschillende manieren doen:

• Door een samenvattende foutmelding met de rol alert boven het formulier te plaatsen.
• Door de Form Field Error Message zelf de rol alert te geven.

De rol alert zorgt ervoor dat een screenreader de informatie meteen voorleest. Gebruik de Form Field Error Message daarom ook niet om tijdens het invullen van een formulierveld statusupdates te geven, bijvoorbeeld over hoeveel tekens er nog over zijn. Dit is voor een screenreadergebruiker erg storend.

De Form Field Error Message kan met aria-describedby aan het bijbehorende element voor formulierinvoer worden gekoppeld.

<label for="name">Naam</label>
<p id="error-name">Het veld 'Naam' is een verplicht veld.</p>
<p id="description-name">Vul je voor- en achternaam in.</p>
<input id="name" aria-describedby="error-name description-name" autocomplete="name" type="text" />

NL Design System richtlijnen:

• Toegankelijke foutmeldingen bij formuliervelden
• Toegankelijke formulieren

Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea’s, letterafstand en ruimte tussen woorden. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

Zorg ervoor dat de component mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

Je moet de afstand kunnen vergroten naar deze waardes:

• Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte.
• Afstand tussen alinea’s naar ten minste 2 keer de lettergrootte.
• Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte.
• Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

Dit is te testen met een extensie zoals Stylus of User CSS, een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:

<style>
body * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
body p {
    margin-bottom: 2em !important;
}
</style>

NL Design System richtlijnen:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn
• Zorg voor een comfortabele regelafstand

Het is mogelijk om de Form Field Error Message de rol alert te geven, zodat een screenreader de foutmelding direct voorleest.