Toegankelijkheid van uw website zelf testen in 30 minuten

1. de homepage;
2. een typische inhoudspagina, zoals een dienst of een product;
3. de pagina met uw belangrijkste formulier: contact, offerte, afspraak of de checkout.

Open een leeg document of een vel papier en noteer per stap wat u ziet. Schrijf het concreet op: "op de contactpagina zie ik niet waar de focus is na het veld e-mail" is bruikbaar, "focus werkt niet" niet.

Toetsenbord (5 minuten)

Klik één keer in de adresbalk en druk daarna herhaaldelijk op Tab. Let op drie dingen: ziet u steeds waar u bent, gaat de volgorde logisch van boven naar beneden, en komt u bij alles wat klikbaar is? Probeer het menu te openen met Enter en weer te sluiten met Escape. Raakt u ergens vast, bijvoorbeeld in een pop-up, schrijf dat dan op. Dat is een ernstig probleem.

Dit is een snelle versie. Een uitgebreidere toetsenbordtest, met wat u bij menu's en pop-ups precies moet controleren, staat bij uw website bedienen met alleen een toetsenbord.

Zoom (5 minuten)

Zoom in met Ctrl en + (op een Mac Cmd en +) tot 200%. Is alle tekst nog leesbaar, en valt er niets over elkaar heen? Ga daarna door tot 400%. Op een gewoon laptopscherm komt dat ongeveer neer op een smalle mobiele weergave. U zou dan alleen verticaal moeten hoeven scrollen. Moet u naar links en rechts schuiven om een regel te lezen, dan schiet de reflow tekort. Wat reflow precies is, staat in reflow op 400% zoom.

Contrast (5 minuten)

Kijk naar de tekst die het lichtst is: grijze bijschriften, placeholders in formulieren, witte tekst op een gekleurde knop, tekst over een foto. Dat zijn de verdachten. Meet een paar ervan met een gratis contrastchecker, zoals de Colour Contrast Analyser of een online contrastcalculator. Gewone tekst moet een verhouding van minimaal 4,5:1 halen, grote tekst en knoppen minimaal 3:1. Hoe u een te lichte huisstijlkleur oplost, leest u bij kleurcontrast verbeteren.

Een automatische test (5 minuten)

Installeer een gratis browserextensie zoals WAVE of axe DevTools en laat die over uw drie pagina's lopen. Schrik niet van het aantal meldingen. Kijk vooral naar de fouten, niet naar de waarschuwingen, en zoek naar patronen: als dezelfde fout op alle drie pagina's staat, zit hij waarschijnlijk in het thema. Hoe u de uitkomsten van WAVE leest, staat in WAVE gebruiken om uw website te controleren.

Koppenstructuur (5 minuten)

In WAVE kunt u de structuur van de pagina bekijken. U ziet dan welke koppen er zijn en op welk niveau. Controleer of er één H1 is die zegt waar de pagina over gaat, of de H2's de hoofdonderwerpen zijn en of er geen niveaus worden overgeslagen omdat iemand een kop koos op lettergrootte. Teksten die er als kop uitzien maar geen kop zijn, ziet u hier ook niet terug. Meer in koppen in de juiste volgorde.

Formulier (5 minuten)

Vul uw belangrijkste formulier in met alleen het toetsenbord. Laat bewust een verplicht veld leeg en vul een fout e-mailadres in. Stel uzelf dan deze vragen:

• Heeft elk veld een zichtbaar label dat blijft staan als u gaat typen?
• Ziet u welke velden verplicht zijn, ook zonder op kleur te letten?
• Zegt de foutmelding wat er mis is en hoe u het oplost?
• Kunt u de captcha, als die er is, oplossen zonder muis?

Valt het formulier op meerdere punten door, kijk dan bij toegankelijke formulieren.

• Blokkerend: iets wat iemand tegenhoudt, zoals een formulier dat u niet kunt versturen zonder muis, of een pop-up waar u niet uit komt.
• Hinderlijk: iets wat het gebruik lastiger maakt, zoals onzichtbare focus of te licht grijze tekst.
• Content: dingen die uw eigen team in de editor kan oplossen, zoals alt-teksten, koppen en linkteksten.

De derde groep kunt u meteen zelf oppakken. De eerste groep verdient voorrang bij wie uw site technisch beheert.

• Hoe een screenreader de pagina voorleest. Een screenreader installeren is niet moeilijk, maar wie hem niet dagelijks gebruikt, kan moeilijk inschatten wat normaal is en wat een probleem.
• Complexe onderdelen, zoals filters in een webshop, uitklapmenu's met submenu's, datumkiezers en schuifregelaars.
• Of iets echt aan WCAG voldoet. Veel criteria hebben uitzonderingen en randgevallen.
• Pdf's, video's en externe widgets, die elk hun eigen manier van testen vragen.

Daarvoor is een audit door een specialist bedoeld. Uw eigen test is daar een prima opmaat voor: u weet al waar de grootste zorgen zitten, en u kunt gericht vragen stellen. Een overzicht van de volledige aanpak vindt u op website toegankelijk maken.