WCAG Criterion 4.1.2 – Name, Role, Value (Level A) part 1
- Przejdź do artykułów z tagiem accessibility
- Przejdź do artykułów z tagiem accessible design
- Przejdź do artykułów z tagiem WCAG
- Przejdź do artykułów z tagiem WCAGacademy
Article content
Good morning on this Friday!
As we start the weekend, we have a post for you about WCAG.
Today, we’re beginning to discuss WCAG criterion 4.1.2, and we want to let you know in advance that since it covers many topics, it will be split into parts. 😉
WCAG Criterion 4.1.2 – Name, Role, Value (Level A) ensures that all elements on a website can be correctly interpreted by assistive technologies.
This means that every interactive element on the page (buttons, links, forms, etc.) must have a clearly defined:
Name – a label or text describing its function (e.g., a “Submit” button).
Role – the function of the element (e.g., whether it’s a link, button, checkbox).
Value – the current state of the element, if it’s dynamic (e.g., whether a checkbox is checked or a button is collapsed/expanded).
Today, we’ll focus mainly on buttons and links.
Based on the accessibility audits we’ve conducted, we can confidently say there’s a common issue with distinguishing the functions of links and buttons. What’s the difference between them?
🔗 **Links** take you to another webpage, another section of the same page (also known as an anchor), or to a file that can be previewed. Typically, this changes the page’s address, hence the use of the `href` attribute.
🔳 **Buttons**, on the other hand, trigger actions on the current page. They can open menus, modal windows, submit forms, or trigger any action using JavaScript.
Mixing up these elements can be confusing, especially for people using assistive technologies. Correct implementation that follows their semantics helps users quickly understand what each element does and how to interact with it.
While we’re on the topic of buttons, it’s important to always implement them in a way that makes their state clear for all users.
What do we mean? Whether a button is collapsed, expanded, selected, in progress, or unavailable. Remember to use attributes like: `aria-expanded`, `aria-selected`, `aria-checked`, `aria-busy`, `aria-disabled`, and so on…
We’ll continue this topic next week. Since this criterion is extensive, we’ll definitely come back to it! 🙂 In the meantime, enjoy your rest and stay safe! ☀️
Małgorzata Szymczak
Accessibility Specialist & Junior Frontend Developer
Recommended articles
-
16.11.2023Not only design
Book Review: “Neurotribes: The Legacy of Autism and the Future of Neurodiversity”
Today, we celebrate International Tolerance Day. Along with the establishment of this day, the Declaration of Principles of Tolerance was…
-
02.02.2023Accessibility
WCAG 2.1 – Criterion 1.2.3 – Audio Description or Text Alternative for Media (Recording) (Level A)
Movies accessible to everyone. Let’s imagine we have a video material that we want to publish on a well-known platform…
-
17.08.2022Accessibility
How to Create an Accessible E-commerce?
Usually, on the Kinaole blog, we describe good accessibility practices to you so that you can use this knowledge in…