3.1. Meaningful content
Every content created should provide 3 essential pieces of information to explain its purpose:
- Role - The type of element - for example, a button, a heading or a list.
- Name - The text to identify / describe the element.
- State - Needed in dynamic elements - for example, if a button is pressed or a menu opened.
For sighted users, the context and visual appearance of an element can be enough to understand its purpose. However, the same is not true for people relying on assistive technologies.
Most of the time, role and name are automatically included throught semantic HTML. However, in some cases it's not enough. That's were ARIA (Accessible Rich Internet Applications) attributes comes in.
For example, providing elements with accessible names is one of the most important responsibilities authors have when developing accessible web experiences. A common naming technique is to add the attribute
<!-- A button to close a dialog / modal --> <button aria-label="Close modal"> X </button>
There are more than 45
aria-* attributes. Today we'll start by exploring the most common.
In the exercise page,
there are 7 cases where some pieces of information were forgotten or missused. Some
aria-* attributes and
.sr-only class will be your friends here.
🎯 Goal: Add accessible names / status to all elements.
Hint: Use the Accessibility tab on DevTools to verify if the accessible name is working. It can be a nice alternative to screen readers.