Een icon is decoratief als er een beschrijvende tekst boven, naast of onder staat. Een icon is ook decoratief als het onderdeel is van een interactief component met een eigen toegankelijke naam, zoals een button of een link.

Het is daarom niet nodig dat gebruikers die hulpsoftware gebruiken, zoals een screenreader, weten dat er een icon aanwezig is. Verberg decoratieve icons, bijvoorbeeld met aria-hidden="true" op de component.

Let op: VoiceOver in combinatie met Safari (in de NL Design System Baseline van juli 2025) negeert Unicode-emoji’s met aria-hidden="true" wél in voorleesmodus, maar niet wanneer de bezoeker alleen met de pijltoetsen (virtuele cursor) navigeert. Dit is een bug in WebKit. Gebruik daarom liever SVG icons.

NL Design System richtlijnen:

• Decoratieve afbeeldingen
• Richtlijnen voor iconen

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 zij-navigatie, 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 zij-navigatie, 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.

Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.

NL Design System richtlijnen:

• De juiste taal instellen

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

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

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 word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (: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 word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (: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