Een toegankelijke website werkt voor mensen met een visuele beperking, kleurenblindheid, motorische beperkingen of een schermlezer. Hij werkt ook beter voor alle anderen: iemand in fel zonlicht, iemand die met één hand bedient in een volle trein. Dit zijn vijf controles die we vóór de lancering op elke pagina uitvoeren.

Toegankelijkheid van je website klinkt als een lange technische norm, en de volledige norm is dat ook. Maar de meeste problemen die we op echte sites vinden, komen neer op dezelfde vijf dingen, en iedereen kan ze in een middag controleren, zonder speciale tools.

1. Contrast

Lopende tekst heeft een contrastverhouding van minstens 4,5:1 met de achtergrond nodig, en grote tekst minstens 3:1. Lichtgrijze tekst op wit haalt dat vaak niet, en is buiten moeilijk te lezen.

Om te controleren neem je de tekstkleur en de achtergrondkleur en vul je ze in bij de contrastchecker van WebAIM. Controleer ook knoppen, voorbeeldtekst in formulieren en tekst op foto’s: die vallen het vaakst door de mand.

2. Focus

Alles wat je kunt aanklikken, moet ook met een toetsenbord werken, en het element met focus heeft een duidelijk zichtbare rand nodig. Die rand weghalen voor de looks laat toetsenbordgebruikers verdwalen.

3. Koppen

Eén hoofdkop per pagina, daarna koppen op volgorde. Gebruikers van een schermlezer springen van kop naar kop om een pagina te scannen, zoals ziende bezoekers met hun ogen scannen.

4. Alt-tekst

Afbeeldingen die betekenis hebben, krijgen een korte beschrijving van wat erop staat. Decoratieve afbeeldingen krijgen een lege beschrijving, zodat schermlezers ze overslaan.

Goede alt-tekst beschrijft wat er voor deze pagina toe doet in de afbeelding. Bij een productfoto zijn dat het product en de kleur; bij een teamfoto wie erop staan. Begin niet met “afbeelding van”: schermlezers melden al dat het een afbeelding is.

5. Aanraakdoelen

Knoppen en links moeten groot genoeg zijn, en ver genoeg uit elkaar, om met een duim aan te tikken. Een prettig doel is ongeveer 44 bij 44 pixels.

Toegankelijkheid is geen extra functie. Zo hoort een site te werken.

Toegankelijkheid voorbij de vijf controles

De vijf controles vangen de meest voorkomende problemen. Zijn die op orde, dan loont het om er nog een paar toe te voegen:

Formulieren: elk veld heeft een zichtbaar label, niet alleen voorbeeldtekst, en foutmeldingen zeggen wat er misging en hoe je het oplost.
Links: de linktekst zegt waar hij heen gaat. “Bekijk onze prijzen” werkt ook los van de context; “klik hier” niet.
Zoom: de pagina werkt nog als de tekst tot 200% wordt vergroot, zonder dat inhoud wordt afgesneden.
Beweging: animaties houden rekening met de instelling “beweging beperken” op het apparaat van de bezoeker, en niets knippert.
Video: ondertiteling voor gesproken tekst, zodat de video ook zonder geluid werkt.

De volledige norm zijn de Web Content Accessibility Guidelines (WCAG) 2.2. Niveau AA is het gebruikelijke doel voor zakelijke websites. De eenvoudige controles van het W3C zijn een goede volgende stap na de vijf hierboven.

Waarom het goed is voor je bedrijf

Toegankelijke sites zijn meestal voor iedereen makkelijker te gebruiken, dus meer mensen ronden af waarvoor ze kwamen. Veel basisregels van toegankelijkheid overlappen met de beste werkwijzen voor zoekmachines, zoals duidelijke koppen, beschrijvende links en alt-tekst. En het hoort gewoon bij iets goed bouwen, zoals zorgen dat de voordeur opengaat.

Vragen die mensen stellen

Is toegankelijkheid van websites in Indonesië wettelijk verplicht?

De Indonesische wet erkent de rechten van mensen met een beperking, waaronder toegang tot informatie, al zijn de specifieke technische eisen voor particuliere websites minder gedetailleerd dan in sommige landen. Verkoop je in het buitenland, controleer dan de regels in die markten. Hoe dan ook zijn de controles hierboven goede praktijk.

Kan een toegankelijkheidsplug-in of -overlay alles oplossen?

Nee. Overlays kunnen ontbrekende labels, een slechte structuur of onleesbare kleuren in het ontwerp zelf niet oplossen. Toegankelijkheid moet in het ontwerp en de code worden ingebouwd.

Hoe testen we met een schermlezer?

Elke telefoon heeft er een ingebouwd: VoiceOver op de iPhone en TalkBack op Android. Zet hem aan, sluit je ogen en probeer je contactgegevens te vinden. Het maakt je bescheiden, en het is erg leerzaam.

Toegankelijkheid hoort bij hoe we elke site ontwerpen en bouwen in onze webdesigndienst. Het raakt ook aan snelheid en typografie: zie waarom een website traag aanvoelt op een telefoon en lettertypes kiezen voor twee talen.