Handleiding voor digitale toegankelijkheid

Het onderwerp ‘web accessibility’ en de benodigde aanpassingen aan websites kregen onvoldoende prioriteit.

• Waarom moeten we dat nu wel doen en, nog belangrijker, hoe kunnen we dat doen?

• Wat levert digitale toegankelijkheid op?

• Een website zonder drempels, hoe bereik je dat?

• De basisprincipes van toegankelijk webdesign

• Zelf de toegankelijkheid van je website testen

• Hoe wij zorgen voor een toegankelijke website

• Oké, en nu?

Van oudsher is het internet een manier om informatie uit te wisselen. Van origine ontwikkeld om militaire- en later, academische gegevens uit te wisselen werd het internet halverwege de jaren ‘90 omarmd door het grote publiek. Tegelijkertijd volgden de eerste e-commerce pioniers die producten op internet verkochten. In die tijd waren website eigenaren vaak ook de developers, en waren technieken om een bepaalde layout te bereiken nog niet zo geavanceerd als tegenwoordig. Omdat je al heel blij was een layout werkend te krijgen voor de twee grote browsers was je als developer en webshop eigenaar niet echt bezig met de toegankelijkheid van je website.

Vooral in het bedrijfsleven en e-commerce is web accessibility de eerste paar jaar een ondergeschoven kindje geweest. Omdat de industrie niet volwassen genoeg was om de voordelen meetbaar te maken en naar omzet door te vertalen. Dat gaat nu veranderen.

Tijdens een onderzoek van de ShoppingTomorrow expertgroep ‘Opportunities in e-accessibility’ in 2018 werd aan e-commerce professionals gevraagd of ze aandacht besteedden aan accessibility. Tweederde van de ondervraagden gaf aan hier niets mee te doen. Simpelweg omdat men niet met het onderwerp bekend was of er binnen de organisatie geen aandacht aan geschonken werd.

Tegenwoordig baseren we onze keuzes betreft ontwikkeling op basis van analytische data en uit die data is niet klaarblijkelijk dat we een groep gebruikers als het ware vergeten. Het aandeel gebruikers dat op alternatieve manieren navigeert is namelijk niet goed te meten in tools als Google Analytics. Zonde, want het aanspreken van een substantiële nieuwe doelgroep is uit business oogpunt waardevol. Over hoeveel gebruikers gaat het precies?

Volgens verschillende studies kunnen we er vanuit gaan dat het wereldwijde aandeel internetgebruikers met een beperking ongeveer 20 procent bedraagt. In Nederland zijn er ongeveer 1.5 miljoen doven en slechthorenden en ongeveer 300.000 blinden en slechtzienden. Door deze groep niet te bedienen laat je simpelweg omzet liggen.

Naast omzet, zorgt een hoge accessibility voor een hogere positie in Google. Zoekmachines kunnen je website namelijk makkelijker indexeren, vooral omdat de de structuur van je content en tekstuele alternatieven op afbeeldingen, audio/video of illustraties goed op orde zijn. Je content is beter doorzoekbaar en de kwaliteit van je interne links is hoger. Een win-win situatie!

Uiteraard zijn er vele gradaties aan beperkingen en kunnen niet alle aspecten van een webshop 100 procent toegankelijk gemaakt worden. In deze blog brengen we in kaart waar kansen liggen om je webshop toegankelijker te maken.

Nog even terug, hoe wordt ‘web accessibility’ gedefinieerd: het is de mate van toegankelijkheid van je website en de graad waarop eindgebruikers op je website kunnen navigeren, lezen en begrijpen. Onder die eindgebruikers vallen gebruikers met een beperking op visueel, auditief, motorisch en cognitief gebied. Daarnaast kan toegankelijkheid ook betrekking hebben op ouderen, (tijdelijke) gebruikers zonder muis/toetsenbord/touch-navigatie en gebruikers met een trage internetverbinding. Om ervoor te zorgen dat je geen grote groep uitsluit zijn er per type beperking bepaalde maatregelen die het gebruik van je website makkelijker of überhaupt mogelijk maken.

Met welke beperkingen moet je rekening houden?

Visuele beperkingen

Denk aan volledig blinde gebruikers, slechtziende gebruikers, kleurenblinde gebruikers, dyslectici of epileptici. Slechtziende gebruikers kunnen ervoor kiezen om de grootte van de tekst aan te passen of een ander basis-font te kiezen zodat ze het beter kunnen lezen. Blijft de layout van je website dan nog overeind? Gebruikers die kleurenblind zijn of slechtzienden hebben veel profijt van een goede contrast ratio tussen tekst- en achtergrondkleur. Epileptici kunnen in hun browser aangeven dat ze minder beweging willen zien op websites. Houd voor deze groep rekening met flikkerende animaties, flitsende gifjes of video’s.

