Toegankelijke lijsten verbeteren de leesbaarheid en de navigatie van een document. Er kan snel en efficiënt door een goed gestructureerde lijst genavigeerd worden en ze bieden een duidelijke visuele en semantische structuur die helpt bij het organiseren van gegevens, waardoor de inhoud gemakkelijker te begrijpen is. Daarvoor is het belangrijk dat een goede keuze wordt gemaakt voor genummerde (geordende) en ongenummerde (ongeordende) lijsten. In principe zijn geordende lijsten alleen relevant als de volgorde er toe doet. Of als direct verwezen moet kunnen worden naar een item in een lijst.
Om het overzicht te houden is het advies om niet teveel en te diep te nesten. Je kunt een ‘sublijst’ onder een lijstitem hangen. En onder die items kun je weer sublijsten plaatsen. Als je te diep nest, raken lezers de draad kwijt. Zeker als je de visuele ondersteuning mist. Splits lijsten liever op en onderscheid ze eventueel met semantische koppen.
Een toegankelijke lijst moet ‘onder water’ op de juiste manier getagd worden door het gebruik van lijsttags. Hierdoor interpreteert (hulp)software de lijst op juiste manier.
Samengevat:
- Kies bewust voor geordende en ongeordende lijsten.
- Nest niet te diep, maar splits lijsten op.
- Gebruik de juiste lijsttags voor goede semantische opmaak.
De WCAG (Web Content Accessibility Guidelines) bieden enkele criteria en richtlijnen voor het toegankelijk maken van content, waaronder ook gebruik van lijsten.
Toegankelijke lijsten in een teksteditor
In een teksteditor (bijvoorbeeld MS Word), WYSIWYG-editor of opmaakprogramma zitten doorgaans standaard functionaliteiten om een lijst toe te voegen aan tekst. Je kunt bijvoorbeeld tekst selecteren die je wilt omzetten in een lijst. Daarna kies je de gewenste optie voor opsommingstekens of nummering in de toolbar. Je kunt lijsten eventueel ook nesten. Als je deze functionaliteiten gebruikt, voeg je semantisch goede lijsten toe aan je publicaties. Deze lijsten zijn door hulpsoftware te herkennen als lijst. Voeg je lijsten toe door een afbeelding of symbool voor een paragraaf of regel te plaatsen, dan zal hulpsoftware deze tekst interpreteren en behandelen als een paragraaf, niet als lijst.
Toegankelijke lijsten in HTML
Binnen HTML zijn er bij het gebruik van een lijst met items meerdere mogelijkheden. Zo gebruik je <ul> voor een ‘unordered list’ (lijst zonder specifieke volgorde) en <ol> voor een ‘ordered list’ (lijst mét specifieke volgorde). Om ervoor te zorgen dat de losse items in de lijst op de juiste manier gepresenteerd worden, gebruik je voor elk item de <li> tag. Zo weet een schermlezer precies waar hij mee te maken heeft en kan de tekst eenvoudig gelezen worden. Een voorbeeld van een ‘unordered list’:
Hoe toets ik of de lijsten in mijn document toegankelijk zijn
Om te toetsen of een lijst toegankelijk is, moeten we visueel kijken welke lijsten er aanwezig zijn in een publicatie. Vervolgens moet per lijst gekeken worden naar of deze lijst ook daadwerkelijk semantisch is opgemaakt als lijst. Is de structuur van de lijst duidelijk en logisch? Worden de lijsttags op de juiste manier gebruikt? En is de juiste keuze gemaakt voor een geordende of ongeordende lijst? Is de nesting niet te diep en te complex? Sommige toegankelijkheidscheckers geven aan waar in de tekst goed gecodeerde lijsten aanwezig zijn. Bijvoorbeeld WAVE van WebAIM.
<!— Start HTML-code: een unordered list -->
<ul>
<li>Introductie</li>
<li>Belang van toegankelijkheid</li>
<li>Semantische opmaak in de praktijk</li>
</ul>
<!—Einde HTML-code -->
Een voorbeeld van een ‘ordered list’, met daarin een geneste ‘unordered list’:
<!—Start HTML-code: een ordered list -->
<ol>
<li>Digitale toegankelijkheid</li>
<li>Audioproductie</li>
<li>Brailleboeken</li>
<li> <ul>
<li>Item A</li>
<li>Item B</li>
</ul> </li>
</ol>
<!—Einde HTML-code -->
Als je zelf kundig bent in het gebruiken van een schermlezer, bijvoorbeeld NVDA (Windows) of VoiceOver (macOS/iOS), kun je deze ook gebruiken om te testen. Controleer of de schermlezer bijvoorbeeld informatie geeft over het type lijst en het aantal items.
Waarom en voor wie is het belangrijk?
Toegankelijke lijsten zijn erg belangrijk voor de leesbaarheid van een document, maar ook voor de navigatie. Met name gebruikers die (deels) afhankelijk zijn van hulptechnologieën zoals een schermlezer hebben baat bij een goed gestructureerd document, dat eenvoudig te begrijpen en te doorzoeken is.
Als een hulptechnologie zoals een schermlezer een lijst tegenkomt, kan het:
- De lezer op de hoogte stellen dat er een lijst is.
- Aangeven hoeveel items er in de lijst staan.
- De huidige positie binnen een lijst aangeven.
- De plaats van het item in de lijsthiërarchie aangeven.
De aankondiging door schermlezers van de lijst en aantal items zorgt voor voorspelbaarheid en overzicht. Bij het ontbreken van lijsttags, zal een schermlezer de items aankondigen als ongerelateerde alinea's. Een gebruiker met een (visuele) beperking kan dan in de content ‘verdwalen’. Het kunnen interacteren met lijsten is een belangrijk deel van de leeservaring.
Daarnaast zorgt de juiste semantische opmaak van lijsten ervoor dat de weergave aangepast kan worden. Bijvoorbeeld de aanpassing van de lettergrootte, of door inzoomen. Daarbij blijft de weergave (zoals inspringen en uitlijnen) van lijsten herkenbaar en in tact.
Verder lezen over semantische opmaak
Lees meer over het belang van semantische opmaak in artikel Wat is semantische opmaak en waarom toepassen. Met semantische opmaak voldoe je aan een aantal WCAG-criteria. Welke dat zijn lees je in artikel WCAG en semantische opmaak. Hoe je specifieke elementen kunt toetsen op toegankelijke semantische opmaak, lees je in deze artikelen:
