WCAG Criterion 4.1.2 – Name, Role, Value (Level A) part 1

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! ☀️