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 form field has a label and instructions that are not attached to the field

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

Better example

This form field has a properly created label and instructions

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.