Widgets must have label

Rule ID Widget 1
Definition Widgets must have label.
Purpose
  • A label associated with a element with a widget role ensures that information about the widget is spoken by screen readers when it receives focus.
Required Yes for HTML4 Legacy Techniques ruleset mapping
WCAG Success Criteria

4.1.2 Name, Role, Value (Level A, Primary Success Criterion)

Rule Category Widgets/Scripting
Scope Element
Target Resources Elements with role attribute values that are defined as widgets
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