Drupal heeft een goede reputatie op het gebied van gebruiksvriendelijkheid en toegankelijkheid. In deze serie van zes blogs kijken we naar hoe Drupal het doet en waar nog verbeterpunten liggen. Na deel 2 over de navigatie, kijken we in dit derde deel naar de toegankelijkheid en WCAG-ondersteuning van tabellen in Drupal, zoals de Views-module die genereert. Het doel van Drupal is om ondersteuning te bieden voor WCAG 2.1 AA. We gaan kijken in hoeverre dat al lukt.
Dit is het derde deel, uit een serie van zes.
Drupal kan met behulp van de Views-module in core, overzichten genereren van inhoud en deze onder meer weergeven als tabellen. Omdat Drupal aangeeft dat het als doel heeft om te voldoen aan de WCAG 2.1 AA met betrekking tot toegankelijkheid, zou dit ook moeten gelden voor tabellen.
Om aan te geven wat de context van de tabel is kan er een naam aan de tabel worden gegeven met het <caption> element. Hierin kan ook een uitgebreidere omschrijving worden meegegeven. In de Views-module is hier het veld “Bijschrift voor de tabel” beschikbaar. Het is aan de sitebouwer om hier ook daadwerkelijk een zinnige tekst in te voeren.
In de basis is de HTML van een tabel straightforward. Er zijn echter een aantal attributen die voor de toegankelijkheid belangrijk zijn. Het is aan te raden in de headercellen de scope aan te geven (col of row) en in de datacellen met het headers-attribuut naar het id van de relevante headercel te verwijzen.
Dit is hoe Drupal dat doet:
<table>
<caption>Songs van Kate Bush in de Verrukkelijke 15</caption>
<thead>
<tr>
<th id="view-title-1-table-column" scope="col">Titel</th>
<th id="view-field-eerste-week-table-column" scope="col">Eerste week</th>
<th id="view-field-hoogste-notering-table-column" scope="col">Hoogste notering</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="view-title-1-table-column">Running up that hill (A deal with God)</td>
<td headers="view-field-eerste-week-table-column">06/08/1985</td>
<td headers="view-field-hoogste-notering-table-column">1</td>
</tr>
<tr>
<td headers="view-title-1-table-column">Cloudbusting</td>
<td headers="view-field-eerste-week-table-column">12/11/1985</td>
<td headers="view-field-hoogste-notering-table-column">2</td>
</tr>
</tbody>
</table>Tabellen kunnen heel ingewikkeld zijn en er zijn dan ook meerdere mogelijkheden en uitdagingen voor de digitale toegankelijkheid. Maar ook hier geeft Drupal ontwikkelaars voldoende functionaliteit om dit goed te kunnen doen (denk aan de caption) en levert het in de basis prima code af om aan de WCAG te kunnen voldoen.
Neem contact op en laat een volledige audit uitvoeren. Samen kijken we hoe we dit voor jouw specifieke implementatie op kunnen lossen.
