Lijsten

Waarom lijsten belangrijk zijn

Wanneer je drie productvoordelen, een reeks stappen of een navigatiemenu hebt, is dat een lijst. Visueel herken je dat aan bullets, nummers of een verticale reeks links. Maar een schermlezer kan dat alleen herkennen als de HTML een lijstelement gebruikt.

Een schermlezer zegt bij een <ul> met vijf items: “lijst met 5 items”. De gebruiker weet meteen hoeveel items er zijn en kan de hele lijst in een keer overslaan. Bij losse <div>’s of <p>’s met streepjes krijgt de gebruiker die informatie niet. Elk item wordt als losse tekst voorgelezen, zonder context.

Drie soorten lijsten

HTML kent drie lijstelementen, elk met een eigen doel:

Ongeordende lijst (<ul>)

Voor opsommingen waarbij de volgorde er niet toe doet.

<ul>
  <li>Audit op maat</li>
  <li>Heldere rapportage</li>
  <li>Persoonlijke nabespreking</li>
</ul>

Een schermlezer zegt: “lijst met 3 items”, gevolgd door “bullet, Audit op maat”, enzovoort.

Geordende lijst (<ol>)

Voor reeksen waarbij de volgorde wel uitmaakt: stappen, ranglijsten, instructies.

<ol>
  <li>Vul het aanvraagformulier in</li>
  <li>Ontvang een offerte binnen 2 werkdagen</li>
  <li>Wij starten de audit na akkoord</li>
</ol>

Een schermlezer zegt: “lijst met 3 items”, gevolgd door “1, Vul het aanvraagformulier in”, enzovoort.

Beschrijvingslijst (<dl>)

Voor termen met bijbehorende beschrijvingen: glossaria, metadata, specificaties.

<dl>
  <dt>WCAG</dt>
  <dd>Web Content Accessibility Guidelines — de internationale richtlijnen voor webtoegankelijkheid.</dd>

  <dt>Schermlezer</dt>
  <dd>Software die de inhoud van het scherm voorleest, zoals NVDA, JAWS of VoiceOver.</dd>
</dl>

Een schermlezer zegt bij <dt>: “term, WCAG”, en bij <dd>: “beschrijving, Web Content Accessibility Guidelines…”.

Lijsten fout: divs met streepjes

Dit is een van de meest voorkomende fouten bij SC 1.3.1. De content ziet er visueel uit als een lijst, maar de HTML zegt iets anders.

<div>- Gratis parkeren</div>
<div>- Rolstoeltoegankelijk</div>
<div>- Blindengeleidehonden welkom</div>

<ul>
  <li>Gratis parkeren</li>
  <li>Rolstoeltoegankelijk</li>
  <li>Blindengeleidehonden welkom</li>
</ul>

Navigatie als lijst

Een navigatiemenu is een lijst met links. Het is een veelgebruikt en goed ondersteund patroon om menulinks in een <ul> te plaatsen binnen een <nav>:

<nav aria-label="Hoofdnavigatie">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/diensten">Diensten</a></li>
    <li><a href="/over-ons">Over ons</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

De schermlezer vertelt de gebruiker dat er een navigatie is met een lijst van 4 links. Dat geeft context: de gebruiker weet hoe groot het menu is en kan het in zijn geheel overslaan.

Geneste lijsten

Lijsten kunnen genest worden. Dat is nuttig voor submenu’s of gecategoriseerde opsommingen. De geneste lijst staat altijd binnen een <li>:

<ul>
  <li>Fruit</li>
  <ul>
    <li>Appel</li>
    <li>Peer</li>
  </ul>
  <li>Groente</li>
</ul>

<ul>
  <li>Fruit
    <ul>
      <li>Appel</li>
      <li>Peer</li>
    </ul>
  </li>
  <li>Groente</li>
</ul>

CSS en lijstsemantiek

Een veelvoorkomende CSS-regel is list-style: none om bullets te verwijderen. In de meeste browsers heeft dat geen gevolgen voor de semantiek. Maar in Safari met VoiceOver wordt een <ul> met list-style: none niet meer als lijst herkend.

De oplossing is eenvoudig: voeg role="list" toe aan de <ul>:

<ul role="list" style="list-style: none;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Wanneer geen lijst gebruiken

Niet alles wat onder elkaar staat, is een lijst:

• Een enkel item – een <ul> met een <li> is zinloos. Gebruik een <p> of een ander passend element.
• Layout – items die visueel naast elkaar staan maar inhoudelijk niet gerelateerd zijn, vormen geen lijst.
• Alinea’s – als elke “item” een volledige alinea is met eigen context, zijn het alinea’s, geen lijstitems.

WCAG-succescriteria

Quiz