Aanpassingen in Drupal 7 mbt toegankelijkheid

In mijn vorige blogpost had ik het over de verbeteringen mbt gebruiksvriendelijkheid in Drupal 7. Deze keer zal ik het hebben over enkele van de talrijke verbeteringen mbt toegankelijkheid.

Een toegankelijke website is een website die toegankelijk is voor iedereen, inclusief personen met een functiebeperking. Tijdens de ontwikkeling van Drupal 7 werd er heel wat aandacht besteed om Drupal toegankelijk te maken. Hiervoor baseerden de ontwikkelaars zich op de WCAG en ARIA specificaties. Dit zijn internationale richtlijnen voor het ontwikkelen van toegankelijke site inhoud en web applicaties.

Skip to main content

Als je nu na het laden van de pagina één enkele keer op de tab toets duwt komt er bovenaan een link tevoorschijn met de tekst “Overslaan en naar de algemene inhoud gaan". Voor de meeste mensen betekent dit niet veel maar voor mensen die een screen reader hebben is dit een handig hulpmiddel. Bij het voorlezen van de links op de pagina is dat de 1e link die wordt voorgelezen en geeft hun de kans eventuele volgende menu’s en blokken over te slaan en in 1x naar de algemene inhoud te springen waarna hun screen reader programma de echte content zal beginnen lezen.

Lees meer wat?

Op zo goed als alle sites wordt, als er content opgelijst wordt, niet de volledige inhoud van het artikel getoond. Deze teaser wordt meestal gevolgd door een “Lees meer" link. Dit is opnieuw niet zo handig voor mensen met een screen reader want zij horen alleen “Lees meer" en hebben niet altijd de mogelijkheid om te weten bij welk artikel die link hoort.

Als je echter na een Drupal 7 installatie naar de HTML van de “Lees meer" link gaat kijken zal je ongeveer het volgende zien:

Een standaard Drupal 7 installatie zorgt dat de artikel titel onzichtbaar wordt geïntegreerd op een manier zodat screen readers dit ook nog voorlezen.

Welk menu?

Op dezelfde manier als voor de “Lees meer" link kan er nu ook een titel meegegeven worden aan lijsten. Het meest voor de hand liggende gebruik hiervoor is om het duidelijk te maken voor mensen met screen readers welk menu er momenteel voorgelezen wordt. Als je naar de broncode van het hoofdmenu gaat kijken zal je daar het volgende zien:

element-hidden vs. element-invisible

Twee voorbeelden hierboven maken gebruik van de css class element-invisible om zaken te verwijderen van het zicht maar beschikbaar te houden voor de screen readers. Dit is een css class die hiervoor speciaal in core werd toegevoegd. Daarnaast werd ook nog een class toegevoegd om zaken voor iedereen en alles van het zicht te ontrekken.

Meer informatie over element-hiden en element-invisible.

Is dat alles?

Neen! In Drupal 7 werd er heel wat aandacht besteed aan toegankelijkheid in het algemeen.

Indien u meer wilt weten over het maken van toegankelijke website kan u steeds contact met ons opnemen.