roadblok Hoe toegankelijk is jouw website?

Website toegankelijkheid en ussability

Met een toegankelijke website neem je de verantwoordelijkheid om je website toegankelijk te maken voor iedereen. Ongeacht of ze nu een beperking hebben of niet. Denk hierbij aan mensen die kleurenblind zijn, dyslexie of gezichtsproblemen hebben. Of wat als je niet zo’n vaste hand hebt en je moet op een klein knopje klikken. Voorbeelden te over.

Eenvoudige aanpassingen

Afgelopen zomer ben in naar een WordPress Meetup in Zwolle geweest en hier was Rian Rietveld van Level Level onze gastspreker. Ze is Accessibility consultant en gaf ons heel veel voorbeelden.  Je denkt er misschien niet direct bij na, maar jouw website is wellicht helemaal niet zo toegankelijk als je zelf denkt. Ze is daarnaast ook lid van het Make WordPress Accessible team en heeft me een aantal mooie inzichten meegegeven die ik met je wil delen.

Let op, dit blog is meer bedoeld om je meer bewust te maken. Ik vertel globaal waar je op moet letten. Ik heb zoveel mogelijk de linkjes erbij gezet naar de website met specifieke informatie.

Toegankelijkheid gaat boven ontwerp

Een website gaat over informatie verstrekking en vormgeving daaraan ondergeschikt. Dat hoeft je niet te weerhouden een visueel aantrekkelijke website neer te zetten.Het kan in sommige gevallen we beteken dat je net een andere kleur moet kiezen, of dat knoppen iets groter in beeld moeten komen. Of dat je niet een heel fancy formulier kan tonen met inline teksten.

Helderheid en contrast

voorbeeld contrast op grijsvlakken voorbeeld contrast op kleurvlakken

Heb je bewust nagedacht over de kleuren en de kleurvlakken die je gebruikt? Voor kleurenblinden is het van belang dat er genoeg helderheid en contrast is tussen de tekst en de ondergrond.

Lichtgrijs op grijs is bijvoorbeeld niet aan te raden. Een simpele test is je pagina eens om te zetten naar grijswaarden. En check je website op verschillende schermen, is de tekst dan op alle schermen goed te lezen?  Hier lees je meer over kleuren in webpagina’s >>

Een goed geoptimaliseerde website scoort beter

Goed gebruik van html zorgt ervoor dat de website een betere notering in Google krijgt. Zorg dus dat je kopjes een h1, h2, h3 tag krijgen. De meeste editors voorzien daar al in als je de tekst selecteert en bijvoorbeeld voor een “kopje h2” kiest. Afbeeldingen geef je een goede ALT-tekst mee. Een goed gebouwde website heeft deze opties standaard.

Zorg voor structuur in je website.

Een goede structuur van je tekst maakt deze goed leesbaar. Maak een logische opbouw en gebruik voor de paginatitel een h1 (een per pagina). Gebruik daarna voor de koppen een h2 en als je dat gedeelte van de tekst nog verder wil indelen een h3 als subkop. Het structureren van je website zie je ook terug in een goede menu opbouw en een logische plek voor knoppen en contactinformatie en de call-to-action. De layout van je pagina is daarom ook belangrijk, zorg dan mensen snel kunnen vinden wat ze zoeken. Dat is ook belangrijk voor jouw conversie.

Twijfel je over de positie van bijvoorbeeld een call-to-action? Doe dan een A/B test en meet welke oplossing beter werkt.

Gebruik ALT-teksten bij je afbeeldingen

Geef je afbeeldingen een omschrijving mee, zodat mensen die een screenreader gebruiken kunnen horen wat er op het plaatje staat. Teksten op een afbeelding en quotes op foto’s kan men niet zien.

Leesbare teksten

Zorg dat het contrast tussen de tekst en de achtergrond groot genoeg is. En dat het lettertype zelf ook groot genoeg is. Voor de meest gangbare lettertypen is dit tussen de 14- en 18-punts.

Formulieren

Soms zie je van die supermooie formulieren met voorbeeldteksten in de velden. Zodra je gaat typen verdwijnt deze tekst, en vaak ook nog in heel lichtgrijs op wit, niet heel handig. Ik begrijp dat dit vaak een discussiepunt is.. Deze manier van vormgeven is mooier en het formulier heeft minder ruimte nodig waardoor je ook nog meer info er onder kan laten zien. Ik maak me er zelf ook schuldig aan. Maar als je het helemaal volgens de richtlijnen wil doen moet de labeltekst gekoppeld zijn aan het veld zodat deze opgelezen kan worden met een screenreader. Ook moet de instructies en foutmeldingen duidelijk in beeld komen. Hoe vaak heb je zelf al gehad dat je een heel formulier hebt ingevuld en deze niet verzonden wordt? Vaak staat dat ergens op een onlogische plek dat bijv. De notering van het btw nummer niet klopt.

