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: het 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.
- Minimaal 9 karakters.
- Een hoofdletter.
- Een cijfer.
<label for="wachtwoord">Nieuw wachtwoord</label><div id="description-wachtwoord">Je wachtwoord moet de volgende elementen bevatten:<ul role="list" class="utrecht-unordered-list utrecht-unordered-list--html-content"><li>Minimaal 9 karakters.</li><li>Een hoofdletter.</li><li>Een cijfer.</li></ul></div><input id="wachtwoord" type="password" name="nieuw-wachtwoord" autocomplete="new-password" aria-describedby="description-wachtwoord"/>
Doen
Alleen tekst in een description.
Je wachtwoord moet de volgende elementen bevatten: minimaal 9 karakters, een hoofdletter en een cijfer.
<label for="wachtwoord">Nieuw wachtwoord</label><p id="description-wachtwoord">Je wachtwoord moet de volgende elementen bevatten: minimaal 9 karakters, een hoofdletter en een cijfer.</p><input id="wachtwoord" type="password" name="nieuw-wachtwoord" autocomplete="new-password" aria-describedby="description-wachtwoord"/>
Doen
Zet informatie in rich tekst boven het formulier en onder het bijbehorende kopje.
Open een spaarrekening
Om een spaarrekening te openen hebben we de volgende gegevens nodig:
- Het nummer van je paspoort of identiteitskaart.
- Je Burgerservicenummer (BSN), dit kun je vinden op je paspoort of identiteitskaart.
- Je adresgegevens.
- Je e-mailadres.
<h3 class="utrecht-heading-3">Open een spaarrekening</h3><p>Om een spaarrekening te openen hebben we de volgende gegevens nodig:</p><ul role="list" class="utrecht-unordered-list utrecht-unordered-list--html-content"><li>Het nummer van je paspoort of identiteitskaart.</li><li>Je Burgerservicenummer (BSN), dit kun je vinden op je paspoort of identiteitskaart.</li><li>Je adresgegevens.</li><li>Je e-mailadres.</li></ul><form>[het formulier]</form>
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het 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.