Toegankelijke website bouwen: acht dingen die iedereen kan regelen

Toegankelijkheid komt vaak ter sprake als iets duurs en ingewikkelds, iets voor overheidssites. In de praktijk gaat het grotendeels om keuzes die je bij het bouwen toch al maakt. En het raakt meer mensen dan je denkt: iemand met kleurenblindheid, iemand die zijn muis kwijt is, iemand die in de felle zon op zijn telefoon kijkt.

1. Kleurcontrast

Lichtgrijze tekst op wit ziet er strak uit in een ontwerp en is onleesbaar op een telefoon buiten. De richtlijn is een contrastverhouding van minstens 4,5 op 1 voor gewone tekst en 3 op 1 voor grote koppen.

Controleren kost tien seconden: zoek op 'contrast checker', vul je tekstkleur en achtergrondkleur in en je ziet direct of het voldoet. De meest voorkomende zondaar is een grijstint als #999999 op wit. Ga naar #595959 of donkerder en je zit goed.

2. Bedienbaar met het toetsenbord

Test het zelf: open je homepage en navigeer alleen met de Tab-toets. Kun je bij elk menu-item, elke knop en elk formulierveld komen? Zie je duidelijk waar je bent? Kun je het mobiele menu openen en weer sluiten?

De klassieke fout is een ontwerper die de focusring weghaalt omdat die 'lelijk' is. Vervang hem dan door een eigen variant die wel past, maar haal hem nooit helemaal weg. Zonder zichtbare focus navigeert iemand blind over je site.

3. Alt-teksten die iets zeggen

Een alt-tekst beschrijft wat er op de afbeelding gebeurt voor iemand die hem niet ziet. 'foto1.jpg' of 'afbeelding' helpt niemand. 'Tuinaanleg met natuurstenen terras en beukenhaag in Bennekom' helpt wel, en het levert je bovendien wat vindbaarheid in Google Afbeeldingen op.

Is een afbeelding puur decoratief, zoals een achtergrondvorm, geef hem dan een lege alt (alt=''). Dan slaat een schermlezer hem netjes over.

4. Formulieren met echte labels

Een veld met alleen een placeholder als aanduiding is een probleem: zodra iemand begint te typen, verdwijnt de uitleg. Voor mensen die snel afgeleid raken of een schermlezer gebruiken, is dat lastig. Gebruik een zichtbaar label boven het veld, gekoppeld met een for-attribuut.

Zorg daarnaast dat foutmeldingen in tekst staan en niet alleen met een rode rand worden aangegeven. 'Vul een geldig e-mailadres in' bij het veld zelf werkt voor iedereen beter.

5. Een logische koppenstructuur

Eén h1 per pagina, daaronder h2's voor de hoofdstukken en h3's voor onderdelen daarvan. Sla geen niveaus over en gebruik koppen niet om iets groot te maken. Mensen die een schermlezer gebruiken springen van kop naar kop, net zoals jij een pagina scant. Een goede structuur is ook precies wat zoekmachines nodig hebben.

6. Linkteksten die op zichzelf staan

'Klik hier' en 'lees meer' zeggen niets als je ze los hoort. Schrijf waar de link heen gaat: 'bekijk onze prijzen' of 'lees hoe wij een webshop opleveren'. Dit helpt ook je bezoeker die de pagina scant en alleen naar de blauwe woorden kijkt.

7. Klikvlakken groot genoeg

Op een telefoon mikt een duim niet nauwkeurig. Houd knoppen en links minimaal 44 bij 44 pixels en zorg voor ruimte ertussen. Twee links vlak onder elkaar in een footer zijn op mobiel een gok. Dit is geen randgeval: het raakt iedereen die onderweg iets probeert aan te tikken.

8. Video en beweging

Zet ondertiteling onder video's. Dat is nodig voor mensen die slecht horen en fijn voor iedereen die in de trein zit zonder koptelefoon. Laat video's niet automatisch met geluid starten en zorg dat animaties stoppen als iemand in zijn systeem heeft aangegeven beweging te willen beperken. Dat is één regel CSS met prefers-reduced-motion.

Bijna alles wat een site toegankelijk maakt, maakt hem ook prettiger voor mensen zonder beperking. Dat is geen bijvangst, dat is het hele punt.

Wat het kost en wat het oplevert

Bij een nieuwe site kost dit vrijwel niets extra, omdat je die keuzes tijdens het bouwen maakt. Bij een bestaande site ben je meestal een dag bezig met contrast, alt-teksten en formulieren. Daar staat tegenover dat je een groep bezoekers bedient die anders wegklikt, en dat je site beter scoort op de punten waar Google op let.

Begin met een test van een half uur: navigeer met Tab, zoom in tot 200 procent en laat een contrastchecker los op je belangrijkste kleuren. Wat je daar vindt, is je lijstje voor volgende week.