Rule ID |
Control 10 |
Definition |
Each standard HTML form control and ARIA widget role must have a label that is unique on the page. |
Purpose |
- Labels that are unique make it possible for people to understand the different purposes of form controls on the same page.
|
Mappings |
-
HTML4 Legacy Techniques
(Required)
-
HTML5 and ARIA Techniques
(Required)
|
WCAG Success Criteria |
2.4.6 Headings and Labels (Level AA, Primary Success Criterion)
Other Related Success Criterion:
|
Rule Category |
Forms |
Scope |
Element |
Target Resources |
select , textarea and input elements of type text , password , checkbox , radio , file and aria widget roles
|
Techniques |
- The preferred technique for labeling standard HTML form controls is by reference: First, include an
id attribute on the form control to be labeled; then use the label element with a for attribute value that references the id value of the control.
- An alternative technique for standard HTML form controls is to use the
label element to encapsulate the form control element.
- The
fieldset and legend elements can be used add a grouping label to the form controls contained in the fieldeset element.
- For ARIA widgets and special cases of standard HTML form controls, the
aria-labelledby attribute can be used to reference the id(s) of the elements on the page that describe its purpose.
- For ARIA widgets and special cases of standard HTML form controls, the
aria-label attribute can be used to provide an explicit text description of its purpose.
- For ARIA widgets and special cases of standard HTML form controls, the
title attribute can be used to provide an explicit text description of its purpose.
- For
input[type=submit] the default label is "Submit", but the label can be changed using other labeling techniques if there is more than one submit button on the page.
- For
input[type=reset] the default label is "Reset", but the label can be changed using other labeling techniques if there is more than one reset button on the page.
- For
input[type=image] the default label is defined using the alt attribute.
- For
input[type=button] the default label is defined using the value attribute.
- For the
button element, the child text content can be used to define its purpose.
- For some ARIA widgets (e.g.
menuitem , tab , treeitem ), the child text content can be used to define its purpose.
|
Informational Links |
|