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.

Bekijk de acceptatiecriteria voor de Icon component.

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:

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

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

Componenten en elementen die niet interactief zijn, zijn niet bereikbaar en bedienbaar met het toetsenbord.

Een uitzondering geldt voor situaties waarbij een interactief element zoals een Skip Link of een Link in een Side Navigation, de bezoeker direct naar de component of het element stuurt.

NL Design System richtlijnen:

• Toetsenbordtoegankelijkheid

Componenten en elementen die niet interactief zijn, komen niet voor in de normale toetsenbord-focusvolgorde van de pagina.

Een uitzondering geldt voor situaties waarbij een interactief component een Skip Link of een Link in een Side Navigation, de bezoeker direct naar de component of het element stuurt.

NL Design System richtlijnen:

• Toetsenbordtoegankelijkheid

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. Zorg ervoor dat deze informatie ook meteen beschikbaar is voor bezoekers die een screenreader gebruiken.

Dit kun je op verschillende manieren doen:

• Door de focus naar het formulierveld met een foutmelding te verplaatsen. Als de Form Field Error Message gekoppeld is aan het formulierveld met aria-describedby wordt de melding nu voorgelezen. Dit werkt alleen goed als er maar één foutmelding is. Foutmeldingen bij andere velden worden niet voorgelezen.
• Door een samenvattende foutmelding met de rol alert boven het formulier te plaatsen. De rol alert zorgt ervoor dat een screenreader de informatie meteen voorleest. De foutmeldingen bij de velden hoeven nu niet voorgelezen te worden, want de bezoeker heeft de belangrijke informatie uit de samenvattende foutmelding al.
• Door de Form Field Error Message zelf de rol alert te geven. Als er meerdere Form Field Error Messages zijn, worden ze allemaal op volgorde voorgelezen.

Kies de methode die het best bij het formulier past.

NL Design System richtlijnen:

• Toegankelijke foutmeldingen bij formuliervelden
• Toegankelijke formulieren

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

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

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

Niet-interactieve componenten en elementen zijn standaard niet bereikbaar en bedienbaar met het toetsenbord.

NL Design System richtlijnen:

• Toetsenbordtoegankelijkheid

Niet-interactieve componenten en elementen komen standaard niet voor in de toetsenbord-focusvolgorde van de pagina.

NL Design System richtlijnen:

• Toetsenbordtoegankelijkheid

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