Correctly set the role, name and value of elements
Ensure that all user interface components, such as form elements and links, have correct names, roles, and states that can be detected by assistive technologies, and notify users of any changes.
Acceptance Criteria
• Name and Role: All user interface components must have a clear and correct name and role that can be programmatically determined.
• States and Values: User-set states, properties, and values must be programmatically accessible and update notifications must be provided.
• Notification: Assistive technologies should receive updates when component states or values change.
Examples
• Label icons so that screen readers can identify their function.
• Use the appropriate input field types (e.g., phone number, password) to ensure correct behavior and accessibility.
• Provide notifications to assistive technology users when an input field value changes.
Exceptions
• Standard HTML controls generally meet this criterion if used according to specifications.
Tips
• Use ARIA roles and properties to enhance the accessibility of custom components.
• Regularly test with assistive technologies to ensure that components are correctly announced and updated.
How to test?
1. Use Assistive Technologies: Test the interface with screen readers and other assistive tools to verify that names, roles, states, and values are correctly communicated.
2. Check Updates: Ensure that notifications of changes to states and values are properly announced to users.
3. Validation Tools: Use accessibility validation tools to check if user interface components are correctly labeled and functional.