E commerce eaa

Knop zonder naam

Knop zonder naam — Afbeeldingen in webshops (post 4/8)

Je hebt op je website een zoekveld met een knop. Op een desktop staat er “Zoeken” naast het vergrootglas-icoontje. Prima, dat werkt. Maar wat gebeurt er als je inzoomt of de pagina op een telefoon bekijkt? De tekst “Zoeken” verdwijnt en alleen het icoontje blijft over. En als dat icoontje geen tekstalternatief heeft, dan weet iemand die voorleessoftware gebruikt niet wat die knop doet. Ze horen: “Knop.” Dat is alles. Geen “zoeken”, geen “versturen”, gewoon “knop.”

Dit zie ik zo vaak. En het is een struikelblok waar je potentieel veel klanten verliest. Als iemand niet kan zoeken in je webshop, dan is die weg. Geen omzet, geen terugkerende bezoeker. Je developer moet ervoor zorgen dat op een desktop het tekstalternatief niet dubbel wordt voorgelezen, maar op een mobiel wel beschikbaar is. Dat is een kwestie van een aria-label of visueel verborgen tekst.

Google kijkt trouwens ook naar de toegankelijke namen van knoppen en links om te begrijpen wat je interface doet. Een knop zonder naam is voor Google een zwart gat, net als voor je bezoeker.

Related Posts

Afbeelding van prefix

Afbeelding van prefix

Je hebt een overzichtspagina in je webwinkel met 100 producten. In elke alt-tekst staat “Afbeelding van…”. Klinkt netjes, toch? Tot je luistert wat er gebeurt. Voorleessoftware zegt bij elke afbeelding al automatisch “afbeelding.” Dus als jij “Afbeelding van Nike schoenen” in de alt-tekst zet, hoort je klant: “Afbeelding. Afbeelding van Nike schoenen.” Bij de vierde rij producten word je daar helemaal gek van. En dat wil je niet als winkelier.

Decoratieve afbeeldingen

Decoratieve afbeeldingen

Ik kom het regelmatig tegen in audits: een decoratieve scheidingslijn, leuke bolletjes, of een achtergrondpatroon — en ze hebben allemaal een beschrijving. “Afbeelding, blauwe cirkel.” “Afbeelding, golvend lijntje.” Iemand die voorleessoftware gebruikt, hoort al die rommel tussendoor terwijl die gewoon door je webshop wil scrollen. Stel je voor dat je in een fysieke winkel loopt en bij elke stap iemand in je oor fluistert: “Tegel. Tegel. Nog een tegel.”

Kosten WCAG-naleving voor een webshop

Kosten WCAG-naleving voor een webshop

De totale kosten om je webshop WCAG-compliant te maken hangen af van drie factoren: de audit, het oplossen van problemen, en het onderhouden van de toegankelijkheid daarna.