Uw webshop toegankelijk maken

Daarnaast zit een deel van de route vaak buiten uw eigen thema: een betaalprovider, een bezorgplugin, een module voor reviews. Dat maakt het werk niet onmogelijk, wel iets om vooraf te weten. Of de wet voor uw winkel geldt, leest u in wat de toegankelijkheidswet betekent voor webshops.

Categoriepagina en filters

Filters zijn vaak het eerste struikelblok. Een prijsschuifje dat alleen met de muis te verslepen is, checkboxen die als plaatjes zijn gebouwd, of een lijst die ververst zonder dat iemand hoort hoeveel producten er nog over zijn. Een filter hoort met het toetsenbord bedienbaar te zijn, een zichtbaar label te hebben en na het filteren te melden wat er veranderd is. Meer hierover staat in productfilters in uw webshop toegankelijk maken.

Productpagina

• Productfoto's met een alt-tekst die zegt wat er te zien is, niet de bestandsnaam.
• Variantkeuze (maat, kleur) met echte formulierelementen. Kleurbolletjes zonder tekst zijn voor iemand die kleuren niet goed onderscheidt of een screenreader gebruikt onbruikbaar.
• Een prijs die na het kiezen van een variant verandert, en die verandering ook meldt.
• Een fotogalerij of zoomfunctie die met het toetsenbord te bedienen en te sluiten is.
• Tabbladen voor specificaties en reviews die als echte tabs of als gewone koppen werken.

Toevoegen aan winkelwagen

De melding "toegevoegd aan winkelwagen" moet ook worden voorgelezen. Technisch gebeurt dat met een statusbericht in de code, een zogeheten live region:

<div role="status" aria-live="polite">
  Zwarte regenjas, maat M, is toegevoegd aan uw winkelwagen.
</div>

Een uitschuivende mini-winkelwagen moet daarnaast de focus goed afhandelen: openen met Enter, sluiten met Escape, en de focus daarna terug op de knop waar de klant was.

Winkelwagen

Aantallen aanpassen met kleine plus- en minknopjes zonder tekst is een bekend probleem. Een knop heeft een naam nodig, zoals "Aantal verhogen voor zwarte regenjas". Ook de verwijderknop, vaak alleen een kruisje, moet zeggen wat hij verwijdert.

• Labels die blijven staan. Een placeholder is geen label. Elk veld heeft een zichtbare naam.
• Autocomplete. Velden voor naam, adres, e-mail en telefoon krijgen de juiste autocomplete-waarde, zodat de browser ze kan invullen. Dat scheelt iedereen tijd en mensen met een motorische beperking veel moeite.
• Foutmeldingen. Een melding staat bij het veld, zegt wat er mis is en hoe het goed moet, en is gekoppeld aan het veld zodat een screenreader hem voorleest. Na verzenden springt de focus naar de eerste fout of naar een overzicht.
• Verplichte velden die niet alleen met een rood sterretje zijn aangegeven.
• Bezorgopties en betaalmethoden als echte keuzerondjes met een tekst, niet alleen als logo.
• Geen tijdsdruk zonder waarschuwing, bijvoorbeeld een winkelwagen die stil leegloopt.

Veel van deze punten gelden voor elk formulier op uw site. De uitgebreide aanpak staat op de pagina toegankelijke formulieren.

Dan de betaalpagina zelf. Die wordt meestal door uw betaalprovider geleverd. Wij kunnen controleren hoe die zich gedraagt en het in het rapport benoemen, maar de code ervan aanpassen kunnen wij niet. Vraag uw provider in dat geval naar hun eigen toegankelijkheidsinformatie.

1. Testbestelling. Wij doorlopen de hele route met alleen het toetsenbord en met een screenreader, tot en met de bevestigingsmail. Het liefst in een testomgeving of met een testbetaalmethode.
2. Bevindingen per stap. U krijgt een overzicht per onderdeel van de route, met prioriteit. Problemen die een bestelling blokkeren komen eerst.
3. Vaste prijs. Na die eerste beoordeling krijgt u een vaste prijs voor het herstel.
4. Herstel in een kopie. Wij werken in een stagingomgeving, zodat uw winkel blijft draaien. Waar mogelijk passen wij templates in een childthema aan, zodat updates van WooCommerce uw aanpassingen niet overschrijven.
5. Hertest en livegang. Na het herstel doen wij opnieuw een testbestelling langs dezelfde route.

Wilt u eerst een volledig beeld van de hele site, inclusief de informatieve pagina's, dan begint u met een WCAG-audit.

• alt-teksten bij productfoto's die het product beschrijven, ook kleur en uitvoering;
• productinformatie als tekst, niet als afbeelding met tekst erin;
• maattabellen als echte tabel, niet als plaatje;
• duidelijke namen voor varianten, zoals "donkerblauw" in plaats van een kleurcode.

Nieuwe producten, plugins en acties brengen steeds nieuwe risico's mee. Daarom is het verstandig de winkel na het herstel te blijven controleren. Dat kan binnen het onderhoud van uw webshop, met periodieke controle zoals beschreven bij toegankelijkheid blijvend bewaken. Het complete overzicht staat op digitale toegankelijkheid.