Drupal heeft een goede reputatie op het gebied van gebruiksvriendelijkheid en toegankelijkheid. Er worden gebruiksonderzoeken uitgevoerd, er is een gespecialiseerd Accessibility-team, er is specifieke documentatie en in de issue queue zijn er specifieke tags voor Accessibility en de WCAG. Waarbij je de laatste zelfs per richtlijn kunt uitsplitsen. Maar hoe doet Drupal het out-of-the-box eigenlijk met betrekking tot de WCAG en toegankelijkheid? In deze zes blogs gaan we in vogelvlucht door de voorkant van de applicatie.
niveau:
Toegankelijkheid is een belangrijk onderwerp. Meer mensen kunnen zelfstandig informatie zoeken en acties uitvoeren op het internet. Dit geeft ze autonomie en vrijheid. Daarnaast is het voor organisaties zelf belangrijk. Het levert al gauw 20% meer bezoekers op. En tel daar de hogere conversie nog eens bij op.
Voor sommige organisaties is het verplicht om te voldoen aan de WCAG (richtlijnen voor een toegankelijke website). Dit geldt momenteel voor (semi)overheidsinstellingen, maar vanaf juni 2025 gaat dit ook gelden voor uitgeverijen en grotere E-Commerce-sites. Bovendien wordt er een toezichthouder ingesteld. Kortom, tijd voor actie!
Uiteraard heeft het ontwikkelen van een theme in Drupal het allergrootste effect op de toegankelijkheid. Maar Drupal core levert veel HTML-code aan die niet altijd wordt overschreven door het eigen theme. Hoe zit het met de accessibility van deze standaard code?
We kijken in zes achtereenvolgende blogs naar deze onderdelen:
In dit eerste blog nemen we de paginastructuur onder de loep, waaronder koppen.
De structuur van de pagina bestaat onder meer uit de landmark-regio’s, die in de HTML worden gedefinieerd. En de koppen die aangeven over welke inhoud de pagina gaat.
Drupal gaat hier van zichzelf goed mee om. Het maakt zogenaamde landmark-regio’s aan, zoals een <header>, <main>, <aside> en <footer>. Voor een bezoeker met verminderd of slechter zicht is het belangrijk om met behulp van deze landmark-regio’s een overzicht te kunnen krijgen van de opzet van de pagina. Dit kan ook worden gebruikt voor de navigatie op de pagina.
Ook voegt Drupal standaard een skip-link toe. Hiermee kan de bezoeker de navigatie overslaan en direct naar de inhoud gaan.
De (hiërarchie van de) koppen spelen een belangrijke rol om een snel overzicht te kunnen krijgen over de opzet en inhoud van de pagina. Dit geldt niet alleen voor bezoekers met een visuele beperking maar voor iedereen die de pagina bezoekt.
Een pagina hoort maar één <h1> te hebben en de daarop volgende koppen mogen geen stappen overslaan. Zo ontstaat er een duidelijke hiërarchie.
Drupal doet dat over het algemeen netjes, iedere pagina wordt voorzien van een enkele <h1>, in de editor geen koppen worden toegevoegd van dit niveau en ieder (navigatie-)blok start met een <h2>. Maar op bijvoorbeeld de user-pagina worden stappen overgeslagen en wordt na de <h1> een <h4> weergegeven. Dit is in een theme eenvoudig op te lossen, maar hier dient door de frontender op gelet te worden.
In de basis doet Drupal dit goed, maar bij het ontwikkelen van het theme heeft de frontender hier de meeste invloed.
Neem contact op en laat een volledige audit uitvoeren. Samen kijken we hoe we dit voor jouw specifieke implementatie op kunnen lossen.