Auditieve beperkingen

Hieronder vallen de doven en slechthorenden. Deze groep gebruikers is erbij gebaat dat audio en video voorzien is van een transcriptie en/of ondertiteling. Tegelijkertijd zijn deze aanpassingen ook fijn voor gebruikers die tijdelijk geen geluid kunnen afspelen, bijvoorbeeld wanneer ze in een openbare ruimte werken.

Motorische beperkingen

Denk aan gebruikers die geen muis kunnen gebruiken, gebruikers die niet snel kunnen bewegen of gebruikers met beperkte motorische controle. Deze groep gebruikers kunnen volledig afhankelijk zijn van toetsenbordnavigatie of zijn bijvoorbeeld niet in staat om door smalle dropdown-menu’s heen te bewegen die enkel kunnen worden geactiveerd door de muis over het menu te bewegen. Zorg voor een toegankelijke dropdown die getriggerd wordt door een click en middels toetsenbord-navigatie kan worden bereikt.

Cognitieve beperkingen

Denk aan gebruikers met leerproblemen, gebruikers die snel afgeleid zijn of gebruikers die slecht grote hoeveelheden informatie kunnen opnemen. Voor deze gebruikers is helderheid en duidelijkheid heel belangrijk. Herhaal belangrijke informatie van pagina tot pagina en zorg voor een duidelijke structuur en volgorde van content. Maak gebruik van video of illustraties om zaken uit te leggen die lastig in woorden te vatten zijn.

Hieronder vind je enkele basisprincipes die je eenvoudig op je website kunt implementeren, zonder te veel het design van je site te beïnvloeden.

Relevante alternatieve teksten

Maak alternatieve teksten beschikbaar voor gebruikers die non-tekstuele elementen op een website niet kunnen interpreteren. Denk hierbij aan afbeeldingen of iconen. Visueel beperkte gebruiker kunnen tools als screenreaders (zoals VoiceOver of Jaws) gebruiken om een website voor te laten lezen. Wanneer een afbeelding wordt getoond zonder toepasselijke alternatieve tekst mist de gebruiker dus deze informatie. Een knop met enkel een icoontje kan voor bepaalde gebruikers lastig te interpreteren zijn. Tekstuele alternatieven hoeven niet zichtbaar te zijn voor overige gebruikers.

Logische documentstructuur

Een logische, semantische opmaak waarin je content weergeeft in de juiste elementen is toegankelijker dan een pagina die alleen bestaat uit paragrafen. Structureer je pagina in headings, lists, enzovoort, zodat de content meer betekenis krijgt. Een goede manier om dit te testen is door de CSS en JavaScript op je pagina uit te schakelen. Is de structuur van je pagina nog steeds logisch door alle visuele toevoegingen weg te nemen?

Toegankelijke formulieren

Zorg dat elk formulierelement is voorzien van een corresponderend label. En dat de gebruiker in staat is om zonder muis door de relevante velden en elementen kan navigeren en het formulier kan inzenden. Maak validatie-errors duidelijk en zorg dat de gebruiker de errors snel kan herstellen.

Betekenisvolle linktekst

Met andere woorden: ‘Klik hier’ is geen goede linktekst. Linkteksten moeten los van de overige content nog steeds logisch zijn. Om navigatie te bespoedigen, lezen sommige screenreaders eerst enkel de links op de pagina voor. Dit betekent dat het van belang is dat linkteksten voldoende context bieden zodat de gebruiker direct begrijpt waar de link naartoe verwijst.

Tekstuele alternatieven voor video of audio

Is een video van groot belang in je productpresentatie? Voorzie gebruikers van een tekstueel alternatief zoals een transcriptie, of indien mogelijk; zorg voor (toegankelijke) ondertiteling.

Kleur als betekenis

Gebruik je kleur om, bijvoorbeeld, een goed/fout vergelijking te tonen? Maak dit dan ook duidelijk zodat de kleuren niet nodig zijn om de betekenis van de tekst te interpreteren..

Ondanks dat de situaties voor de meeste gebruikers al als goed of fout kunnen worden geïnterpreteerd is het beter om expliciet aan te geven welke situatie goed of fout is.

Skip naar inhoud

Voorzie gebruikers op elke pagina van een interne link naar de hoofd-content van de pagina zodat gebruikers, bijvoorbeeld, niet op elke pagina door het menu, of andere repetitieve inhoud heen hoeven te navigeren.

