Практическое использование и обзор HTML5 ARIA

Быстрый ответ

Accessible Rich Internet Applications (ARIA) — это атрибуты HTML5, созданные с целью повышения доступности веб-контента. Они обеспечивают передачу вспомогательным технологиям информации о ролях и свойствах элементов пользовательского интерфейса, которые не могут быть распознаны только на основании HTML.

<button aria-label="Закрыть" onclick="myLittleFunction()">X</button>

В данном примере aria-label сообщает скринридерам, что задачей этой кнопки является закрытие. Без такой метки, знак "X" мог бы быть воспринят как несущественный элемент.

Основы ARIA

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

ARIA и программы чтения с экрана

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

<span id="countdown_timer" role="timer" aria-live="polite">00:30:00</span>

Здесь role определяет элемент как таймер, а aria-live устанавливает, что этот элемент должен генерировать звуковые уведомления о своих обновлениях таким образом, чтобы они не отвлекали пользователя.

Подробнее об этом расскажет наш спикер на видео

Роли ARIA: Весь мир — сцена

Роли в ARIA — это актёры на сцене вашего веб-пространства; они могут исполнять самые разные роли, от banner до navigation, от slider до tab. Это помогает распознавать различные элементы на вашей веб-странице и понимать их функциональное назначение.

HTML5 и ARIA: Синергия, а не конкуренция

Элементы HTML5 должны быть широко использованы, подобно чипсам Lay's. ARIA дополняет HTML5, обогащая его интерактивными возможностями, которые HTML5 не способен предоставить самостоятельно.

ARIA: Не просто декорации

ARIA — это больше, чем просто атрибуты. Добивайтесь навигации с помощью клавиатуры, управляйте фокусом и следуйте лучшим практикам ARIA, чтобы обеспечить качественную доступность ваших веб-страниц.

Предупреждение: неправильное использование ARIA

Неправильное применение атрибутов ARIA может вызвать больше проблем, чем заблудившийся кот на клавиатуре. Нужно подробно изучить их функционал, прежде чем начать использовать.

Визуализация

Продолжая аналогию, можно представить сайт как жилой комплекс (🏗️), рассчитанный на все группы населения, включая людей с ограничениями здоровья,

Детали Схемы: ARIA
----------------------
| Возможности     | Символ |
|-----------------|:-------:|
| Роли            | 🚻      |
| Состояния       | ⚙️      |
| Свойства        | 🏷️      |

ARIA выступает в роли навигационных указателей (🚻🏷️⚙️), помогающих ориентироваться в этом «жилом комплексе»

🏗️ + 🚻🏷️⚙️ = 🏠 (доступный для всех)
# ARIA превращает ваш HTML в «обитаемое пространство» для всех, а не просто конструкцию из блоков и стен.

ARIA в действии

ARIA внедряет машинночитаемую семантику в ваш интерфейс, облегчая восприятие его сложных компонентов.

Работа с динамическим содержимым

Атрибуты ARIA обеспечивают доступность динамического контента, например, виджетов или уведомлений, для программ чтения с экрана.

Гармония между HTML5 и ARIA

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

<nav> <!-- Строительный блок -->
  <!-- В случае сложной навигации-->
  <div role="navigation" aria-label="Главное навигационное меню"> <!-- ARIA приходит на помощь! -->
    <!-- Содержимое -->
  </div>
</nav>

Ловушки ARIA: Как избегать типичных ошибок

Неправильное использование ARIA — это как игра в "уворачивайся" с мячом для американского футбола — это сбивает с толку как вспомогательные технологии, так и пользователей. Поэтому необходимо применять ARIA с осознанностью.

Полезные материалы

1. ARIA – Доступность | MDN — Полное руководство по ARIA, снабжённое практическими примерами.
2. Обзор WAI-ARIA | Инициатива веб-доступности (WAI) | W3C — Знакомство с официальной спецификацией от W3C.
3. Использование ARIA в HTML | HTML5 Doctor
4. Введение в ARIA – Accessible Rich Internet Applications | WebAIM
5. Теперь увидите меня – A List Apart
6. Руководство по авторским практикам ARIA | APG | WAI | W3C
7. Accessibility APIs: Ключ к доступности веба — Smashing Magazine