Labels - Making Forms Accessible

Forms are one of the most important parts of a web page to be made accessible.The <label> tag is used to make form elements accessible. It helps screen readers handle your forms. The label tag can also help make it easier to select an <input> or <select> tag while using a mouse.

The label tag should surround the text associated with an <input> or <select> tag. It has one attribute; the for attribute. When using label the id element should be included in the input or select tag.

The for and id attributes must be unique within a web page.

HTML source

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

<label for="Male"> <input type="radio" name="sex" value="Male" id="Male" /> Male</label><br />
<label for="Female"> <input type="radio" name="sex" value="Female" id="Female" /> Female</label><br />

<input type="checkbox" checked="checked" name="programming" value="yes" id="programming" />
<label for="programming">Programming</label><br />
<input type="checkbox" name="graphics" value="yes" id="graphics" />
<label for="graphics">Graphic Design</label><br />