Vijf stappen richting een web voor iedereen

Tegenwoordig is het een steeds belangrijker onderwerp: webtoegankelijkheid. Maar voor wie is webtoegankelijkheid nou eigenlijk van toepassing en nog belangrijker, hoe creëer je een toegankelijk web? De afgelopen jaren heb ik diverse WCAG certificaten gehaald en veel gewerkt voor onder andere de Nederlandse overheid / semi-overheid, waar webtoegankelijkheid verplicht is. Met de opgedane kennis heb ik een top 5 opgesteld met tips welke altijd toepasbaar zijn en welke ik zelf dagelijks toepas tijdens mijn werk als UX/UI-designer bij Sping.

Een smartphone (in fel zonlicht) is ook een beperking

Een toegankelijk web houdt in dat iedereen het web kan gebruiken, ongeacht of deze persoon bepaalde beperkingen heeft waardoor hij een applicatie niet op de ‘normale’ manier kan gebruiken. Hierbij is het belangrijk om te begrijpen dat er diverse vormen van beperkingen zijn. De meest logische met betrekking tot het web zijn bijvoorbeeld slechtziendheid of doof zijn, alleen zijn dit niet de enige vormen. Een ander soort beperking waar mensen geregeld last van hebben, maar niet als dusdanig is geclassificeerd, is wanneer je buiten in de zon staat met je smartphone in je hand. Op dat moment is jouw scherm minder goed of niet leesbaar en is de content op je scherm dus niet toegankelijk voor jou. Dit is een voorbeeld van een situationele beperking; je hebt er in een specifieke situatie last van. Naast deze categorie zijn er nog twee andere categorieën: permanent en tijdelijk.

In Nederland zijn er tussen de 2.000.000 en 4.500.000 mensen met een vorm van permanente beperking:

• 500.000 mensen met een visuele beperking
• 500.000 mensen met een auditieve beperking
• 1.100.000 mensen met een verstandelijke beperking
• 1.600.000 mensen met een fysieke beperking
• 800.000 mensen met dyslexie
• 1.500.000 laaggeletterden

Door jouw website toegankelijk te maken zorg je ervoor dat iedereen, in iedere situatie, zonder problemen jouw website kan gebruiken.

“Webtoegankelijkheid is onmisbaar voor vele bezoekers en nuttig voor iedereen.”

Webtoegankelijkheid levert je ook geld op

Naast het feit dat webtoegankelijkheid ervoor zorgt dat iedereen jouw website kan gebruiken, zorgt het er ook voor dat je website (meer) geld kan opleveren.

Zoals ik hierboven al vertelde, zorgt toegankelijkheid ervoor dat meer mensen je website of webshop kunnen gebruiken. Als mensen door een beperking geen producten kunnen bestellen, dan verlies je dus geld hierdoor.

Een tweede manier waardoor je meer geld kan verdienen met een toegankelijke website is door middel van je vindbaarheid via zoekmachines. Zoekmachines vinden het fijn als je website toegankelijk is. Zoekmachines kunnen je website makkelijker vinden als je onder andere rekening houdt met een goede paginastructuur, het toevoegen van audio- en videobeschrijvingen, het toevoegen van alternatieve teksten voor afbeeldingen en de leesbaarheid van de content vergroten.

Top 5 easy wins

Om te weten of je website toegankelijk is, bestaat er een set met algemene richtlijnen. Deze set met richtlijnen is bekend als de WCAG (Web Content Accessibility Guidelines). De onderstaande top 5 is mijn interpretatie ervan en heeft mij veel gebracht.

1. Gebruik voldoende contrast

Kan je alle elementen goed zien? En wat als je dit in fel zonlicht bekijkt? Dit zijn vragen die je jezelf altijd moet stellen wanneer je een design maakt. Contrast is van toepassing op tekst maar ook op interactieve elementen zoals buttons.

Gelukkig is contrast te meten. Wil je weten of de voorgrond en achtergrond voldoende contrast hebben? Maak dan gebruik van tools zoals de contrast checker van webaim. Belangrijk: een belangrijke kanttekening bij het gebruik van een contrast checker is dat je niet altijd blind moet vertrouwen op de resultaten. Gebruik je designers verstand én blijf je ontwerpen altijd testen met gebruikers.

2. Kleur alleen mag geen informatie overbrengen

Kleur is een belangrijk element om informatie over te brengen. Het gevaar dat hierbij komt kijken is kleurenblindheid. Kleurenblindheid komt voor bij 8% van alle Nederlandse mannen en 0.5% van alle Nederlandse vrouwen. Wanneer iemand kleurenblind is, dan ziet deze persoon een andere kleur dan iemand zonder kleurenblindheid.

Wanneer je kleurwaarde gebruikt om in je ontwerp informatie over te brengen, bestaat de kans dat deze informatie niet door iedereen wordt opgenomen. Zorg dat kleur niet als enige informatiedrager dient, maar ondersteun het met iconen, labels of andere visuele signalen.

3. Maak gebruik van de webstandaarden

Bij een toegankelijke website gaat het niet alleen om visuele aspecten zoals kleur en contrast, maar ook over het juist gebruiken van de beschikbare code / componenten. Wanneer je gebruik maakt van de standaarden zoals HTML5 semantiek en elementen, is webtoegankelijkheid op veel fronten vaak al vanzelf goed ingericht. Gebruik elementen dus waar ze voor bedoeld zijn — een knop moet technisch een <button> zijn, een link een <a>.

4. Gebruik een logische structuur en volgorde

Slechtziende of blinde gebruikers maken gebruik van zogenoemde screen readers. Screen readers zijn hulpsoftware welke pagina’s scannen en alles stap voor stap voorlezen aan de gebruikers. Om een screen reader goed te laten werken is het van belang om je website goed te structureren en te voorzien van een correcte volgorde.

Naast de leesvolgorde is de heading structuur op een pagina van belang. Belangrijke regels bij het gebruik van headings zijn:

• Begin altijd met een H1 op elke pagina.
• Sla nooit headings over.

5. Test ook met alleen je toetsenbord (dus geen muis)!

Voor veel gebruikers is het vanzelfsprekend om websites te gebruiken met een muis en tekst in te vullen met een toetsenbord. Vaak wordt vergeten dat dit niet voor iedereen mogelijk is. Voor al deze mensen is het van belang dat een website te gebruiken is met alleen een toetsenbord. Een aantal belangrijke vragen waar op gelet moet worden:

• Kan ik alle interactieve elementen zoals knoppen en links bereiken in de juiste volgorde?
• Is het op elke moment zichtbaar waar mijn focus nu op staat?
• Kan ik formulier volledige invullen met het gebruik van mijn toetsenbord?
• Kan ik alles doen wat ik anders met mijn muis ook zou doen?

Toegankelijkheid is écht voor iedereen

Ongeacht welk type website je hebt, is het doel veelal om zo veel als mogelijk gebruikers te krijgen. Door deze 5 tips toe te passen, zorg je ervoor dat een zeer grote groep Nederlanders gebruik kan maken van jouw website. Bij de eerstvolgende keer dat je een website bouwt of ontwerpt, houd dan rekening met mijn altijd toepasbare top 5:

• Gebruik voldoende contrast
• Kleur alleen mag geen informatie overbrengen
• Maak gebruik van de webstandaarden
• Gebruik een logische structuur en volgorde
• Test ook met alleen je toetsenbord (dus geen muis)!