3.1. Meaningful content

Introduction

Every content needs to provide 3 pieces of information:

• Role - The type of element. E.g a button, a heading or a list.
• Name - The text to identify / describe the element.
• State - Applicable in dynamic elements. E.g. A button is pressed or a menu is opened.

For sighted people, the page visual appearance can be enough to understand an element's purpose. However, the same might not happen to people relying on AT (Assistive Technologies) Screen Readers.

Most of the time, role and name are automatically included through semantic HTML. Let's see an example where that's not true:

<!-- Bad -->
<button>X</button>
<!-- Announced: "X, button" -->

In this case the element name does not make sense semantically. That's where ARIA (Accessible Rich Internet Applications) attributes come in. ARIA allows us to enhance the HTML semantics of an element.

A common naming technique is to add the attribute aria-label.

<!-- Good -->
<button aria-label="Close dialog">X</button>
<!-- Announced: "Close dialog, button" -->

Some automated translation tools will miss aria-label. A safer solution is to add a visually hidden element and hide the visual element.

<!-- Better -->
<button>
  <span class="sr-only">Close dialog</span>
  <span aria-hidden="true">X</span>
</button>
<!-- Announced: "Close dialog, button". -->
<!-- In portuguese: "Fechar dialogo, botão" -->

Note that ARIA never modifies an element styling or behavior. Check the next example:

<!-- This isn't enough! -->
<span role="button"> Get started </span>

This "visual button" is still not focusable and doesn't have keyboard event listeners. (Enter and Space keys). Whenever possible, prefer to use the native HTML elements and use ARIA only has an enhancement.

There are more than 45 aria-* attributes. Today we'll explore some of the most common.

Exercise

In the exercise page, there are multiple cases where some pieces of information were forgotten or misused. Some aria-* attributes and .sr-only class will be your friends here.

🎯 Goal: Add accessible names or status to all elements.

Hint: Use the Accessibility tab on DevTools to verify if the accessible name is working. It can be an alternative to screen readers.

Further reading

• First rule of ARIA use: don't use ARIA
• A11YSupport - Like caniuse but for ARIA
• Translations to aria-* attributes
• Using aria-current

WCAG Success Criterion

• WCAG 4.1.2 Name, Role, Value - Level A
• WCAG 3.1.6 Pronunciation - Level AAA
• WCAG 2.4.8 Link Purpose - Level A
• WCAG 2.4.9 Link Purpose (Link Only) - Level AAA

Exercise takeaways