Hou rekening met de toegankelijkheid van je Drupal website

Ingediend door Donny op za, 06/12/2014 - 09:49

Voor blinden en slechtzienden is het in veel gevallen jammer genoeg een hele klus om informatie te kunnen raadplegen op een website. Gelukkig is er Anysurfer waar men probeert het toegankelijker voor iedereen te krijgen.

Coworks staat op de beperkte lijst van erkende webbouwers die bewezen hebben dat ze toegankelijk werken. Voor het behalen van dit label mocht ik enkele jaren terug een training van Anysurfer bijwonen. Daar krijg je onder andere te zien aan de hand van vele voorbeelden dat surfen op het web niet altijd voor iedereen even gemakkelijk is. Features die op veel websites terug te vinden zijn zoals dropdown menu’s, slideshows, lightbox afbeeldingen en meer zijn al vlug hekelpunten voor slechtzienden of blinden. Standaard (zoals ze op de meeste websites staan) zijn ze meestal niet voorzien om op een deftige manier te kunnen werken met een screenreader.

Drupal’s Kanji theme waar ik zelf de maintainer van ben kan ook nog wel wat extra aandacht gebruiken, onder andere om die reden zal de Drupal8 versie terug helemaal van scratch gemaakt worden zodat ik hier van in het begin rekening mee kan houden.

Indien je interesse moest hebben om je website toegankelijker te maken, lees er dan zeker de Anysurfer blog eens op na. Je zal er ongetwijfeld heel wat zaken op terug vinden waar je eerder niet aan dacht dat deze een probleem kunnen vormen.

Bij de ontwikkeling van de Drupal core probeert men hier gelukkig genoeg ook rekening mee te houden. Denk bijvoorbeeld aan de verborgen link ‘Overslaan en naar de algemene inhoud gaan’. Welke je enkel met een screenreader te zien zal krijgen of door gebruik te maken van je tab toets om zo over de website te navigeren. Drupal heeft hier de class ‘element-invisible’ voor voorzien. Hiermee kan je zaken niet tonen op het scherm, maar wel beschikbaar stellen voor screenreaders. Een mooi voorbeeld hiervan zijn ook de node teasers (standaard). Op de meeste overzichten vind je de ‘lees meer’ links wel terug. Voor de meeste bezoekers is dit geen probleem, daar zij de titel er wel bij zien staan in de teaser. Voor iemand met een screenreader is dit uiteraard van weinig nut.

Als je de code van de lees meer link gaat bekijken zien je het volgende:

Voorbeeld code node teaser Drupal

In de link zelf zie je nog een span staan met de class ‘element-invisible’ die de titel van de node bevat. Een screenreader zal dus niet enkel ‘lees meer’ voorlezen maar ook effectief  meer informatie geven over de link zodat de bezoeker weet waar toe deze link zal leiden.

Indien je dus als themer zelf lijsten moest samenstellen en ‘lees meer’ links gaan plaatsen, dan is het maar een kleintje om deze optie te voorzien. Maar het is wel een enorme hulp voor blinden en slechtzienden.

Op Mac is er trouwens een screenreader aanwezig die je kan gebruiken om je website te testen. Je kan deze oproepen via cmd + F5