*This article is an English translation of a Japanese article.
The “Name, Role, and Value” guideline in web accessibility ensures that interface elements are accurately conveyed to users with visual or cognitive disabilities. Following this standard enables assistive technologies to provide users with a clear understanding of the content and functionality of elements, helping to prevent operational errors.
In this article, we explain the benefits of implementing “Name, Role, and Value” and discuss specific methods for effective implementation.
What Are “Name, Role, and Value”?
“Name, Role, and Value” provide key information that enables assistive technologies like screen readers or voice recognition tools to accurately interpret and convey webpage elements to users.
-
Name: The element’s name, or label, which is text that users can easily understand. For example, the label “Submit” or “Search” on a button is considered its “name.”
-
Role: The function or purpose of the element. For instance, a button, checkbox, or slider role lets assistive technology recognize what type of element it is.
-
Value: The current state or selected information of the element, such as a checkbox’s “on/off” status or a slider’s position.
Importance of “Name, Role, and Value” in WCAG Standards
According to WCAG (Web Content Accessibility Guidelines), every interface element should have an accurate “Name, Role, and Value.” This helps assistive technologies to convey information effectively:
- Name: Helps users understand what each element represents, avoiding confusion.
- Role: Clarifies the purpose of the element, ensuring users understand its intended function.
- Value: Provides the current state of the element, allowing users to decide on their next action.
How to Set Up Name, Role, and Value
1. Setting a Name
Assign a clear name to elements so users can easily understand their meaning and purpose. For example, buttons or links should include a text label or an ARIA aria-label attribute.
<button aria-label="Send">📤</button>
2. Setting a Role
Use the role attribute to assign a role to specific elements. For example, to make a link function as a button, use the following code:
<a href="#" role="button">Submit</a>
3. Setting a Value
For dynamic elements, provide users with information about the current state or value of the element. This is essential for elements like checkboxes or switches, where users need to understand the current value.
<input type="checkbox" aria-checked="false" aria-label="Agree">
Important Points When Setting Name, Role, and Value
-
Consistency in Labels and Names: Use aria-label for unlabeled elements so assistive technologies can accurately convey content to users.
-
Updating Dynamic Elements: For elements with changing values (checkboxes, switches, sliders), use aria-live to ensure assistive technology relays updates in real-time.
-
Avoid Overuse of ARIA: Use ARIA attributes sparingly. For example, native <button> elements do not need role=“button” since they already possess that role by default.
Conclusion
Accurate configuration of “Name, Role, and Value” is crucial for ensuring equal access to web content for all users. By clearly conveying each element’s purpose and function, assistive technology users can avoid errors and confusion, allowing for smoother navigation.
Prioritizing Name, Role, and Value as a fundamental aspect of accessibility will help create a website that everyone can navigate comfortably.
We have released the UUU Web Accessibility Widget Tool, designed to make web accessibility easy to implement. This tool helps improve the accessibility of websites quickly and efficiently, even without specialized knowledge.
If you’re interested in enhancing your website’s accessibility, please check out the details. We are here to support you in making your website more user-friendly and accessible to a wider audience.