Що робить атрибут role?
Атрибут role в HTML використовується для вказівки семантичної ролі елемента, тобто щоб повідомити браузеру та допоміжним технологіям (наприклад, скринридерам), що це за елемент і яку функцію він виконує.
Він робить інтерфейс зрозумілим для людей, які використовують екранні читачі, особливо якщо сторінка побудована не на нативних тегах (<button>, <nav>, <header>), а на <div> і <span>.
Основна ідея
role потрібен для того, щоб:
- надати сенс елементу, якого він не має типово;
- позначити тип елемента (кнопка, діалог, меню, вкладка, таблиця тощо);
- зробити кастомні UI-компоненти доступними для скринридерів.
Простий приклад
<div role="button" tabindex="0">Submit</div>Для користувача з екраном - це звичайна кнопка.
Для скринридера без role - просто "група тексту".
З role="button" програма озвучить:
"Кнопка. Submit."
Коли role особливо потрібен
- Коли ви використовуєте нестандартні елементи:
<div role="checkbox" aria-checked="true">Agree</div>- Коли робите кастомні компоненти на JS, наприклад, вкладки, випадні списки, модальні вікна.
<div role="tablist">
<div role="tab" aria-selected="true">Tab 1</div>
<div role="tab">Tab 2</div>
</div>- Коли хочете уточнити сенс нативного елемента, наприклад:
<section role="region" aria-label="News"></section>Часто використовувані значення role
| Категорія | Приклади ролей | Призначення |
|---|---|---|
| Структура | banner, main, navigation, contentinfo, complementary | Визначають основні області сторінки |
| Інтерактивні елементи | button, link, checkbox, menuitem, switch, tab, slider | Роблять елемент керованим |
| Контейнери / групи | list, listbox, grid, menu, tablist, toolbar | Визначають групи пов'язаних елементів |
| Діалоги / сповіщення | alert, dialog, tooltip, status | Повідомляють користувачу про зміни |
| Табличні структури | table, row, cell, columnheader, rowheader | Описують дані в табличній формі |
Правила використання
- Використовуй
roleтільки за потреби. Якщо є нативний елемент (<button>,<nav>,<header>), ARIA не потрібна. -> Завжди краще нативна семантика. roleне змінює візуал, тільки семантику та сприйняття. Скринридер "почує" інше, але зовнішній вигляд залишиться колишнім.- Некоректне використання шкодить. Неправильна роль збиває допоміжні технології та погіршує доступність.
Приклад правильного коду
<nav role="navigation" aria-label="Main menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About us</a></li>
</ul>
</nav>Скринридер озвучить:
"Навігація. Main menu."
Висновок:
Атрибут role повідомляє допоміжним технологіям функцію елемента, роблячи інтерфейс доступним і зрозумілим.
Він потрібен, коли:
- нативного тега немає,
- ви створюєте кастомний елемент,
- потрібно уточнити семантику.
Простіше кажучи: HTML показує, як виглядає елемент, а
roleпояснює, що він робить.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.