Name, Role, Value
Summary:
WCAG 4.1.2, "Name, Role, Value," ensures interactive web elements like buttons and forms are clearly labeled for assistive technologies. Each element must have a defined purpose ('name'), function ('role'), and current status ('value') for accessibility, aiding users with disabilities in effective interaction and navigation.
What:
This guideline requires that all user interface components have names and roles that can be programmatically determined, and that states, properties, and values set by the user can be programmatically set.
Why:
Properly defining these attributes for interactive elements ensures that assistive technologies can accurately convey their purpose and usage to users, enhancing accessibility for those with visual impairments, cognitive disabilities, or motor impairments.
Examples and Scenarios:
- Forms with Accessible Labels: Ensuring form fields have descriptive labels so screen readers can announce them correctly.
- Buttons with Clear Roles: Providing clear roles for buttons (like 'submit' or 'cancel') so users understand their function.
- Custom Widgets: Custom-built widgets should have their role and state programmatically defined to ensure they are accessible.
How to Comply:
- Websites: Use ARIA (Accessible Rich Internet Applications) roles, labels, and properties to define the function and state of UI components.
- Mobile Apps: Ensure that interactive elements in the app are accessible and their function and current state are clear.
- Software Applications: Similar to websites, make sure that all interactive elements in the application are properly labeled and their roles and states are accessible.
Exceptions:
- Standard HTML Elements: If standard HTML elements are used and their inherent roles, names, and values are sufficient, additional ARIA markup may not be necessary.
- Decorative Elements: Elements that are purely decorative and do not have an interactive role might not require these attributes.