Web Accessibility Wednesday: Form Labels

This is part of a continuing series of web accessibility tips for IT personnel, web managers and web development groups. These tips can be used to review current website accessibility and to utilize in developing new websites with the hope of improving web accessibility for everyone.

Most types of form elements (text boxes, text areas, checkboxes, radio buttons, etc.) have a text label adjacent to them that identifies the function of that particular form element (e.g., "First name" adjacent to a text box). Sighted users make a visual associate between a label and its corresponding form element based on proximity and positioning. A user who is blind cannot make this visual association, so the label must be programmatically associated with its form element using the HTML < label >tag. When properly associated, a screen reader will read the text label when it encounters the form element.

First name:

< label for="fname" >First name:< /lable > < input id="fname" >< /label >

More about Creating Accessible Forms