Tabel met knoppen om in de kolommen te sorteren

Sommige tabellen hebben een rij met kolomkoppen met icoontjes waarmee je de inhoud van de kolom oplopend of aflopend kunt sorteren. Vaak is deze functionaliteit niet toegankelijk voor bezoekers die een schermlezer gebruiken.

Wat hier vaak misgaat, is het ontbreken van de juiste interactieve rol bij deze knoppen. Meestal bestaat de kolomkopcel uit een <th>-element. Dat is correct, maar die rol vertelt een schermlezer niet dat erop kan worden geklikt  om een actie uit te voeren.

Sommige schermlezers voegen zelf woorden toe als “clickable” of “on click”. Soms wordt dit goed begrepen, maar je kunt hier niet op vertrouwen. Zulke meldingen komen ook op andere plekken in een webpagina voor en betekenen daar niet per se hetzelfde als een echte interactieve rol.

Het is een slecht idee om een role="button" aan het <th>-element toe te voegen. Daarmee overschrijf je de rol van kolomkop en raakt de tabelstructuur onjuist.

De juiste oplossing is om in het <th>-element een apart <button>-element op te nemen. Geef dit element:

• een toegankelijke naam die mee verandert met de functie van de knop (bijvoorbeeld bij het wisselen tussen oplopend en aflopend sorteren): <button aria-label="Oplopend sorteren"> .. </button>,

• een minimaal contrast van 3,0:1 in beide staten.