WebAIR

Do all inputs and controls have text labels that accurately describe what they are for? (FAC01)

Why Is This Important?

Form controls need text labels so that users can understand the purpose of them. This is particularly important for people who use assistive technologies, such as screen readers, which may read out the form controls in a different order to how they are presented visually. In addition to merely including a text label, the label should also accurately describe the purpose of the form control.

How To Fix The Problem

Give each form control (typically an <input> element) an ID. Then, use the <label> element to accurately describe the purpose of the form control. For example, an input field that requires a user's name could be labelled "Your Name". Similarly, an input field that requires a user's email address could be labelled "Email".

 

You can then associate this label with the form control by using the "for" attribute on the <label> element. This should be exactly the same as the ID of the form control to create an association between the two. This will be detected by assistive technologies, which will announce the label text when the form control is given focus.

 

If it is not appropriate to include a label (e.g. if space is limited or extra details might be confusing) then use the "title" attribute on the control to describe its purpose.

Example

// Beginning of a basic form
<form id="login_details" action="processor.php" method="post">
<label for="name">Your Name:</label> <input type="text" name="name" id="name" />
<label for="email">Your Email:</label> <input type="text" name="email" id="email" />
<label for="password">Your Password:</label> <input type="password" name="password" id="password" />
</form>

Further Information

  1. http://webaim.org/techniques/forms/screen_reader#create
  2. http://www.w3.org/community/webed/wiki/HTML_forms_-_the_basics#Labels_for_accessibility