11. ARIA Basics

HTML: Скелет. Урок: ARIA Basics

В этом уроке мы познакомимся с ARIA – набором атрибутов, которые делают веб-контент более доступным для людей с ограниченными возможностями. ARIA расширяет HTML, позволяя нам описывать роли, состояния и свойства элементов, которые иначе могут быть не понятны вспомогательным технологиям, таким как скринридеры.

Что такое ARIA?

ARIA (Accessible Rich Internet Applications) – это набор атрибутов HTML, которые предоставляют дополнительную информацию о роли, состоянии и свойствах элементов пользовательского интерфейса. Представьте, что у вас есть нестандартный элемент, например, кастомный выпадающий список, который скринридер не может правильно интерпретировать. ARIA позволяет “объяснить” скринридеру, что это за элемент, как с ним взаимодействовать и в каком состоянии он находится.

Основные атрибуты ARIA

ARIA использует три основных типа атрибутов:

• role: Определяет роль элемента, например, button, menu, alert.
• aria-*state: Описывает текущее состояние элемента, например, aria-expanded="true" (элемент развернут) или aria-disabled="true" (элемент отключен).
• aria-*property: Определяет свойства элемента, например, aria-label="Close" (метка для кнопки закрытия) или aria-describedby="elementId" (элемент, содержащий описание текущего элемента).

Практические примеры кода

Пример 1: Кастомный выпадающий список

Предположим, у нас есть кастомный выпадающий список, реализованный с помощью <div> и JavaScript.

<div role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="listbox1" aria-label="Выберите опцию">
  <button role="button" aria-labelledby="combobox">Выберите опцию</button>
  <ul role="listbox" id="listbox1">
    <li role="option">Опция 1</li>
    <li role="option">Опция 2</li>
    <li role="option">Опция 3</li>
  </ul>
</div>

В этом примере:

• role="combobox" говорит скринридеру, что это поле для ввода с выпадающим списком.
• aria-expanded="false" указывает, что список изначально свернут. JavaScript должен изменять это значение на true, когда список развернут.
• aria-haspopup="listbox" указывает, что у элемента есть всплывающее окно типа listbox.
• aria-owns="listbox1" связывает combobox с элементом списка listbox с идентификатором listbox1.
• aria-label="Выберите опцию" предоставляет текстовую метку для элемента.
• role="button" указывает роль кнопки.
• role="listbox" указывает роль списка.
• role="option" указывает роль элемента списка.

Пример 2: Кнопка “Закрыть”

<button aria-label="Закрыть окно">X</button>

Здесь aria-label предоставляет альтернативный текст для кнопки, который будет прочитан скринридером. Вместо “X” скринридер прочитает “Закрыть окно”, что более информативно.

Пример 3: Сообщение об ошибке

<label for="email">Email:</label>
<input type="email" id="email" aria-describedby="email-error">
<p id="email-error" role="alert">Пожалуйста, введите корректный email.</p>

Здесь aria-describedby связывает поле ввода с сообщением об ошибке. role="alert" сообщает скринридеру, что это важное сообщение, требующее внимания.

Жизненный пример

Многие современные JavaScript фреймворки (React, Vue, Angular) активно используют ARIA атрибуты. Например, библиотеки компонентов пользовательского интерфейса часто предоставляют компоненты с уже настроенными ARIA атрибутами для обеспечения доступности. На сайтах, где важна доступность (например, государственные сайты, образовательные платформы), использование ARIA является обязательным. Кроме того, большинство популярных веб-сайтов (например, Google, Facebook, Wikipedia) используют ARIA для улучшения доступности своего контента.

Ключевые моменты

• ARIA улучшает доступность веб-контента для людей с ограниченными возможностями.
• ARIA атрибуты предоставляют дополнительную информацию о роли, состоянии и свойствах элементов.
• Используйте ARIA, когда стандартные HTML элементы не предоставляют достаточной информации для вспомогательных технологий.
• Важно тестировать ваш веб-сайт с использованием скринридеров, чтобы убедиться, что ARIA атрибуты работают правильно.
• Не используйте ARIA для дублирования функциональности HTML. Используйте HTML элементы семантически правильно, и только потом дополняйте их ARIA, если это необходимо.

Интерактивный пример