Lijsten? Check!

Lijstjes: van boodschappenlijstjes tot verlanglijstjes of takenlijstjes, we gebruiken ze allemaal wel eens. Ze brengen orde, geven overzicht en zorgen dat je niets vergeet (of in ieder geval een poging daartoe).

Ook online wemelt het van de lijstjes: opsommingen, stappenplannen, navigatielijsten, et cetera. Maar, wat er voor het oog uitziet als een keurig, overzichtelijk lijstje, is dat in de code lang niet altijd. En dat kan voor gebruikers van schermlezers behoorlijk verwarrend zijn.

Dus, op deze Dag van de Checklist, een goed moment om lijstjes eens écht af te vinken, volgens WCAG 1.3.1 Info en relaties.

WCAG 1.3.1 – Info en relaties

Dit succescriterium zegt dat alle informatie, structuur en relaties die door presentatie worden overgebracht, ook door software te bepalen moeten zijn. Kortgezegd: info en relaties die je visueel ziet, moeten ook in de code overgebracht worden. Zo kan hulpsoftware de inhoud op een passende manier presenteren aan gebruikers die daar afhankelijk van zijn. Denk bijvoorbeeld aan de indeling door middel van koppen, alinea’s, tabellen en… lijsten.

Waarom lijstjes belangrijk zijn

Een goed opgebouwde lijst maakt content niet alleen visueel overzichtelijk, maar ook begrijpelijk voor hulpsoftware. De gebruiker weet dan precies wat er volgt:

“Lijst met drie items.”

“Eén van drie: Boter.

“Twee van drie: Kaas.”

“Drie van drie: Eieren.”

Als de lijst alleen visueel als lijst is opgemaakt (bijvoorbeeld met streepjes en enters), gaat die structuur verloren. Er worden dan losse zinnen zonder duidelijke samenhang voorgelezen.

Hoe maak je een goede lijst? 

Ongeordende of geordende lijst 

Voor webpagina’s zijn twee welbekende manieren om een lijst te maken de ongeordende lijst en de geordende lijst. 

Een ongeordende lijst (ul-element met li-elementen) gebruik je als de volgorde van de lijstitems geen betekenis heeft. Visueel worden hier bijvoorbeeld vaak bulletpoints bij gebruikt. 

Een geordende lijst (ol-element met li-elementen) gebruik je als de volgorde wél betekenis heeft. Dit zijn bijvoorbeeld genummerde lijsten zoals een stappenplan. 

Definitielijst 

De definitielijst (dl-element met dt- en dd-elementen), of in het Engels description list, is geschikt voor een groep termen en een beschrijving die daarbij hoort. Bijvoorbeeld een lijst met begrippen of een overzicht van (contact)gegevens. Een voorbeeld: 

Lijst in PDF-documenten 

In PDF-documenten maak je lijsten door middel van een L-tag. Daarbinnen gebruik je LI-tags voor de lijstitems, Lbl-tags voor de opsommingstekens (best practice) en LBody-tags voor de daadwerkelijke content. 

Veelvoorkomende fouten 

Eerder hintte ik al naar één van de veelvoorkomende fouten: lijstjes die alleen visueel als lijstjes zijn opgemaakt. Een andere veelvoorkomende fout is dat lijstjes die over meerdere kolommen zijn verdeeld of in PDF’s over meerdere pagina’s, worden opgesplitst in losse lijstelementen terwijl deze in één lijst horen te staan. Tot slot zie ik ook vaak componenten op een pagina waarvan het visueel duidelijk een samenhangend geheel is, maar dat dat niet in de code terugkomt. Bijvoorbeeld een overzicht van samenwerkingspartners of een verzameling “direct naar” linkjes. 

Wat zet je in een lijst?

Een lijst hoeft dus niet per se visuele opsommingstekens te hebben om toch semantisch een lijst te zijn. De vuistregel: vormen meerdere onderdelen samen visueel één logisch geheel, dan hoort het in een lijst. Bijvoorbeeld:

• Navigatie- of socialmedia-linkjes die duidelijk bij elkaar horen.

• Paginering bij een zoekresultaten- of nieuwspagina. 

• Een overzicht van (logo’s van) samenwerkingspartners of de USPs van een bedrijf. 

• Een verzameling (nieuws)artikelen. NB als de structuur hierbij al op een andere manier wordt overgebracht, bijvoorbeeld door middel van koppen bij de artikelen, is een lijst niet verplicht (maar mag wel). 

• Een broodkruimelpad mag ook in een lijst. Gebruik dan een geordende lijst (ol-element), omdat de hiërarchie van de linkjes betekenis heeft. 

Een lijstje voor jouw toegankelijk lijstje

We sluiten natuurlijk af met een lijstje. Gebruik deze checklist om te controleren of jouw lijsten toegankelijk zijn:

Lijsten? Check!

1. Gebruik geen visuele opmaak als vervanging van structuur (zoals streepjes en enters in een alinea tekst).

2. Gebruik de juiste lijstelementen:

   1. <ul> voor ongeordende lijsten (waar de volgorde niet uitmaakt)

   2. <ol> voor geordende lijsten (waar de volgorde wél betekenis heeft)

   3. <dl> voor definities of paren van termen en beschrijvingen

   4. L-tags in PDF-documenten

3. Plaats alle samenhangende items in één lijst, ook als ze over meerdere kolommen of pagina’s lopen.

4. Pas indien gewenst de opmaak van de lijsten met CSS aan.

5. Weet wanneer informatie wél in een lijst moet, en wanneer het niét hoeft.

6. Test eens met een schermlezer. Worden je lijsten goed voorgelezen en komt dit overeen met hoe je de informatie visueel tot je neemt?