Typ iets om te zoeken...

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.

Zelf verder met dit onderwerp

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”

Invoerveld zonder zichtbare rand

Invoerveld zonder zichtbare rand

Een wit invoerveld op een witte achtergrond. Met een lichtgrijze rand. Heel lichtgrijs. #D9D9D9.

Knop die navigeert, link die een actie uitvoert

Knop die navigeert, link die een actie uitvoert

“Contact, knop.” Je drukt op Enter. Een nieuwe pagina opent. Maar het was een knop. Knoppen voeren acties uit. Ze navigeren niet.