Sanna Kramsi - I would if I could a guide to web accessibility

Form field instructions

I often see forms having some kind of usage instructions next to the fields. But surprisingly rarely they are attached to the fields themselves. This means that visually you can see the information is related to the fields but other than that... you can't really access the info properly with a screen reader. Check out the examples with a screen reader.

Problematic example



This is an instruction that is supposed to tell the users about this field.

Better example



This is an instruction that is actually attached to the field with aria-describedby attribute.

Final comments

All it took to improve screen reader usability was to properly use the label element and attach the instruction content to the field with aria-describedby attribute.