Валидные значения атрибута role в HTML5/XHTML: обзор

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

Атрибут role предназначен для обеспечения доступности и создания интерактивного контекста для программ-чтения с экрана и вспомогательного оборудования. Основные значения атрибута role:

• banner: Отмечает основной заголовок или вступление сайта.
• navigation: Указывает на секцию навигации со списком ссылок.
• main: Отражает главное содержимое страницы.
• complementary: Определяет дополнительный раздел, который может функционировать независимо.
• contentinfo: Обозначает информацию, обычно находящуюся внизу страницы.
• button: Интерактивный элемент, предназначенный для нажатия.
• article: Отмечает автономную часть контента.

Для усиления семантики можно использовать дополнительные ARIA атрибуты:

• aria-labelledby: Ссылается на элемент, задающий заголовок.
• aria-controls: Ссылается на элемент, который контролируется.
• aria-activedescendant: Определяет активный элемент в компоненте.

Пример применения на практике:

<nav role="navigation">
  <!-- Список ссылок или меню -->
</nav>

<main role="main">
  <!-- Ключевое содержимое страницы -->
</main>

Предпочтение лучше отдавать стандартным элементам HTML, используя ARIA роли только как второй вариант.

Семантика и функциональность ролей

Понимание семантики

Каждая роль вносит свой уникальный смысл в HTML-элементы, формируя пользовательский опыт, особенно для пользователей вспомогательных технологий. Поэтому важно, чтобы контент и его роль были согласованы.

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

Иерархические и структурные роли

Понимание последовательности и структурных ролей помогает точно отображать архитектуру информации на сайте.

• form: Определяет область как форму.
• heading: Обозначает заголовки разных уровней.

Интерактивные роли

Интерактивные роли помогают пользователям вспомогательных технологий понять, какие действия доступны.

• link: Обозначает ссылку.
• menuitem: Определяет пункт в меню.

Роли виджетов

Роли виджетов определяют функциональность и поведение основных компонентов пользовательского интерфейса.

• slider: Позволяет выбирать значение в диапазоне.
• tab: Отображает вкладку в наборе вкладок.

Лучшие практики использования ролей

Приоритет отдается семантическим элементам HTML5 (таким как <header>, <nav>, <main> и т.д.), которые уже имеют встроенное определение роли. Используйте ARIA роли только когда это действительно необходимо.

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

Представьте атрибут role как набор инструментов, в котором каждый выполняет свою функцию:

🔧 Набор инструментов ролей HTML5/XHTML 🔧
| Инструмент (Роль)      | Назначение                     |
| ----------------      | -----------------------     |
| ✏️ `role="button"`     | Интерактивный элемент для клика        |
| 📚 `role="article"`    | Отдельный фрагмент контента   |
| 📐 `role="navigation"` | Ориентир для перемещения по сайту      |
| 🎭 `role="main"`       | Главное содержание страницы  |
| 💬 `role="alert"`      | Важное уведомление для пользователя    |

Воспринимайте role в HTML5 и XHTML как помощь пользователям и средство адаптации под вспомогательное оборудование.

Ознакомление с новыми ролями

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

Специальные рекомендации

Убедитесь, что использование role не вызывает у пользователей путаницы. Проверяйте свой код и тестируйте его на реальном вспомогательном оборудовании для подтверждения совместимости.

Избегание проблем

Сражения с неочевидными особенностями поведения браузеров и ролей так же часты, как котики в интернете. Отслеживайте актуальные изменения и проверяйте совпадение визуального порядка и порядка в DOM. Это очень важно для совмещения работы с программами чтения с экрана.

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

1. ARIA в HTML – W3C — Информация о использовании ARIA ролей в HTML.
2. WAI-ARIA Роли – MDN Веб-документация — Подробное руководство по ролям WAI-ARIA для веб-доступности.
3. Руководство по авторским практикам ARIA – W3C — Лучшие практики использования ARIA ролей в веб-приложениях.
4. Доступность HTML5 — Обзор поддержки функций HTML5 и ARIA ролей в браузерах.
5. Доступные богатые интернет-приложения (WAI-ARIA) 1.2 – W3C — Современные стандарты WAI-ARIA от W3C, включающие роли и свойства.
6. Отношения ссылок – IANA — Объяснения типов ARIA ссылок, признанных на международном уровне.