Widget labels must be descriptive

Rule ID Widget 12
Definition The label for elements with a widget roles on a page must sufficiently describe its purpose.
Purpose
  • Labels that are sufficiently descriptive make it possible for people to understand the purposes of elements with widget roles on the 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 Widgets/Scripting
Scope Element
Target Resources Elements with widget roles on a page
Techniques
  • In some cases the child text nodes and alt from descendant image elements will be used as the label for elements with widget roles.
  • Use aria-labelledby attribute to reference the id(s) of the elements on the page to label elements with widget roles.
  • Use aria-label attribute to provide a explicit label for an element with a widget role.
  • Elements with grouping widget roles may not receive keyboard focus, but giving them a label provides users of assistive technologies a more accurate description of the purpose of the widget
Manual Checks
  • Good labels are both concise and descriptive of the element with widget role purpose.
  • If element with widget roles are arranged in groups, make sure labels include grouping information.
  • Consider using aria-describedby to provide references to instructions or error information.
  • When there is more than one widget of the same type on a page, they need an label for users to uniquely identify the form control.
Informational Links