In deze handleiding leg ik uit hoe je je WordPress website toegankelijk maakt voor mensen met een beperking of handicap zoals blinden, slechtzienden, kleurenblinden, slechthorenden en doven.

Website toegankelijk maken voor blinden, slechtzienden en doven

Al vroeg in mijn carriere kreeg ik te maken met websites voor mensen met een beperking. In 1999 maakte ik voor de Gemeente Ermelo de eerste website die aan allerlei W3C-eisen en richtlijnen moest voldoen. Dit is een echte ‘zorggemeente’ met veel zorginstellingen. Laagdrempelige toegang was een must. Voor toegankelijkheid (accessibility) voor digitale content en WordPress websites geef ik je hierbij praktische tips die je meteen kan toepassen.

WordPress website en W3C richtlijnen voor toegankelijkheid

Het W3C consortium legt richtlijnen vast voor webtalen. Deze standaarden en richtlijnen van W3C moeten er voor zorgen dat er op uniforme wijze gewerkt wordt door verschillende webbouwers. De richtlijnen zorgen er voor dat de gebruikersvriendelijkheid en toegankelijkheid verhoogd wordt, dus ook voor mensen met een beperking. De websites worden hierdoor toegankelijker.
Veel zorg instellingen en overheidsinstanties maken gebruik van de richtlijnen om zo websites toegankelijker te maken voor bezoekers met een visuele beperking en de gebruikerservaring te verbeteren.
W3C richtlijnen voor toegankelijkheid websites

Wetgeving overheidswebsites EN301549 en WCAG

Naast deze W3C richtlijnen moeten overheidswebsites vanaf 23 september 2018 voldoen aan de richtlijnen voor toegankelijke websites. Deze regelgeving vastgelegd in de standaarden EN301549 en WCAG 2.1. Lees verderop in dit artikel wat dit inhoud voor WordPress websites en wat er dient te gebeuren om je website WCAG-compliant te maken.
Regelgeving en richtlijnen overheidswebsites | EN301549 en WCAG

Meer handleidingen over toegankelijkheid

---

Voorbeelden website bezoekers met handicap

Ongeveer twintig procent van de bevolking heeft een beperking die het gebruik van technologie bemoeilijkt. Dit zijn o.a. slechtzienden, (kleuren)blinden, laaggeletterden, dyslectici, lichamelijk gehandicapten, doven en slechthorenden. Deze 20% van de Nederlandse bevolking kan jouw website niet bekijken als deze niet toegankelijk is.
Zo hebben veel mensen moeite met kleuren onderscheiden, een touch screen gebruiken of het begrijpen van moeilijke teksten. Bekijk voorbeelden van mensen met een beperking voor wie het internet en onmisbaar zijn geworden:

Blinden, slechtzienden en kleurenblinden

Slechtzienden en kleurenblinden hebben vaak moeite met kleine fonts en zwakke contrasten. Ook veel oudere gebruikers  horen bij deze doelgroep.

Motorische beperking

Mensen met een motorische beperking, bijvoorbeeld Parkinson, vinden het lastig om een muis, touchscreen (aanraakscherm) te gebruiken. Zij zijn daardoor vaak aangewezen op het toetsenbord, spraakinvoer of speciale hardware. Bijvoorbeeld in het geval van een gedeeltelijke verlamming die het gevolg is van MS of een andere spierziekte.

Slechthorenden en doven

Slechthorenden en doven zijn gebaat bij ondertitelde video’s. Veel mensen waarderen het ook als video-interviews een uitgeschreven tekst (transcriptie) hebben. Ze hebben behoefte aan eenvoudige en beknopte teksten. Dat geldt ook voor dyslectici en lezers die onze taal (nog) niet goed beheersen. Denk hierbij bijvoorbeeld aan immigranten.

---

Shownieuws accessibility

Een blinde vrouw heeft begin 2019 Beyoncé aangeklaagd. Ze beweert dat de website van de zangeres niet toegankelijk is voor blinden en slechtzienden. Lees meer

---

Tips website bezoekers met handicap of beperking

Voorspelbare layout