Zorg voor duidelijke inhoud

Zorg dat de inhoud van je website makkelijk te begrijpen is. Dat doe je met een duidelijke schrijfstijl, duidelijke fonts en door gebruik te maken van opmaaktags als headings en lists. Maak ook gebruik van voldoende witruimte en een goede regelafstand om teksten duidelijk leesbaar te maken. Houd rekening met het aantal karakters op één regel. Het optimale aantal karakters per regel ligt tussen de 50 á 60 karakters.

Gebruik standaarden

Stel, je wilt je e-commerce platform updaten en er moeten honderden blogposts worden gemigreerd. Dan is het heel fijn als je enkel de kale inhoud kunt exporteren, zonder allerlei opmaak die nog gerelateerd is aan je oude platform. Zorg dus dat de HTML van je website valide is en dat de styling volledig door CSS wordt bepaald, in plaats van in de HTML of in JavaScript. Door op deze manier de content van de vormgeving te scheiden, is de data op je site flexibeler.

Toegankelijke JavaScript

Zorg dat de acties die worden getriggerd door een muis ook door een toetsenbord kunnen worden aangeroepen. Idealiter zorg je ervoor dat je pagina functioneert zonder JavaScript of informeer je dat JavaScript benodigd is om bepaalde functies uit te voeren wanneer de gebruiker de JavaScript niet kan interpreteren.

Om de correcte implementatie van aanpassingen op het gebied van web accessibility te testen kun je gebruik maken van bepaalde browser extensies en deze testen in de browser. Onderstaand vind je enkele tools en methodes:

• Axe: Browser extensie (Chrome of Firefox) die de huidige pagina scant op mogelijke aandachtspunten.

• Google Lighthouse: Browser tool (Chrome) waarmee je onder andere de performance van je website kunt testen. Binnen de testresultaten kun je ook basis accessibility pijnpunten blootleggen. Met ons Performance Dashboard hebben we bij Bluebird Day deze tests geautomatiseerd.

• REVENGE.CSS: Dit is een bookmarklet welke je in de bookmarks balk van je browser kunt zetten. Nadat je erop klikt wordt de huidige pagina gescand op accessibility issues.

• Screenreader: Installeer een screenreader of gebruik de voorleesfunctie in je browser en test de volgorde en inhoud van de voorgelezen tekst van je website.

• Toetsenbord: Test alle flows die je normaliter ook in je end-to-end tests doorloopt eens met volledige toetsenbordnavigatie.

De volledige lijst is terug te lezen op: web accessibility in mind.

Simpelweg de website gebruiken zoals je eindgebruikers dit doen, is de beste test voor je layout. Probeer feedback van zoveel mogelijk gebruikers in te winnen en vraag om de mening van bekende gebruikers met een beperking. Of test het zelf met een blinddoek op of een koptelefoon met noise-cancelling.

Tijdens een recente sprint voor onze klant Brabantia hebben we de algemene website performance van de shop compleet onder handen genomen. Met behulp van ons Performance Dashboard hebben we vanuit een 0-meting verschillende punten van de website verbeterd. Ons performance dashboard biedt naast periodieke snelheidsmetingen ook accessibility metingen met behulp van Google Lighthouse. Omdat de metingen een aantal keer per dag worden verricht zagen we realtime een gemiddelde verbetering van de accessibility scores op de verschillende soorten pagina’s van de shop. Zo is www.brabantia.com een stuk toegankelijker voor de groep gebruikers met beperkingen.

Heb je al een website staan en is er tijdens de ontwikkeling geen rekening met web accessibility gehouden? Dan is het wat lastiger om je website te optimaliseren op toegankelijkheid. Toch kun je al kleine wijzigingen maken waardoor je website een stuk toegankelijker wordt. Probeer de drempels te vinden, de quick wins te identificeren en de bottlenecks te verlagen of weg te nemen.

Tijdens de ontwikkeling van nieuwe features of een nieuwe website is het goed om periodiek accessibility tests uit te voeren door middel van scans, browser extensies of hands-on tests. Je development team kan rekening houden met accessibility tijdens de ontwikkeling en code-reviews. Zo kun je al tijdens de ontwikkeling van je website de grootste accessibility issues voor zijn en waarborgen dat je website volledig inclusief is opgezet.

Daarnaast is de keuze voor het juiste e-commerce framework cruciaal en kunnen veel accessibility issues al voor je zijn opgelost tijdens de ontwikkeling van open- of closed source software. Wil je hierover meer informatie? Neem dan gerust contact met ons op. We kijken dan mee naar jouw specifieke (of gewenste) omgeving.