Use Labels for Forms to Maximize Screen Reader Compatibility

Use Labels for Forms to Maximize Screen Reader Compatibility

Forms are the most common way users interact with the web. However, forms that lack the proper markup can cause major accessibility issues for those who use screen readers. How can these issues be remediated? A good start would be to ensure that every form control has an appropriate label by using the label tag.

Example:

Name:

<label for="name">Name:</label> <input type="text" name="name" id="name">

A screen reader user will hear the above read as, "Name, text input, blank", which tells him or her a name can be entered in the text field. Editing forms for accessibility can be more complex than this, though. To learn more, Deque’s course on Form Labels, Instructions, and Validation provides great detail about form accessibility.