Naar de inhoud
TODO: PageHeader

Inhoudsopgave

import { Canvas } from “@site/src/components/Canvas/Canvas”; import { Guideline } from “@site/src/components/Guideline”; import FooterInfo from “@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md”;

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.

{() => ( <>

- Dit is geen lijst
- Dit is geen lijst
- Dit is geen lijst
- Dit is geen lijst

      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

{() => ( <>

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

  1. Snijd de tomaten in stukjes.
  2. Verdeel de rucola over een bord, en voeg ook de tomaten toe.
  3. Leg de bol burrata in het midden van de salade.
  4. Verdeel wat peper, olijfolie en crema di balsamico over de salade.
  5. Maak af met een schepje pesto en wat verse basilicum.
)}

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.