Associate form fields explicitly with their labels

Here is handy accessibility tip that will make filling in web forms easier for screen reader users, and for people with impaired motor skills: associate form fields explicitly with their labels by making use of the ‘label’ element and the ‘id’ attribute.

When encountering a form on a web page it is easy for sighted users to work out the expected response for each form element; it is just a matter of reading the label next to the field.

However, it is not always quite so simple for someone using a screen reader. It may not be clear which labels are associated with which field (particularly if the page author has used tables to layout the form, and the screen reader doesn’t understand tables).…