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 Leren en Werken 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.

Op de hoogte blijven van internet ontwikkelingen? Meld je aan op onze nieuwsbrief

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’.

Alt titel veld verplichting

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.’

Ik ga er vanuit dat je een Nederlandse website hebt. Je kan dan de teksten gemakkelijk aanpassen door de vertaalde interface elementen aan te passen. Je kan dit doen door naar het volgende url te gaan:

jouwwebsite.nl/admin/config/regional/translate/translate

Hier kun je een gedeelte van de ‘string’ invoeren die je wil vertalen/corrigeren.

verbeter je interface teksten en maak ze begrijpelijk

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.

Hoe maak je een skip link

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.

Overzichten toegankelijk maken

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.

Heb je een vraag of opmerking over dit artikel? Laat dan een reactie achter
De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Reacties

Heb je vragen over het drempelvrij maken van je Drupal website? Laat het mij weten door hieronder te reageren.

Profile picture for user rroose

Robbert,
Ik vind deze informatie zeer nuttig.
Ik dank je hiervoor.

Hoe zit het trouwens met de content? Als je een website toegankelijk maakt, WCAG proof als het ware. Dan kunnen de mensen die de content invoeren op de website deze toch op een niet gebruiksvriendelijke / toegankelijke manier publiceren? Of zijn er manier om dat tegen te houden?

Dat is een goed punt. De content moet net zo toegankelijk zijn als de rest van de website. De Drupal websites die wij ontwerpen en ontwikkelen leveren we standaard op met een aantal hulpmiddelen en restricties die de redacteuren helpen om toegankelijke content te maken. Dat zijn ogenschijnlijk kleine elementen zoals het aanmoedigen van een alt-tekst wanneer de redacteur een informatieve afbeelding plaatst maar hebben een groot effect. Wanneer je dat combineert met een training op het gebied van drempelvrije content plaatsen, dan kun je ook de elementen ondervangen die niet of lastig door techniek zijn op te lossen. Zoals het correct gebruiken van headings of het schrijven van korte en krachtige titels en beschrijvingen. Gr, Thomas.