Voor visueel gehandicapten is consistentie nog veel belangrijker dan voor de rest. Het kost hen meer moeite om een plek op de webpagina te bereiken. Ze moeten er met hun toetsenbord of met vergrotingssoftware gericht naar op zoek gaan. Met een vaste plaatsing van elementen en het volgen van conventies help je hen dus bijzonder veel.
Voorbeeld:
De zoekfunctie en contactinfo altijd rechtsbovenin en/of onderaan.

Voorkom ruis op de website en pagina’s

Blinden en slechtzienden moeten over het algemeen veel meer tijd investeren om te bepalen welke informatie of functionaliteit(en) een pagina bevat.Op veel websites wordt geprobeerd de bezoeker zoveel mogelijk interessante informatie of functionaliteit(en) aan te bieden. Het kan dus verwarrend zijn als de pagina inhoud bevat die niet helemaal gerelateerd is aan het doel van die pagina. Het bemoeilijkt het scannen van de pagina en kan hem zelfs op het verkeerde been zetten. Presenteer dus zo snel mogelijk de kerninhoud en waar de pagina over gaat.

Decoratieve afbeeldingen: geen alt-tekst

Decoratieve afbeeldingen horen eigenlijk in het CSS stylesheet thuis. Maar omdat dit niet altijd kan, staan decoratieve afbeeldingen soms in de html. Als je dit doet, bedenk er dan geen alt-tekst bij; die zorgt alleen voor ruis. Dus laat de alt tekst dus leeg bij decoratie die geen betekenis heeft.
Meer over de alt-tekst en afbeeldingen

h2 en h3 alleen voor koppen en secties

Gebruik allen kopteksten (H2 en H3) waar ze voor bedoeld zijn: koppen dus. Gebruik geen H2 en H3 voor bv. titels in een lijst van nieuwsitems. Maak daar gewoon hyperlinks van. Anders kost het screenreader gebruikers veel tijd om de pagina te scannen. Veel screenreadergebruikers scannen een webpagina door snel alle (H2) koppen af te lopen. Daarmee hoopt men alle hoofdparagrafen en belangrijke paginasecties (bv. voor navigatie) tegen te komen. Vermijd tevens het gebruik van kopregelniveaus 4 en 5 (H4 en H5). Visueel gehandicapten die sneltoetsen gebruiken om kopregels te scannen, verwachten alleen paragrafen (H2) en subparagrafen (H3).

Belangrijkste woord altijd vooraan

Zet in je tekst en in je links het belangrijkste woord vooraan. Dit is een algemene usability-regel, maar voor visueel gehandicapten is het heel belangrijk: In sommige screenreaders kun je alle links op een pagina in een alfabetisch gesorteerde lijst laten zetten om zo sneller een bepaalde link te vinden.

Context en samenhang bij inzoomen webpagina

Sommige slechtzienden moeten zo inzoomen op het beeldscherm, dat ze steeds een klein stukje van een pagina kunnen zien. Daardoor missen ze veel context. Dit blijft lastig. Zorg dat de losse elementen herkenbaar zijn in vormgeving. Probeer in ieder geval menulinks voldoende herkenbaar te maken.

---

WordPress websites en WCAG

Overheidswebsites dienen te voldoen aan de WCAG 2.0 niveau AA regelgeving. Voor WordPress is dit veelbetekenend. WordPress is een goede basis om je website te laten voldoen aan WCAG 2.0. Het WordPress CMS is goed, zolang je je houdt aan standaard WordPress functies, zoals het WordPress menu. Alleen het gebruikte thema en de WordPress plugins kunnen ervoor zorgen dat je website niet voldoet aan de WCAG standaard. Niet elke WordPress software-ontwikkelaar houdt zich aan de richtlijnen van WCAG.

Het CMS van WordPress en WCAG

De mediabibliotheek is standaard voorzien van de mogelijkheid om de nodige alt-beschrijvingen op te geven. het standaard WordPress-menu wordt op de correcte manier opgebouwd. Het gebruikte thema’s, de WordPress plugins en de gebruikte techniek moeten dus geschikt zijn en goed toegepast worden. In verband met het thema en de plugins dien je het volgende zeker te controleren of uit te voeren. Het is al met al een behoorlijke klus:

---

Toevoegen aan WordPress voor WCAG

Het onderstaande moet naar alle waarschijnlijkheid worden toegevoegd aan WordPress:

