Labels must be unique

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)

Rule Category Forms
Scope Element
Target Resources select, textarea and input elements of type text, password, checkbox, radio, file and aria widget roles
  • select
  • textarea
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