Wcag uitgelegd

Voortgangsbalken

Voortgangsbalken — WCAG 1.3.1 Info en relaties (post 6/8)

Stap 2 van 4. Je ziet een balkje dat voor twee derde is gevuld. Je weet waar je bent in het proces.

Maar als dat balkje alleen uit CSS bestaat — een div met een breedte van 66% — weet een schermlezer niet hoeveel stappen er zijn, welke stap actief is, of hoever je bent.

Google indexeert meerstappenprocessen. Een goed gemarkeerde voortgangsbalk maakt het proces begrijpelijk voor hulpsoftware en zoekmachines.

Dit is niet zeldzaam. De meeste bestel- en aanvraagprocessen die ik audit hebben een visuele voortgangsindicator die in de code niks zegt.

De fix is een handvol attributen. En je bestelproces wordt beter vindbaar en bruikbaar.

Related Posts

JavaScript dat de focus actief verwijdert

JavaScript dat de focus actief verwijdert

element.addEventListener("focus", function() { this.blur(); }); Een element krijgt focus. JavaScript verwijdert de focus direct. Het element heeft een fractie van een seconde focus gehad. De gebruiker merkt niets.

Zichtbaar "Submit", aria-label "Verzenden"

Zichtbaar "Submit", aria-label "Verzenden"

Een Nederlandstalige website. Een knop. Op het scherm staat “Submit.” Het aria-label zegt “Verzenden.”

Labels

Labels

Klik eens op het woord naast een checkbox. Als er niks gebeurt, is het label niet gekoppeld aan het invoerveld. Dat is een gemiste kans, niet alleen voor toegankelijkheid, maar voor iedereen.