Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить атрибут role?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Атрибут `role`** вказує семантичну роль елемента (кнопка, діалог, меню, вкладка тощо), повідомляючи браузеру та скринридеру, яку функцію виконує елемент, навіть якщо це `<div>` чи `<span>`. **Ключове:** `role` не змінює вигляд елемента, лише його семантику, і потрібен тільки тоді, коли немає відповідного нативного HTML-тега.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняАтрибут `role` в HTML використовується для вказівки **семантичної ролі елемента**, тобто щоб повідомити браузеру та допоміжним технологіям (наприклад, скринридерам), **що це за елемент і яку функцію він виконує**. Він робить інтерфейс **зрозумілим для людей, які використовують екранні читачі**, особливо якщо сторінка побудована не на нативних тегах (`<button>`, `<nav>`, `<header>`), а на `<div>` і `<span>`. --- ### Основна ідея `role` потрібен для того, щоб: - надати *сенс* елементу, якого він не має типово; - позначити тип елемента (кнопка, діалог, меню, вкладка, таблиця тощо); - зробити кастомні UI-компоненти доступними для скринридерів. --- ### Простий приклад ```html <div role="button" tabindex="0">Submit</div> ``` Для користувача з екраном - це звичайна кнопка. Для скринридера без `role` - просто "група тексту". З `role="button"` програма озвучить: > "Кнопка. Submit." --- ### Коли `role` особливо потрібен 1. Коли ви використовуєте **нестандартні елементи**: ```html <div role="checkbox" aria-checked="true">Agree</div> ``` 2. Коли робите **кастомні компоненти** на JS, наприклад, вкладки, випадні списки, модальні вікна. ```html <div role="tablist"> <div role="tab" aria-selected="true">Tab 1</div> <div role="tab">Tab 2</div> </div> ``` 3. Коли хочете **уточнити сенс нативного елемента**, наприклад: ```html <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` | Описують дані в табличній формі | --- ### Правила використання 1. **Використовуй** `role` **тільки за потреби.** Якщо є нативний елемент (`<button>`, `<nav>`, `<header>`), **ARIA не потрібна**. -> Завжди краще нативна семантика. 2. `role` **не змінює візуал**, тільки семантику та сприйняття. Скринридер "почує" інше, але зовнішній вигляд залишиться колишнім. 3. **Некоректне використання шкодить.** Неправильна роль збиває допоміжні технології та погіршує доступність. --- ### Приклад правильного коду ```html <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` **пояснює, що він робить.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.