Meer informatie over toegankelijke formulieren >>

Skip-Links om blokken te kunnen omzeilen

Bezoekers die niet met de muis kunnen navigeren, bedienen het web meestal door te navigeren met het toetsenbord. Zij doen dit met de tab toets. Door tab en shift + tab te gebruiken kan men naar de volgende of vorige link of knop op de pagina gaan. Je wilt snel kunnen skippen naar een volgend blok ipv eerst door een hele rij menu items te moeten tabben.

Meer lezen over skip-links in WordPress

Geef in de linktekst aan waar je naartoe navigeert

Vermijd teksten als “lees meer”, “klik hier” of complete URL’s. Je lezer moet weten waar hij naartoe gelinked wordt zodra hij op de link klikt. Gebruik een omschrijvende tekst en onderstreep je linkjes. Vaak zie je er alleen een kleur wordt toegepast, waardoor ze te weinig opvallen als link.

Ondertitel video en audio

Video en podcasts worden steeds populairder. Deze zijn helaas voor blinden, slechtzienden en dove mensen niet toegankelijk. Probeer daarom de uitgeschreven tekst mee te leveren. Gebruik je YouTube-filmpjes op je website? Je kunt gemakkelijk een ondertiteling toevoegen via ‘captions’. Ik zou de automatische vertaling niet gebruiken, die is wel hilarisch maar brengt je boodschap niet zo goed over. Meer lezen over  eisen voor video en audio

Handige tools om zelf te testen

Er zijn een aantal handige tools om zelf te testen of je website in orde is. Ik heb hiervoor twee extensies uitgeprobeerd die ik aan mijn Chrome browser heb toegevoegd.

Met deze link ga je naar het extensie overzicht van Chrome >>

RGBlind

RGB-blind-extensie

Een extension voor je browser die 2 soorten kleurenblindheid simuleert

WCAG Accessibility Audit

RGB-blind-extensie

Deze extensie doet een audit van je pagina en geeft in groen en rood aan welke elementen er mee door kunnen en welke niet aan de test voldoen. Deze kan je dan bekijken door er op te klikken. In deze afbeelding zie je dat witte tekst op oranje een te laag contrast geeft.

schermafbeelding-userway-plugin

Plugin voor een snelle oplossing

Een tijdje terug heb ik een website gemaakt waar extra aandacht was voor de webtoegankelijkheid. We hebben toen (als tussenoplossing) een gratis plugin gebruikt van Userway. Als je op het groen bolletje klikt hiernaast zie je wat je er mee kan doen.

Advies


Studio Sandra Gortemaker

Studio Sandra Gortemaker richt zich op vrouwelijk ondernemers die graag ondersteuning willen in hun online marketing. Ik help je bij het opzetten van je WordPress website, landingspagina en/of salespagina en je MailChimp campagnes. Ik ben hierin jouw sparringpartner en coach.

Is er nog iets onduidelijk of heb je een andere vraag? Laat het me weten door een reactie achter te laten.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Contactgegevens

Btw-ID NL001413297B10
KVK 53368959

Post- en vestigingsadres

Timmermeesterslaan 44 8014 EM Zwolle

Bezoekadres / Kantoor

Esdoornstraat 3 8021 WB Zwolle

%d bloggers liken dit:

Alle (cookie)scripts worden geblokkeerd totdat je klikt op accepteren. meer info

Onderaan in de footer vind je een link naar mijn privacy- en cookiebeleid. Hieronder een korte samenvatting:

Alle gegevens die worden verzameld via Google Analytics zijn anoniem. Ik hoef hier geen toestemming voor te vragen, maar het is wel fijn om te weten dat ik dit gebruik.
Maak je gebruik van formulieren of de reactiemogelijkheid op deze website. Dan maak je automatisch de keuze voor het plaatsen van cookies. Het is niet mogelijk deze opties te gebruiken zonder het plaatsen van cookies. Uiteraard bewaar ik je mail of aanvraag niet langer dan nodig. Reacties en aanvragen via een formulier op worden opgeslagen op mijn website en in mijn Gmail.
Meld je je aan voor een MailChimp nieuwsbrief dan worden deze gegevens opgeslagen in mijn MailChimp account, totdat je jezelf weer afmeld.

Sluit venster