import { VideoPlayer } from “@site/src/components/VideoPlayer”;
Gebruik alleen tekst in descriptions
Het HTML-attribuut aria-describedby, waarmee je een description toevoegt, mag alleen ‘platte tekst’ bevatten. Platte tekst staat voor tekst zonder verdere opmaak en heeft geen extra HTML voor opmaak of betekenis.
Opgemaakte tekst noemen we ‘rich text’. Screenreaders geven deze informatie niet goed door of slaan het zelfs helemaal over in een description.
Let op: NL Design System adviseert ook geen tooltip te gebruiken voor het verbergen van essentiële informatie. Zie de discussie over Toggletip op GitHub.
Demo video
In de demo-video kun je zien en/of horen dat VoiceOver de opsomming uit de description overslaat als een formulierveld de toetsenbordfocus krijgt. NVDA in Firefox doet hetzelfde.
Description-beslisboom
Wat zijn de opties om informatie en uitleg toe te voegen aan een formulier en de invoervelden? Volg de beslisboom.
Vraag 1: Gaat de informatie over alle formuliervelden?
- Ja: Plaats de informatie vlak boven het formulier en onder het bijbehorende kopje. Je kunt hierbij rich text gebruiken.
- Nee: Ga naar vraag 2.
Vraag 2: Gaat de informatie over een enkel veld of een groep velden, gegroepeerd in een fieldset?
- Een enkel veld: Ga naar vraag 3a.
- Een groep velden: Ga naar vraag 4a.
Vraag 3a: Is de informatie bij het formulierveld platte tekst?
- Ja: Plaats de informatie in een description.
- Nee: Ga naar vraag 3b.
Vraag 3b: Is het noodzakelijk dat de informatie bij het formulierveld rich text bevat?
- Ja: Overweeg een meerstappenformulier, waarbij de informatie vlak boven het formulier en onder het bijbehorende kopje van de betreffende stap staat.
- Nee: Herschrijf de tekst van de description, zodat deze alleen platte tekst bevat.
Vraag 4a: Is de informatie bij de gegroepeerde velden platte tekst?
- Ja: Plaats de informatie in een description gekoppelt aan de
<fieldset>. - Nee: Ga naar vraag 4b.
Vraag 4b: Is het noodzakelijk dat de informatie bij de gegroepeerde velden rich text bevat?
- Ja: Overweeg een meerstappenformulier, waarbij de informatie vlak boven het formulier van de betreffende stap staat.
- Nee: Herschrijf de tekst van de description, zodat deze toch alleen platte tekst bevat. Dan ben je er zeker van dat àlle gebruikers de informatie kunnen lezen.
Voorbeelden
Niet doen
Een opsomming in een description.
Doen
Alleen tekst in een description.
Doen
Zet informatie in rich tekst boven het formulier en onder het bijbehorende kopje.
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina’s op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
- Succescriterium 1.3.1 Info en relaties
- Succescriterium 1.3.2 Betekenisvolle volgorde
- Succescriterium 2.4.3 Focus volgorde
- Succescriterium 2.4.6 Koppen en labels
- Succescriterium 3.3.2 Labels of instructies
Over deze richtlijnen
Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.