• Schakel links overslaan met WebKit-ondersteuning in door JavaScript-ondersteuning toe te voegen om de toetsenbordfocus te verplaatsen.
• Voeg skip links toe met door de gebruiker gedefinieerde doelen. (Aanpasbare doelen en uiterlijk.)
• Voeg attributen voor taal- en tekstrichting toe aan uw HTML-kenmerk
• Voeg een overzicht toe aan de focusstatus van het toetsenbord voor focusseerbare elementen.
• Voeg een werkbalk toe die schakelt tussen een hoog contrast, grote afdrukken en onverzadigde (grijswaarden) weergaven van uw thema.
• Voeg een lange beschrijving toe aan afbeeldingen. Gebruik het veld ‘Beschrijving’ van de afbeelding om lange beschrijvingen toe te voegen.
• Handhaving voor alt-attributen op afbeeldingen.

Aanpassen in WordPress voor WCAG

Doet moet je aanpassen in aan de standaard WordPress instellingen en techniek:

• Verwijder het doelkenmerk uit links (open in nieuw venster).
• Forceer een zoekpagina-fout wanneer een zoekopdracht wordt uitgevoerd met een lege tekstreeks. (Als uw thema een sjabloon search.php heeft.)
• Verwijder tabindex van elementen waarop kan worden scherpgesteld.
• Verwijder titelkenmerken van afbeeldingen die in de inhoud zijn ingevoegd.
• Verwijder overbodige titelattributen uit paginalijsten, categorielijsten en archiefmenu’s.
• Voeg berichttitels toe aan standaard ‘lees meer’ links.
• Los enkele toegankelijkheidsproblemen op in de WordPress admin-stijlen
• Voeg labels toe aan standaard WordPress-formuliervelden als deze ontbreken

---

Checklist website met beperking

Navigatie

• Website is bruikbaar met het toetsenbord
• Linkteksten zijn betekenisvol binnen hun eigen context

Tekst en inhoud

• Broncode voldoet aan de specificatie (zie W3C richtlijnen)
• Pagina’s hebben een betekenisvolle titel
• Pagina’s zijn semantisch gestructureerd
• Basistaal van iedere pagina is aangegeven

Afbeeldingen en fotografie

• Elke afbeelding heeft een alt-attribuut
• Complexe afbeeldingen zijn tekstueel beschreven
• Informatiedragende achtergrondafbeeldingen hebben een alternatief

Video en geluid

• Video en geluid zijn benoemd
• Tekstversie is beschikbaar
• Video is ondertiteld
• Geluid start niet automatisch

Vormgeving en design

• Links zijn zichtbaar te onderscheiden
• Spaties en andere tekens worden niet gebruikt voor vormgeving
• Pagina-inhoud heeft betekenisvolle volgorde
• (i)Frames hebben beschrijvende naam en titel
• Tekst en afbeeldingen knipperen niet meer dan 3 keer per seconde
• Beweging en video kan gestopt worden
• Inhoud is begrijpelijk voor wie geen kleuren kan onderscheiden

Tabellen

• Tabel is bruikbaar na linearisatie (lastig met WordPress en meest gebruikte tablepress plugin)
• Tabelhoofdingen zijn gemarkeerd met een th-element
• Bijschrift is gemarkeerd met het caption-element
• Complexe tabellen zijn gemarkeerd met headers-attributen

Formulieren

• Labels en formuliervelden zijn verbonden
• Velden zonder zichtbaar label hebben een beschrijvende tooltip
• Het label bij datumvelden vermeldt de vereiste notatie
• Samenhorende formuliervelden zijn ingesloten door een fieldset
• Samenhorende onderdelen in een keuzelijst zijn ingesloten door een optgroup
• Verplichte velden zijn binnen het label aangekondigd
• Ieder formulier heeft een zichtbare verzendknop
• Bij het valideren wordt foutieve invoer gemarkeerd en tekstueel toegelicht

Tijdslimiet

• Acties zijn niet strikt tijdsgebonden

---

Hulp nodig voor WordPress websites en toegankelijkheid

Heb je hulp nodig om jouw WordPress website te laten voldoen aan het bovenstaande?
Neem dan contact op.