In ons eerdere blogartikel over WooCommerce en toegankelijkheid schreven we al dat de toegankelijkheid van je WooCommerce shop voor een groot deel wordt bepaald door het thema dat je gebruikt. Een WooCommerce thema met ‘accessibility-ready’ tag is zeker een aanrader, maar er zijn nog meer dingen die je kunt doen om je WooCommerce shop toegankelijker te maken.
Zo kun je je WooCommerce shop toegankelijker maken
#1. Voeg aan elke afbeelding een alt tag toe
Je kunt visueel beperkte bezoekers helpen door alt teksten toe te voegen aan de afbeeldingen op je website. Op die manier kunnen screen readers de afbeelding namelijk ‘uitlezen’, en de bezoeker de benodigde context bieden. Lees ons blogartikel over alt tags voor toegankelijkheid voor tips over hoe je dit het beste kunt aanpakken.
#2. Creëer toegankelijke links
Om even terug te komen op screen readers: het kan voorkomen dat deze een link ‘uit de context’ uitlezen. Daarom is het belangrijk om te zorgen dat elke hyperlink informatie bevat over wat er zal gebeuren wanneer erop geklikt wordt. Een ‘klik hier’ ankertekst is niet handig, want het zegt niets. ‘Bekijk onze FAQ voor meer informatie’ of ‘Neem contact op’ zijn betere voorbeelden van interne links. Wanneer het niet logisch of niet mogelijk is om een beschrijvende ankertekst te gebruiken, kun je ook gebruik maken van het link title attribuut. De HTML ziet er dan zo uit:
<a href=”https://www.wphandleiding.nl” title=”Dit is een link naar de WP Handleiding website”>WordPress hulp</a>#3. Gebruik toegankelijke lettertypes
Een goed leesbaar lettertype wordt niet alleen gewaardeerd door visueel beperkte bezoekers, maar door al je bezoekers. Gebruik geen ingewikkelde decoratieve of cursieve lettertypes voor belangrijke teksten en beperk je tot maximaal 2 of 3 verschillende lettertypes op één website. Maak de body tekst ook niet te klein; een lettertype van 16px is een veiligere keus dan een lettertype van 10px.
#4. Denk na over je kleurgebruik
Ook je kleurkeuzes hebben een significante impact op de toegankelijkheid van WooCommerce shop, met name voor mensen die kleurenblind zijn. En ja, kleurenblindheid komt vaker voor dan je misschien denkt; naar schatting lijdt 1 op de 12 mannen en 1 op de 200 vrouwen aan een vorm van kleurenblindheid. Het is daarom goed om gewoon eens te bekijken hoe je site eruitziet wanneer je hem in grayscale bekijkt. Op die manier kun je bekijken of er elementen zijn waar het contrast verbetert kan worden. Als je bijvoorbeeld tekst op een gekleurde achtergrond plaatst, moet je zorgen dat de tekst veel lichter of juist veel donkerder is dan de achtergrond. Als je het lastig vindt om dergelijke gebreken te identificeren, dan kun je gebruik maken van een geautomatiseerde toegankelijkheidsdienst zoals accessiBe. Deze tool analyseert je website en verbetert automatisch het contrast bij de elementen die mogelijk problemen zouden kunnen opleveren voor bezoekers met een visuele beperking.
#5. Gebruik je header tags op de juiste manier
Titels en subtitels geven je content structuur en stellen screen readers in staat om makkelijker hun weg te vinden door je website. Het is daarom cruciaal dat je op de juiste manier gebruik maakt van header tags. De H1 tag moet het onderwerp (de titel) van de pagina weergeven en mag per pagina slechts één keer gebruikt worden. H2, H3 en H4 tags gebruik je om de rest van de content op een logische manier te structureren.
#6. Hou rekening met toetsenbord navigatie
Mensen met bijvoorbeeld een motorische beperking maken vaak gebruik van hun toetsenbord (of stemcommando’s die aan het toetsenbord gelinkt zijn) om door een website te navigeren. Wil je je WooCommerce shop toegankelijker maken, dan is het dus een goed idee om te testen of je met alleen je toetsenbord door je site kunt navigeren. De Tab toets wordt vaak gebruikt om door een pagina te navigeren, wat betekent dat je pagina-opbouw een logische visuele flow moet volgen – van links naar rechts en van boven naar beneden. Men moet met de pijltjesknoppen (boven-beneden-links-rechts) tussen selectievakjes en radiobuttons kunnen navigeren, en deze moeten kunnen worden aangevinkt met de spatiebalk. Als je een formulier met validatie hebt, moet de cursor bij een foutmelding automatisch naar het eerste veld met een foutief ingevoerde waarde springen. Pop-up vensters moeten met de Esc toets gesloten kunnen worden.
Tot slot
Lijkt het alsof je WooCommerce shop toegankelijker maken een flinke klus gaat zijn? Dat is het ook. Maar als je wat aandacht besteedt aan de bovengenoemde punten, dan kun je de belangrijkste zaken op het gebied van toegankelijkheid afvinken. Zo zorg je ervoor dat iedereen op een gebruiksvriendelijke en comfortabele manier van je site gebruik kan maken – met of zonder beperking.
