Go Back

3.1. Meaningful content

Introduction

Every content created should provide 3 essential pieces of information to explain its purpose:

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 aria-label.

<!-- 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.

Exercise

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.

Notes