U installeert een extensie, klikt op een icoon en uw homepage zit ineens vol rode en gele symbooltjes. Achtentwintig waarschuwingen, zes fouten, elf contrastfouten. Is uw website nu slecht? Niet per se. WAVE is een van de bekendste gratis tools om WAVE toegankelijkheid-controles mee te doen, maar de resultaten vragen wat uitleg. Dit artikel laat zien hoe u de tool gebruikt, hoe u de meldingen leest en waar zijn grenzen liggen.
Wat WAVE is
WAVE is gemaakt door WebAIM, een organisatie van de Utah State University die zich al lang met webtoegankelijkheid bezighoudt. Er zijn twee manieren om de tool te gebruiken:
- Via de website van WAVE. U vult een adres in en krijgt het rapport. Handig voor een snelle blik, maar het werkt alleen voor openbare pagina’s.
- Als browserextensie voor onder meer Chrome, Firefox en Edge. Dit is de handigste manier. De extensie controleert de pagina zoals die in uw browser staat, dus ook pagina’s achter een inlog, een winkelmandje of een ingevuld formulier.
Na installatie klikt u op het WAVE-icoon in de werkbalk. Er opent een zijpaneel met een samenvatting en de pagina krijgt icoontjes op de plekken waar iets is gevonden.
De categorieën in het WAVE-paneel
WAVE deelt zijn bevindingen in groepen in. Houd die goed uit elkaar, want niet alles is een fout.
| Categorie | Kleur | Wat het betekent |
|---|---|---|
| Errors | Rood | Vrijwel zeker een probleem, zoals een afbeelding zonder alt-attribuut of een formulierveld zonder label. |
| Contrast Errors | Rood | Tekst met te weinig contrast ten opzichte van de achtergrond. |
| Alerts | Geel | Mogelijk een probleem. Hier moet een mens naar kijken. |
| Features | Groen | Dingen die de toegankelijkheid helpen, zoals een alt-tekst of een gekoppeld label. |
| Structural Elements | Blauw | Koppen, lijsten, landmarks. Geen oordeel, wel informatie. |
| ARIA | Paars | Plekken waar ARIA wordt gebruikt. Ook geen oordeel. |
Klik op een icoon in de pagina of in het paneel en WAVE laat zien wat er aan de hand is, met een korte uitleg en een verwijzing naar het bijbehorende WCAG-criterium.
Fouten en waarschuwingen: wat pakt u eerst aan
De rode fouten
Begin bij de rode meldingen. Die zijn bijna altijd terecht. Veelvoorkomende voorbeelden:
- Missing alternative text: een afbeelding heeft geen alt-attribuut. Zie alt-teksten schrijven voor wat erin hoort.
- Empty link of empty button: een link of knop zonder tekst, vaak een icoon van een winkelmandje of een social media-logo.
- Missing form label: een invulveld zonder gekoppeld label.
- Empty heading: een kop zonder inhoud, vaak een restant van de pagebuilder.
De contrastfouten
WAVE berekent het contrast van tekst tegen de achtergrondkleur. Bij tekst op een afbeelding of verloop kan hij dat niet goed meten; dan is een handmatige controle nodig. In het tabblad Contrast van het paneel kunt u kleuren aanpassen en direct zien of de verhouding wel voldoet.
De gele alerts
Alerts zijn vragen, geen fouten. “Redundant link” betekent dat twee links naast elkaar naar hetzelfde adres gaan. “Skipped heading level” betekent dat er een kopniveau is overgeslagen. Soms is dat een echt probleem, soms niet. Loop ze door, maar laat u er niet door verlammen.
Handige functies die minder bekend zijn
- Styles uitzetten. Met de knop om stijlen uit te schakelen ziet u de pagina zoals de code hem opbouwt. De volgorde die u dan ziet, is ongeveer de volgorde waarin een screenreader voorleest.
- Het tabblad Structure. Een overzicht van koppen en landmarks. Zo ziet u snel of de pagina een logische opbouw heeft.
- Het tabblad Order. Laat de volgorde zien waarin elementen met het toetsenbord bereikt worden.
- Code-weergave. Onderin kunt u de code openen. Klikt u op een icoon, dan springt die naar de bijbehorende regel.
Wat WAVE niet ziet aan toegankelijkheid
Nul rode meldingen in WAVE betekent niet dat uw website toegankelijk is. Een tool kan controleren óf er een alt-tekst is, maar niet of die tekst klopt. “afbeelding123.jpg” telt voor WAVE als aanwezig. Ook deze dingen ontgaan hem:
- Of u de hele pagina met alleen een toetsenbord kunt bedienen, inclusief menu’s en pop-ups.
- Of de focus zichtbaar is wanneer u door de pagina tabt.
- Of een linktekst begrijpelijk is buiten zijn context.
- Of foutmeldingen in een formulier duidelijk zijn en worden voorgelezen.
- Of de pagina werkt bij 400% zoom of met grotere tekst.
- Of de teksten begrijpelijk zijn.
WAVE controleert bovendien één pagina in één toestand. Een uitklapmenu dat dicht staat, of een stap verderop in de bestelprocedure, test u pas als u die toestand eerst zelf oproept.
Een werkwijze voor uw eigen site
- Kies vijf tot tien pagina’s die samen uw site vertegenwoordigen: homepage, een dienst- of productpagina, een blogartikel, het contactformulier, en bij een webshop het winkelmandje en de afrekenpagina.
- Draai WAVE op elke pagina en noteer de rode fouten.
- Kijk welke fouten op elke pagina terugkomen. Die zitten meestal in het thema, de header of de footer. Eén keer oplossen scheelt dan overal.
- Loop daarna de alerts per pagina door.
- Vul de controle aan met een handmatige test met het toetsenbord.
Bewaar de uitkomst van elke ronde, bijvoorbeeld als schermafdruk van het samenvattingspaneel met de datum erbij. Na een paar maanden ziet u dan of het aantal fouten daalt, of dat er na een update ineens nieuwe bijkomen. Draai WAVE ook opnieuw nadat u iets hebt opgelost. Soms verdwijnt een fout, maar duikt er op dezelfde plek een andere op, bijvoorbeeld een lege link waar eerst een afbeelding zonder alt-tekst zat.
Hoe u zo’n handmatige ronde opzet, leest u op toegankelijkheid zelf testen in 30 minuten. Zijn de contrastfouten het grootste deel van uw lijst, kijk dan bij kleurcontrast verbeteren. En wilt u weten welke fouten in de praktijk het vaakst voorkomen, dan biedt de tien meest voorkomende fouten een goed vergelijkingspunt. Het grotere geheel, van wetgeving tot onderhoud, staat op onze pagina over een toegankelijke website.
Vraag een gratis websitecheck aan. Binnen één werkdag weet u waar uw website staat.
