Webtoegankelijkheid is belangrijk. Het zorgt er namelijk voor dat jouw website bruikbaar wordt voor iedereen, ook voor bezoekers die bijvoorbeeld dyslexie of (kleuren)blindheid hebben. Hoe je dit doet? Door bepaalde keuzes te maken in het design, maar ook door andere technieken toe te passen. In dit blog vertellen wij je graag meer over webtoegankelijkheid en hoe je dit toepast op jouw website.
Webtoegankelijkheid is belangrijk, omdat je er met een toegankelijke website voor zorgt dat iedereen jouw website kan bezoeken. Denk dan vooral aan mensen met slecht of geen zicht, kleurenblindheid, doofheid of gehoorverlies, cognitieve handicaps en lichamelijke handicaps. Wanneer jouw website niet is gebouwd met deze groep bezoekers in gedachten, is de kans groot dat zij problemen zullen ervaren tijdens het navigeren. In sommige gevallen is het zelfs mogelijk dat zij helemaal geen gebruik kunnen maken van jouw website.
Wanneer een groep bezoekers geen gebruik kan maken van jouw website omdat deze niet toegankelijk genoeg is, is dit niet alleen jammer. Het zorgt namelijk ook voor een minder groot bereik. Naast de hierboven genoemde doelgroep hebben ook senioren, mensen met dyslexie en mensen die Nederlands als tweede taal spreken baat bij een toegankelijke website.
Naast dat een toegankelijke website essentieel is voor gebruikers met een beperking, kan het ook voordelen opleveren op het gebied van SEO. Sterker nog, deze twee disciplines versterken elkaar en hebben een gezamenlijk doel: het bieden van een goede gebruikerservaring.
Het vergroten van de webtoegankelijkheid kan leiden tot een groei in jouw organisch verkeer. Organisch verkeer is het verkeer dat via de zoekresultaten van een zoekmachine op jouw website terechtkomt. Het verbeteren van de toegankelijkheid van jouw website zorgt er namelijk voor dat niet alleen mensen, maar ook zoekmachines als Google eenvoudiger door jouw website kunnen navigeren. Zo scant Google de website, de navigatieknoppen en de hiërarchie. Een goede koppenstructuur zorgt ervoor dat gebruikers kunnen kiezen welk deel van de tekst ze willen lezen, maar ook dat Google begrijpt wat de hoofdonderwerpen van de tekst op jouw website zijn.
Daarnaast berekent Google de rankings van zoekresultatenpagina’s voortdurend. Websites worden geëvalueerd op basis van de bruikbaarheid en gebruikerservaring. Is jouw website goed toegankelijk en dus bruikbaar voor iedereen? Dan eindigt jouw website hoger in de zoekresultaten van Google en is deze eerder zichtbaar dan websites die minder toegankelijk zijn.
Om het mogelijk te maken dat iedereen zijn of haar website zo toegankelijk mogelijk kan maken, heeft World Wide Web Consortium (W3C) richtlijnen ontwikkeld voor de toegankelijkheid van webcontent. Deze richtlijnen staan beschreven in de Web Content Accessibility Guidelines (WCAG). De eerste versie hiervan werd in 2008 gepubliceerd. Tien jaar later, in 2018, is versie 2.1 uitgekomen. Deze versie is op dit moment de leidende variant.
De richtlijnen uit de WCAG zijn opgedeeld in drie verschillende niveaus, namelijk:
De richtlijnen uit niveau A vormen de basis voor webtoegankelijkheid en bevatten 30 criteria. Deze zijn over het algemeen redelijk eenvoudig te behalen. Voor niveau AA komen hier nog 20 criteria bij, waardoor webcontent dus in totaal aan 50 criteria moet voldoen. Deze zijn iets minder eenvoudig. Het laatste niveau, AAA, bestaat uit nog meer richtlijnen. In totaal kent dit niveau 73 richtlijnen. Dit niveau is best lastig te behalen en het merendeel van alle websites voldoen ook niet aan dit niveau.
Websites van overheidsinstanties zijn verplicht om te voldoen aan zowel niveau A als aan AA. Niveau AAA is niet verplicht.
Voldoet jouw website aan niveau A of AA van de WCAG? Dan kun je via Stichting Drempelvrij.nl in aanmerking komen voor een waarmerk. Een van de aangesloten inspectie-instellingen gaat jouw website inspecteren. Kom je door de inspectie heen en kun je aantonen dat je jouw website blijft ontwikkelen zodat jouw website blijft voldoen aan het gekozen niveau? Dan mag je het logo van Stichting drempelvrij.nl op jouw website plaatsen. Daarnaast kom je in het register van Waarmerkdragers te staan. Het waarmerklogo is drie jaar geldig.
De richtlijnen van de WCAG zijn opgedeeld in vier hoofdcategorieën: waarneembaar, bedienbaar, begrijpelijk en robuust. Iedere categorie heeft een lijst met criteria waarbij per criterium wordt aangegeven om welk niveau het gaat: A, AA of AAA.
Voorbeelden van criteria voor niveau A zijn:
Voorbeelden van criteria voor niveau AA zijn:
Voorbeelden van criteria voor niveau AAA zijn:
De volledige lijst met richtlijnen voor toegankelijkheid van webcontent vind je op de website van de WCAG.
Ben je na het lezen van bovenstaande richtlijnen benieuwd of jouw website in aanmerking komt voor een waarmerk? Of wil je weten aan welke criteria jouw website voldoet? Dit kun je eenvoudig zelf testen. Er zijn namelijk verschillende manieren om de toegankelijkheid van jouw website te testen. De makkelijkste manier is om gebruik te maken van de browserextensie WAVE.
Om je een beeld te geven van hoe deze browserextensie werkt, hebben wij onze eigen homepage getest. WAVE heeft onze homepage gecontroleerd op verschillende punten die te maken hebben met toegankelijkheid. Deze punten zijn onderverdeeld in zes categorieën:
Deze zes categorieën zijn vervolgens opgesplitst in fouten, waarschuwingen en features. Per categorie staat uitgebreid beschreven welke verbeterpunten er zijn én hoe je deze oplost.
Een groot voordeel van WAVE is dat elk verbeterpunt op de pagina visueel wordt aangeduid door middel van een icoon. Door op een icoon te klikken, krijg je een beschrijving van het probleem te zien. Bovendien kan WAVE ook de exacte locatie van het probleem weergeven in je broncode, zodat je het direct kunt aanpassen.
Een screenshot van de homepage van Vizien, geëvalueerd door de WAVE-extensie.
In bovenstaande afbeelding zie je dat we de homepage van onze eigen website hebben geëvalueerd met behulp van de WAVE-extensie. Een verbeterpunt aan onze homepage is de oranje knop. Volgens WAVE is het contrast tussen de tekst en de achtergrond te laag. Links in beeld staat beschreven wat dit betekent en waarom het belangrijk is om dit aan te passen. Onderaan staat een preview van het stukje HTML-code waar de knop zich bevindt.
Nu we onze homepage onder de loep hebben genomen, is het ook leuk om te kijken naar populaire websites. Want hoe zit het eigenlijk met hun toegankelijkheid? Je verwacht natuurlijk dat websites met miljoenen, of zelfs miljarden, gebruikers hun zaakjes goed op orde hebben. Je raadt het al: in de praktijk blijkt dit toch niet altijd zo te zijn. Zo is een aanzienlijk percentage van populaire websites zoals Instagram, Telegram en Facebook niet toegankelijk, blijkt uit onderzoek van Tooltester. Met name het inlogscherm is vaak al een struikelpunt. Dit betekent dat bezoekers met een visuele beperking hierop al zouden kunnen vastlopen.
Enkele veel voorkomende fouten zijn onder andere:
Er zijn een hoop punten die je zelf kunt doorvoeren om jouw website toegankelijker te maken. Wij geven je graag een aantal tips die een positieve invloed hebben op de toegankelijkheid van jouw website.
Tip 1: voeg alt-tags toe aan afbeeldingen.
Een alt-tag wordt gebruikt om een afbeelding te beschrijven. Door een duidelijke beschrijving toe te voegen aan de alt-tag kan iedere lezer zien waar de afbeelding over gaat.
De alt-tag voeg je toe aan het afbeeldingselement in jouw HTML-code. Het ziet er zo uit:
Tip 2: voeg labels toe aan formuliervelden.
Door labels toe te voegen aan formuliervelden, maak je duidelijk wat de doelen van de invoervelden zijn. Hierdoor worden formulieren makkelijker te begrijpen voor schermlezers.
Labels kun je dus het beste voor ieder veld in jouw formulier toevoegen. Het ziet er zo uit:
Tip 3: zorg voor voldoende contrast tussen de elementen.
Door te zorgen voor voldoende contrast tussen verschillende elementen, maak je teksten beter leesbaar.
Tip 4: geef hyperlinks een beschrijvende naam.
Gebruik geen ‘klik hier’ in jouw teksten, maar geef hyperlinks een beschrijvende naam. Is dit lastig of niet mogelijk? Zorg er dan voor dat je jouw hyperlink een label meegeeft met een beschrijving van de actie van de link.
De actie van de hyperlink is in dit geval eenvoudig uit de context op te halen.
Bij deze knop is het niet direct duidelijk wat er gedownload kan worden.
Door een ‘aria-label’ toe te voegen, beschrijf je wat de knop doet.
Om enkele verbeterpunten in de praktijk te brengen, hebben wij onze homepage nog een keer laten evalueren door de WAV E-extensie. We hebben dit keer drie verbeterpunten doorgevoerd die essentieel zijn voor bezoekers die gebruik maken van een screenreader.
Het eerste punt betreft de social media-iconen in de footer van de website. Deze iconen linken naar onze social media pagina’s. Omdat deze links geen tekst bevatten, hebben screenreaders geen idee om wat voor soort link het gaat. Dit kunnen we oplossen door een aria-label toe te voegen. Hierin plaatsen we een tekstuele beschrijving van het doel van de link.
Voor en na het toevoegen van een aria-label
Als tweede wijst de WAVE-extensie ons op een aantal partnerlogo’s in de footer die niet zijn voorzien van alt-tags. Dit is wederom nadelig, omdat screenreaders zonder alt-tags geen idee hebben om wat voor soort afbeeldingen het gaat. Door een unieke alt-tag toe te voegen aan ieder logo lossen wij dit probleem op.
Voor en na het toevoegen van een alt-tag
Voor het laatste verbeterpunt moeten we de mobiele versie van de website bekijken. De knop rechtsboven die verantwoordelijk is voor het openen en sluiten van het menu bevat namelijk geen tekst. Dit is op zich niet vreemd: het is tenslotte een icoon. Maar omdat het om een navigatie-element gaat, is het belangrijk dat we deze knop een label meegeven. Zo weten screenreaders namelijk dat het om een navigatie-element gaat.
Voor en na het toevoegen van een label
Wil je meer weten over webtoegankelijkheid, omdat je dit wil toepassen op jouw website? Of heb je hulp nodig bij het toegankelijk maken van jouw website? Neem gerust contact met ons op. Wij helpen je graag!
Waarom zou je je website aanmelden bij zoekmachines zoals Google? Eigenlijk heel simpel. Je wilt online gevonden worden en bezoekers...
Zoekmachineoptimalisatie is dé manier om jouw website te optimaliseren, zodat je beter gevonden wordt in de zoekresultaten van een zoekmachine...
Waarom zou je je website aanmelden bij zoekmachines zoals Google? Eigenlijk heel simpel. Je wilt online gevonden worden en bezoekers...
Zoekmachineoptimalisatie is dé manier om jouw website te optimaliseren, zodat je beter gevonden wordt in de zoekresultaten van een zoekmachine...
Ben jij op zoek naar een zoekmachine marketingbureau dat wél waarmaakt wat ze zeggen? Dan ben jij onze klant. Zin om samen te werken? Wij maken graag kennis met jou en je bedrijf.
Neem contact op
