Digitaal toegankelijke opsommingen maken

Wanneer gebruik je een ul of een ol?

De keuze tussen <ul> en <ol> gaat niet over styling, maar over betekenis. De naam van de lijst vertelt direct meer over de toepassing. Een <ul> is een unordered list, een <ol> een ordered list.

• Gebruik <ul> als de volgorde niet belangrijk is. Bijvoorbeeld: kenmerken, voordelen, opsomming van onderdelen.
• Gebruik <ol> als de volgorde wél belangrijk is. Bijvoorbeeld: stappen in een proces, instructies, ranking.

Voorbeeld: een toegankelijke ul

Een <ul> bestaat altijd uit lijstitems met <li>. Gebruik geen losse alinea’s of breaks om “nep bullets” te maken.

• Alt-tekst beschrijft de functie of betekenis van een afbeelding.
• Koppen geven structuur aan je pagina.
• Links hebben een duidelijk linkdoel.

<ul>
  <li>Alt-tekst beschrijft de functie of betekenis van een afbeelding.</li>
  <li>Koppen geven structuur aan je pagina.</li>
  <li>Links hebben een duidelijk linkdoel.</li>
</ul>

Voorbeeld: een toegankelijke ol

Een <ol> gebruik je bij een reeks stappen. Dat helpt ook bij vertaling naar spraak: een schermlezer kondigt de lijst aan en leest items per stap.

1. Controleer de tekstkleur en achtergrondkleur.
2. Meet het contrast met een contrastchecker.
3. Pas de kleuren aan tot je aan de minimumeis voldoet.

<ol>
  <li>Controleer de tekstkleur en achtergrondkleur.</li>
  <li>Meet het contrast met een contrastchecker.</li>
  <li>Pas de kleuren aan tot je aan de minimumeis voldoet.</li>
</ol>

Opsommingen met sub-items (geneste lijsten)

Soms heb je een opsomming met subpunten. Ook dat kan prima toegankelijk, zolang je de sublijst binnen hetzelfde <li> plaatst.

• Contentchecks
  • Kopstructuur
  • Linkteksten
  • Alternatieve teksten
• Technische checks
  • Toetsenbordbediening
  • Focusvolgorde
  • Naam, rol en waarde

<ul>
  <li>
    Contentchecks
    <ul>
      <li>Kopstructuur</li>
      <li>Linkteksten</li>
      <li>Alternatieve teksten</li>
    </ul>
  </li>
  <li>
    Technische checks
    <ul>
      <li>Toetsenbordbediening</li>
      <li>Focusvolgorde</li>
      <li>Naam, rol en waarde</li>
    </ul>
  </li>
</ul>

Wat gaat er vaak fout?

1) Nep-opsommingen met streepjes of bolletjes

Een veelgemaakte fout is een opsomming bouwen met losse <p>-tags en een streepje of bullet als tekst. Visueel lijkt het een lijst, maar semantisch is het geen lijst. Een schermlezer kondigt dan niet aan hoeveel items er zijn en de structuur gaat verloren.

Dit gebeurt vaak wanneer tekst uit een ander bestand direct wordt gekopieerd en geplakt, zoals uit Word.

• Alt-tekst toevoegen
• Koppen logisch gebruiken
• Linkteksten verduidelijken

<!-- FOUT: dit is geen echte lijst -->
<p>• Alt-tekst toevoegen</p>
<p>• Koppen logisch gebruiken</p>
<p>• Linkteksten verduidelijken</p>

2) Lijstitems zonder li

In HTML mag een <ul> of <ol> alleen directe <li>-elementen bevatten. Als je er andere tags direct in zet,
raken browsers en hulpmiddelen de lijststructuur kwijt.

<!-- FOUT: p mag niet direct in ul -->
<ul>
  <p>Item 1</p>
  <p>Item 2</p>
</ul>

3) Geneste lijst buiten het li plaatsen

Een sublijst moet onderdeel zijn van het lijstitem waar het bij hoort. Als je de sublijst er los onder zet, verlies je de relatie tussen hoofditem en subitems.

<!-- FOUT: de sublijst hoort binnen het li -->
<ul>
  <li>Contentchecks</li>
  <ul>
    <li>Kopstructuur</li>
    <li>Linkteksten</li>
  </ul>
</ul>

4) Te veel opmaak in lijsten

Een lijstitem mag meerdere alinea’s, links of zelfs een kleine substructuur bevatten, maar houd het overzichtelijk. Als een lijstitem een halve pagina wordt, is het vaak beter om koppen met losse secties te gebruiken.

Checklist

• Kies <ul> als de volgorde niet belangrijk is, en <ol> als die wel belangrijk is.
• Gebruik altijd <li> als directe kinderen van <ul> en <ol>.
• Maak geen “nep-lijsten” met bullets of streepjes in losse alinea’s.
• Plaats sublijsten binnen het bijbehorende <li>.
• Test met een schermlezer: wordt de lijst aangekondigd met het aantal items?