Labels for Form Controls Overview
Form controls must be labelled and grouped to provide explicit references that can be used by assistive technologies to communicate the purpose of the form controls. The
tabindex attribute can be used to include instructions and other information in the tab navigation ordering so that screen reader users can easily orient the information needed to complete the form.
Another important feature of forms is to provide information on errors or the validity of form fields. Many forms provide feedback to the user on whether form fields have been filled out correctly, and there are many ways to do so with fields that need to be updated before the form data will be accepted. These techniques must be carried out in an accessible way, or people with disabilities may not be aware of the problem and/or which form fields need to be updated for the form to be accepted.
Labeling form controls properly helps people with disabilities:
- Understand the purpose of a form control within a web resource
- Identify and understand instructions on how to complete form control content
- Identify form controls with invalid or incomplete content
- Understand information needed to correct form field with invalid content
- Labels for checkboxes and radio buttons increase the effective target size for mouse actions to change the state of a checkbox or radio button.
- Consistent feedback on errors and invalid or incomplete form content makes it easier for users to identify the form content that needs to be updated to make the form acceptable.
- Centralized and consistent management of form input errors makes it easier to manage the creation and maintenance of web forms.
- Screen reader software support for the TITLE attribute (Paciello Group)
- Assistive technology users test title attribute access (Paciello Group)
- 20: HTML forms - the basics (Opera Web Standards Curriculum)
labelelement for input[type="text"], input[type="password"],
- The primary way to provide an effective label for a form control is to use the label element using the
forattribute to reference the id attribute of the form control. The
labelelement can also encapsulate form controls, but this technique has problems with many types of assistive technologies.
valueattribute for input[type="button"], input[type="submit"] and input[type="reset"]
valueattribute, defined in input element, should provide an effective label for input elements with the type="button", type="submit" and type="reset".
altattribute should provide an effective label for input elements with the type="image".
- If the
labelelement content includes an
altattribute of the
imgelement will be part of the effective label.
- The text content of the
buttonelement is an effective label. If the
buttonelement content includes an
altattribute value of the
imgelement will be part of the effective label.
titleattribute, supported by most form control elements, is the secondary way to provide an effective label for html form controls. When a set of form controls is laid out in columns or rows, the appropriate effective label for several controls should be at the beginning of the row or the top of the column.
legendelements are used to add grouping information to effective labels for a group of related html form controls.
tabindexattribute can be used to make important information related to the form, e.g. instructions, part of the TAB navigation order.
- Illinois Information Technology Accessibility Standards
- 10.1 Provide labels or titles for all form fields.
- 10.2 Provide legends for groups of form fields.
- 10.3 Ensure that form fields are in a logical tab order.
- 10.4 Avoid placing non-focusable text between form fields.
- 10.5 Ensure that text in form fields can be enlarged.
- Section 508
- 1194.22 (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues
- W3C Web Content Accessibility Guidelines 2.0
- 2.4.6 Labels Descriptive: Labels and headings are descriptive.
- 3.3.1 Error Identification: If an input error is detected, the item that is in error is identified and the error is described to the user in text.
- 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input.
- 3.3.3 Error Suggestion: If an input error is detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.
- 3.3.4 Error Prevention (Forms including Legal, Financial, Data)
- 3.3.5 Help: Context-sensitive help is available.
- 3.3.6 Error Prevention (All forms)
- W3C Web Content Accessibility Guidelines 1.0
- 10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
- 12.4 Associate labels explicitly with their controls.