| 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.
|
| Mappings |
-
HTML4 Legacy Techniques
(Required)
-
HTML5 and ARIA Techniques
(Required)
|
| WCAG Success Criteria |
4.1.2 Name, Role, Value (Level A, Primary Success Criterion)
Other Related 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 |
|