Hoe maak je een Drupal website drempelvrij volgens de webrichtlijnen? (wcag2.1)

Drempelvrij is een waarmerk dat wordt toegekend door de stichting Drempelvrij wanneer een website aan bepaalde webrichtlijnen voldoet. Deze webrichtlijnen zorgen ervoor dat de website toegankelijk is voor iedereen, dus ook mensen die (kleuren)blind zijn of een handicap hebben. Veel websites van overheidsorganisaties worden door de overheid verplicht om te voldoen aan deze richtlijnen. Onlangs hebben wij een website voor de website Leerwerkloket.nl van het UWV drempelvrij opgeleverd. In dit artikel deel ik een aantal tips waar je rekening mee moet houden als je een Drupal website drempelvrij wil maken.

Ben je geen developer? Lees dan ook: 19 tips om je website wcag 2.1 proof te maken

Alt teksten bij afbeeldingen

Elke afbeelding op je website moet een alt tekst hebben. Een alt tekst wordt getoond als een plaatje niet geladen kan worden. Dit kan voorkomen wanneer het internet van de bezoeker niet goed genoeg is of wanneer het plaatje op de server mist. Ook wordt de alt tekst gebruikt door zogenaamde screenreaders. Een screenreader wordt gebruikt door mensen die blind zijn of slecht zicht hebben. In plaats van dat de afbeelding wordt getoond leest de screenreader de alt tekst voor. Als je een afbeelding van een berg toont zet er dan als alt tekst ‘Berg’ bij. Let op dat je niet ‘Afbeelding van een berg’ als alt tekst gebruikt omdat een screenreader dit dan voorleest als ‘Afbeelding afbeelding van een berg’.

Wanneer je in Drupal een afbeelding veld aanmaakt kun je optioneel kiezen om een titel of alt veld te laten invullen door de gebruiker die de afbeelding toevoegt. Zorg er dus voor dat dit vinkje altijd aanstaat.

Foutmeldingen

De foutmeldingen zoals Drupal deze standaard gebruikt zijn niet altijd even duidelijk. De richtlijnen eisen dat ‘ gebruikers zich ervan bewust zijn dat een fout is ontstaan en kunnen vaststellen wat er mis is’. Je krijgt bijvoorbeeld de volgende foutmelding als je vergeet je gebruikersnaam in te voeren tijden het inloggen:
‘Het veld Gebruikersnaam is verplicht’

Een betere foutmelding die aan de richtlijnen voldoet is als volgt:
‘Het verplichte veld 'Gebruikersnaam' is niet ingevuld.’

Je kan dan de teksten gemakkelijk aanpassen door de vertaalde interface elementen aan te passen.

Een skiplink maken

Wanneer een gebruiker niet in staat is om een muis te gebruiken zal hij of zij navigeren met een toetsenbord. Dit doe je door herhaaldelijk op ‘TAB’ te drukken. De focus wordt dan telkens naar het opvolgende element verlegd. Veel websites hebben een logo, menu en in sommige gevallen ook nog een zoek veld. Je kan je voorstellen dat het dan wel een tijd duurt voordat je daar doorheen ‘getabt’ bent en bij de content terecht komt die je wil lezen. Een manier om dit te omzeilen is om een (door de richtlijnen vereiste) skiplink te maken. Wanneer iemand een pagina opent en op ‘TAB’ drukt krijgt deze bezoeker direct een link te zien die het mogelijk maakt om naar de content te springen.

Op lerenenwerken.nl heb ik de Skiplink als volgt gemaakt:
In de page.tpl.php van de theme heb ik helemaal bovenaan de volgende code toegevoegd:

<a href="#content" class="skip-link">Direct naar de content</a>

Als het goed is zie je nu bovenaan elke pagina in jouw website een link. In mijn page.tpl.php heb ik ook een div met het id ‘content’ (oftewel <div id=”content”>) waarnaar de link naar verwijst. Als de bezoeker nu op deze link klikt schiet hij/zij meteen door naar het content gedeelte.

Deze link is alleen niet voor iedereen handig dus gaan we deze door middel van CSS verbergen en alleen zichtbaar maken wanneer iemand op TAB drukt. Hiervoor gebruik ik de volgende CSS code:

a.skip-link {
  position: absolute;
  top: -100px;
  background: #1b5da8;
  padding: 10px;
  display: block;
  color: #fff;
}

a.skip-link:focus {
  position: static;
  background: #17c0f2;
}

De link is nu verborgen zolang er geen ‘focus’ aanwezig is op dit element. Zodra er op gefocust wordt (door op tab te drukken) komt de link tevoorschijn.

De opbouw van je overzichten(views)

Een ander belangrijk onderdeel is de manier waarop je je views opbouwt. Stel je hebt een nieuwsoverzicht met een afbeelding, titel en intro tekst. Je wil de afbeelding links tonen en de titel en de intro er rechts naast laten zien.

Volgens de richtlijn 1.3.2 moet de opbouw een ‘betekenisvolle volgorde’ hebben. Dat wil zeggen dat het je niet eerst een afbeelding mag tonen en daarna pas de titel. Dit is voor gebruikers met een screenreader verwarrend omdat deze dan eerst de alt tekst van de afbeelding voorleest en daarna pas de titel van het nieuws item. De alt tekst van de afbeelding heeft daarom geen betekenis voordat de titel is voorgelezen. Gelukkig hoef je er daarom alleen in de opbouw van je HTML voor te zorgen dat de titel eerst getoond wordt in de HTML en daarna pas de afbeelding. In je view laat je daarom eerst het titel veld zien en daarna pas de afbeelding.

Je kan dan door middel van CSS alsnog de afbeelding links zetten en de titel en de intro tekst rechts. Visueel heb je je doel bereikt en voor de bezoekers met een screenreader is het ook prettig.

Tot slot

Het drempelvrij maken van een website is voornamelijk veel communiceren met de partij die jouw website controleert of deze wel drempelvrij is. Vaak zijn de regels wat onduidelijk omschreven of wordt er een terminologie gebruikt die niet aansluit bij wat je gewend bent. Technisch gezien is het drempelvrij maken van een Drupal website goed te doen maar kan de communicatie veel tijd opslokken.

Heb je vragen of opmerkingen over het toegankelijk maken van jouw website? Dan lees of beantwoord ik die graag in het reactie gedeelte hieronder. Wil je door ons een toegankelijke Drupal website laten ontwikkelen volgens de WCAG 2.1 richtlijnen? Neem dan contact met ons op.