Overslaan en naar de inhoud gaan

Drupal drempelvrij

Een drempelvrij website moet voldoen aan de webrichtlijnen en daardoor voor iedereen toegankelijk zijn. In dit artikel bespreek ik enkele tips hoe je jouw Drupal website drempelvrij kan maken.

Kat met een bril op.

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.

toegankelijkheidsregister_schild_grijs_0.pngVan Eldijk ontwerpt en bouwt drempelvrije websites en zijn uitgenodigd voor het Toegankelijkheidsregister waar alleen internet bureaus op worden toegelaten die WCAG 2.0 goedgekeurde (webrichtlijnen 2.0 ) websites hebben opgeleverd.

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.

Screenshot van de alt-veld optie bij een afbeeldingsveld.

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:

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

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

Screenshot van vertalen van de interface.

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.

De skiplink in werking bij de Leren en Werken website.

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.

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

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. 

Nieuwsitem op Leren en Werken.

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.

Volgorde velden in het overzicht.

 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 iets aan deze content gehad? Laat weten hoe je ons waardeert.

Meld je aan voor onze nieuwsbrief

En je ontvangt net als 2321 andere leden een overzicht van onze nieuwste artikelen. Met onderwerpen als; de laatste webdesign trends, SEO tips, conversie optimalisatie, Joomla, Drupal en Wordpress ontwikkelingen.

Reacties

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

Standaard avatar rroose 06.10.2015 - 09:20

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

Standaard avatar Will Ravestein 15.09.2016 - 13:40

Beperkte HTML

  • Regels en alinea's worden automatisch gesplitst.