Het parent HTML element van de Unordered en Ordered List mag alleen list-items bevatten:

<ul>
  <li>List-item voorbeeld</li>
  <li>List-item voorbeeld</li>
  <li>List-item voorbeeld</li>
  <li>List-item voorbeeld</li>
</ul>

Dit geldt ook voor geneste Unordered en Ordered Lists:

<ul>
  <li>List-item voorbeeld</li>
  <li>
    List-item voorbeeld
    <ul>
      <li>Genest list-item voorbeeld</li>
      <li>Genest list-item voorbeeld</li>
    </ul>
  </li>
  <li>List-item voorbeeld</li>
  <li>List-item voorbeeld</li>
</ul>

NL Design System richtlijnen:

• Toegankelijke opsommingen

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.

Dit doe je op het parent-element wanneer de hele inhoud in een andere taal is geschreven, of op het child-element waarvan de inhoud in een andere taal is geschreven.

Als de hele Ordered List in een andere taal is geschreven:

<ol lang="en">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Als alleen de inhoud van één van de items in een andere taal is geschreven:

<ol>
  <li>Eerste item</li>
  <li lang="en">Second item</li>
  <li>Derde item</li>
</ol>

Of:

<ol>
  <li>Eerste item</li>
  <li><p lang="en">Second item</p></li>
  <li>Derde item</li>
</ol>

NL Design System richtlijnen:

• De juiste taal instellen

De Ordered List is herkenbaar voor hulpsoftware als geordende lijst omdat de component is opgemaakt met ol en li elementen. In de browser Safari (NL Design System baseline mei 2026) verdwijnt de semantiek van de lijst zodra in CSS list-style: none wordt gebruikt. Daarom is de ARIA rol list toegevoegd.

<ol role="list">
  <li>List-item voorbeeld</li>
  <li>List-item voorbeeld</li>
  <li>List-item voorbeeld</li>
  <li>List-item voorbeeld</li>
</ol>

NL Design System richtlijnen:

• Toegankelijke opsommingen

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 overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

NL Design System richtlijnen:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn

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 overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :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