Wcag uitgelegd

Labels

Labels — WCAG 1.3.1 Info en relaties (post 3/8)

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.

Een gekoppeld label vergroot het klikgebied. Op een telefoon is dat het verschil tussen een vinkje dat je in een keer raakt en een die je drie keer moet proberen. Voor iemand met trillende handen is het het verschil tussen zelfstandig een formulier invullen en afhaken.

Een schermlezer leest een gekoppeld label automatisch voor als het veld focus krijgt. Zonder koppeling hoort de gebruiker “invoerveld” — zonder te weten waarvoor.

De fix is simpel: een for-attribuut op het label, een id op het invoerveld. Een minuut werk per veld. En het maakt je formulier beter voor iedereen.

Related Posts

URL als linktekst

URL als linktekst

“h-t-t-p-s colon slash slash w-w-w dot example dot com slash rapport dash twee-duizend-vierentwintig dot p-d-f”

Focusindicator die opgaat in de achtergrond

Focusindicator die opgaat in de achtergrond

Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.

Content verdwijnt door overflow hidden

Content verdwijnt door overflow hidden

Je zoomt in op een webpagina. De tekst wordt groter. En dan — halverwege een zin — houdt de tekst op. Alsof iemand de rest heeft afgeknipt.