Web Development voor mensen met een beperking

Uit onderzoek in het kader van de 'Week van de Toegankelijkheid' 2018 is wederom naar voren gekomen dat veruit de meeste websites niet of nauwelijks toegankelijk zijn voor blinden, slechtzienden en mensen met een andere beperking. Daar deze groep mensen bijvoorbeeld vaak gebruik maakt van screenreaders, is het van belang dat je website ook op dergelijke devices toegankelijk is.

Naast het feit dat toegankelijkheid de basis moet zijn voor een goede website, liggen hier ook kansen. Potentiële klanten zullen jouw website prefereren boven die van een concurrent. Daarnaast zijn toegankelijke websites beter vindbaar in zoekmachines. In dit artikel leggen we uit hoe je je website kunt laten voldoen aan de WCAG 2, ofwel de Web Content Accessibility Guidelines versie 2.0.

Binnen de WCAG zijn drie levels gespecificeerd, A, AA en AAA. Hoe hoger het level, hoe 'strenger' de criteria. In de regel genomen is Level A niet of nauwelijks merkbaar in de interface. Level AAA heeft daarentegen een dusdanig hoge impact op het design, dat het voor veel websites bijna niet te realiseren valt. Stel jezelf echter altijd als doel om met je beschikbare middelen en budget een zo toegankelijk mogelijke website te realiseren. Hoe je dit doet, lees je hieronder.

Design, techniek en tekst

De optimalisatie van je website is onder te verdelen in drie categorieën: design, techniek en tekst. In dit artikel focussen we ons op de eerste twee punten.

Design

1. Contrast

Zorg voor voldoende contrast tussen de voor- en achtergrondkleur. De contrastratio voor- en achtergrondkleur dient 4,5:1 (voor level AA) te zijn.

2. Gebruik van kleuren

Informatie die wordt overgebracht door kleurverschillen dient ook in tekst beschikbaar te zijn. Zorg in deze gevallen voor extra identificatie. Zoals de toevoeging van een sterretje bij een verplicht veld, naast bijvoorbeeld de kleur rood.

3. Navigatie

Zorg voor consistentie als het gaat om de naamgeving, styling en positionering van navigatie-elementen. Zorg voor meerdere navigatie-opties zoals een zoekfunctie of sitemap. Help gebruikers waar ze zich op de website bevinden middels breadcrumbs en duidelijke koppen.

4. Duidelijk herkenbare Interactieve elementen

Interactieve elementen zoals links en buttons moeten duidelijk te identificeren zijn. Verander het uiterlijk van deze elementen wanneer je hier met je muis overheen gaat, je deze focust met je keyboard of activeert op een touch-screen. Elementen die gefocust zijn, moeten worden aangeduid middels een 'focus-ring'.

5. Labels bij formulieren

Zorg ervoor dat alle velden in formulieren beschikken over beschrijvende labels. Labels worden normaal gesproken links of boven het invoerveld getoond, behalve bij checkboxes en radio buttons waarbij labels rechts worden weergegeven.

6. Feedback bij interacties

Voorzie de gebruiker van duidelijke feedback wanneer er iets fout gaat op de pagina. Belangrijke feedback die een actie van de gebruiker vereist, moet in een prominente stijl worden weergegeven. Maak duidelijk wat het probleem is, verschaf specifieke, begrijpelijke uitleg en suggereer verbeteringen. Ook hiervoor gaat punt 2 over het gebruik van kleuren op.

7. Groepeer gerelateerde inhoud

Maak gebruik van titels en witruimte om gerelateerde inhoud te groeperen. Hierdoor is de inhoud van de pagina makkelijker te scannen en begrijpen.

8. Design voor verschillende schermgroottes

Ook wel 'responsive design' genoemd. Je website dient zich aan te passen aan het het schermformaat van de gebruiker. De hoofdelementen zoals bijvoorbeeld de header en navigatie moeten dusdanig worden aangepast dat ze optimaal gebruik maken van de beschikbare ruimte.

Een toegankelijkheidsanalyse
van je website?

neem contact met ons op

Techniek

1. Beschrijvende tekst voor afbeeldingen en iconen

Alle informatieve en functionele afbeeldingen en iconen op je website moeten worden voorzien van een beschrijvende tekst. Voor afbeeldingen kun je hiervoor het alt-attribuut gebruiken.

2. Definiëer de taal van je pagina

Geef de primaire taal van elke pagina aan middels het lang-attribuut in de html-tag van je pagina. Gebruik het lang-attribuut op specifieke elementen als deze afwijken van de hoofdtaal.

3. Gebruik van HTML-elementen om de structuur te duiden

Maak gebruik van de juiste HTML5-tags om de inhoud van je pagina beter te structureren. Waar nodig kun je elementen voorzien van WAI-ARIA roles om de betekening extra te duiden.

4. Geef de leesvolgorde weer in de code-volgorde

De inhoud van de pagina dient een logische volgorde te hanteren. Dit geldt voor zowel de zichtbare inhoud als de code.

5. Schrijf responsive code

Schrijf je code dusdanig dat de website onder alle omstandigheden goed bruikbaar blijft. Denk hierbij aan situaties waarbij wordt ingezoomd, of wanneer de website wordt geraadpleegd op screenreaders. Zo is het bijvoorbeeld van belang dat alle lettertypegroottes worden aangegeven met em-units waardoor browsers de inhoud op de juiste manier kunnen schalen.

6 . Zorg ervoor dat alle interactieve elementen toetsenbord-toegankelijk zijn

Houdt er bij de ontwikkeling van je website rekening mee dat je elementen zoals menu's, mouseover informatie, uitklapbare accordions en media spelers moet kunnen bedienen met het toetsenbord.

7. Vermijd CAPTCHA waar mogelijk

CAPTCHA zorgt voor veel problemen bij gebruikers. Maak waar mogelijk gebruik van alternatieven om te controleren of de invoer was gedaan door menselijke interactie.

Wanneer je bij de ontwikkeling van je website rekening houdt met bovenstaande punten, ben je goed op weg om ook de mindervalide bezoekers van je website te bedienen.

Eigen ervaringen

Voor enkele van onze klanten hebben we de website WCAG-compliant gemaakt. Eén daarvan is AC Hotels, onderdeel van Marriott. Het resultaat is een website die de balans bewaart tussen toegankelijkheid en aantrekkelijk, visueel design. Bekijk de case hier.

Test je eigen website

Er zijn verschillende Google Chrome extensies waarmee je kunt testen of je website voldoet aan alle toegankelijkheidseisen. Een daarvan is de WAVE Evaluation Tool. Deze tool geeft visuele feedback over de toegankelijkheid van de inhoud van je website.

Je website WCAG-compliant laten maken

Diffuse heeft uitgebreide ervaring in het ontwikkelen van toegankelijke websites. Neem contact met ons op voor een toegankelijkheidsanalyse van je website. Je ontvangt dan een gedetailleerd adviesrapport.

Uiteraard kun je ook bij ons terecht voor het geschikt maken van je website voor mensen met een beperking.

Benieuwd wat wij
voor je kunnen betekenen?