Opsommingen
Met een opsomming maak je informatie overzichtelijk. Dat is handig voor iedereen die snel wil scannen, maar ook belangrijk voor mensen die gebruikmaken van een screenreader of een vergroot scherm.
Alleen: niet elke lijst is automatisch toegankelijk. Dat hangt af van de manier waarop je de opsomming opmaakt. Een visuele lijst met streepjes of icoontjes wordt niet altijd herkend door hulptechnologie. Ook het type lijst, genummerd of ongenummerd, moet passen bij de inhoud.
Op deze pagina lees je hoe je opsommingen toegankelijk maakt en welke opmaak je het beste kunt gebruiken.
Lijst-elementen
Stel een lijst in als lijst-element via de contenteditor in je contentmanagementsysteem (CMS). Zo krijgt de lijst de juiste opmaak en de juiste HTML-elementen mee. De meeste CMS-en bieden hier een aparte optie voor aan. Maak niet zelf een lijst door het gebruik van bijvoorbeeld leestekens. Hulpsoftware herkent deze opmaak namelijk niet als een lijst.
Niet doen
Zelf sterretjes, streepjes of nummers typen om een lijst te maken.
- Dit is geen lijst
- Dit is geen lijst
- Dit is geen lijst
- Dit is geen lijst
1. Dit is óók geen lijst
2. Dit is óók geen lijst
3. Dit is óók geen lijst
4. Dit is óók geen lijst
<p>- Dit is geen lijst<br/>- Dit is geen lijst<br/>- Dit is geen lijst<br/>- Dit is geen lijst<br/><br/>1. Dit is óók geen lijst<br/>2. Dit is óók geen lijst<br/>3. Dit is óók geen lijst<br/>4. Dit is óók geen lijst<br/><br/></p>
Genummerde en ongenummerde lijsten
Doen
Gebruik een genummerde lijst wanneer de nummering de bezoeker helpt met het verwerken van de informatie of als de items in een vaste volgorde staan. Bijvoorbeeld bij een stappenplan. Gebruik anders een ongenummerde lijst met opsommingstekens.
Burrata salade
Een lekkere salade met burrata en tomaten.
Ingrediënten
- 250 gr (snoep)tomaten
- 1 bol burrata
- verse basilicum
- 1 el pesto
- scheutje olijfolie
- handje rucola
- crema di balsamico
- zwarte peper
Bereiding
- Snijd de tomaten in stukjes.
- Verdeel de rucola over een bord, en voeg ook de tomaten toe.
- Leg de bol burrata in het midden van de salade.
- Verdeel wat peper, olijfolie en crema di balsamico over de salade.
- Maak af met een schepje pesto en wat verse basilicum.
<h2 class="utrecht-heading-2">Burrata salade</h2><p>Een lekkere salade met burrata en tomaten.</p><h3 class="utrecht-heading-3">Ingrediënten</h3><ul role="list" class="utrecht-unordered-list utrecht-unordered-list--html-content"><li>250 gr (snoep)tomaten</li><li>1 bol burrata</li><li>verse basilicum</li><li>1 el pesto</li><li>scheutje olijfolie</li><li>handje rucola</li><li>crema di balsamico</li><li>zwarte peper</li></ul><h3 class="utrecht-heading-3">Bereiding</h3><ol class="utrecht-ordered-list utrecht-ordered-list--html-content"><li>Snijd de tomaten in stukjes.</li><li>Verdeel de rucola over een bord, en voeg ook de tomaten toe.</li><li>Leg de bol burrata in het midden van de salade.</li><li>Verdeel wat peper, olijfolie en crema di balsamico over de salade.</li><li>Maak af met een schepje pesto en wat verse basilicum.</li></ol>
Hoe te testen
Lees de pagina door en controleer alle opsommingen. Gebruik de onderstaande stappen als checklist:
- Bekijk of de tekst is opgemaakt via de opsomknoppen in je CMS, en niet met zelfgetypte streepjes of andere tekens want die worden niet als lijst herkend door hulptechnologie.
- Controleer of je een genummerde of ongenummerde lijst hebt gekozen die past bij de inhoud. Gebruik een genummerde lijst als de volgorde belangrijk is (zoals bij stappen). Gebruik een ongenummerde lijst als de volgorde geen rol speelt.
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.
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.