WCAG 2.1: Section 4.2 - Name, Role, Value

Section 4.2: Name, Role, Value

This section ensures that all user interface components provide programmatically determinable names, roles, and values, making them accessible to assistive technologies like screen readers.

4.2.1 Defining Name, Role, and Value

Each interactive element must provide clear metadata for accessibility tools.

• Name: Describes the element for assistive tools (e.g., button labels).
• Role: Defines the function of the element (e.g., input field, checkbox).
• Value: Specifies the current state or input of an element.

Examples of Proper Implementation

• Button with Accessible Name:

                      
                          <button aria-label="Submit form">Submit</button>
                      
                      

• Form Field with Defined Role and Value:

                   
                          <input type="text" id="username" name="username" aria-label="Enter your username">
                   
                      

• Checkbox with Clear Role and State:

                      
                          <input type="checkbox" id="subscribe" aria-checked="false">
                          <label for="subscribe">Subscribe to newsletter</label>
                     
                      

Best Practices for Accessibility:

• Ensure all interactive elements have meaningful labels via ARIA or native HTML.
• Use proper roles to ensure components behave as expected in assistive technologies.
• Provide real-time updates to values when users interact with elements.
• Regularly test components using screen readers and accessibility validation tools.