Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які основні типи ARIA-атрибутів існують?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**ARIA-атрибути** поділяються на три типи: **ролі** (`role`, визначають тип елемента), **стани** (`aria-checked`, `aria-expanded` тощо, показують поточний стан) і **властивості** (`aria-label`, `aria-describedby` тощо, додають опис і зв'язки). **Ключове:** разом вони роблять інтерфейс зрозумілим для скринридерів і відповідним стандартам WCAG.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ специфікації **WAI-ARIA (Accessible Rich Internet Applications)** існує три основні типи атрибутів, кожен з яких відповідає за свою роль у забезпеченні доступності інтерфейсу. Вони допомагають екранним читачам та іншим допоміжним технологіям **розуміти сенс, стан і взаємозв'язок елементів**. --- ### 1. **Ролі (roles)** - визначають *що це за елемент* Роль повідомляє, **яку функцію виконує елемент**: кнопку, вкладку, діалог, меню, список тощо. Це особливо важливо, якщо використовується кастомна верстка на `<div>` чи `<span>` замість нативних HTML-тегів. **Приклади:** ```html <div role="button">Submit</div> <div role="dialog">...</div> <ul role="listbox"> <li role="option">Warsaw</li> </ul> ``` Приклади поширених ролей: - `role="button"` - кнопка - `role="link"` - посилання - `role="checkbox"` - прапорець - `role="dialog"` - модальне вікно - `role="menu"` / `role="menuitem"` - навігаційне меню - `role="alert"` - важливе сповіщення --- ### 2. **Стани (states)** - описують *поточний стан елемента* Ці атрибути динамічні: **їхні значення можуть змінюватися в процесі роботи інтерфейсу**. Вони повідомляють користувачу, що зараз відбувається: елемент активний, розкритий, обраний тощо. **Приклади:** ```html <button aria-pressed="true">Favorite</button> <div aria-expanded="false">Menu</div> <li aria-selected="true">Warsaw</li> <input type="checkbox" aria-checked="false"> ``` Часто використовувані стани: - `aria-checked` - чи позначений прапорець - `aria-expanded` - чи розкритий елемент (акордеон, меню) - `aria-pressed` - чи натиснута кнопка-перемикач - `aria-selected` - чи обраний пункт - `aria-hidden` - чи прихований елемент від скринридерів --- ### 3. **Властивості (properties)** - описують *характеристики та зв'язки елементів* Ці атрибути **не залежать від стану**, вони задають додаткову інформацію: описи, зв'язки, ролі, групи. За їх допомогою можна "пов'язати" елементи між собою, додати текстові пояснення та контекст. **Приклади:** ```html <div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-text"> <h2 id="dialog-title">Confirmation</h2> <p id="dialog-text">Are you sure you want to delete the file?</p> </div> ``` Часто використовувані властивості: - `aria-label` - короткий текстовий опис елемента - `aria-labelledby` - пов'язує елемент із заголовком (за `id`) - `aria-describedby` - пов'язує з описом - `aria-controls` - вказує, яким елементом керує цей елемент - `aria-live` - повідомляє, що вміст усередині оновлюється динамічно (наприклад, повідомлення чату) --- ### 4. (додатково) **Атрибути ARIA Live Region** Використовуються для **динамічних оновлень** контенту, коли потрібно повідомити користувача про нові зміни без перезавантаження сторінки. Приклад: ```html <div aria-live="polite">Loading complete</div> ``` Значення: - `off` - читач не повідомляє про зміни; - `polite` - повідомляє, коли користувач завершить поточну операцію; - `assertive` - повідомляє негайно (для помилок, попереджень). --- ### Підсумкова таблиця: | Тип | Що робить | Приклади | |---|---|---| | **role** | Визначає тип елемента | `role="button"`, `role="dialog"` | | **state (стан)** | Показує поточний стан елемента | `aria-checked`, `aria-expanded`, `aria-selected` | | **property (властивість)** | Додає опис, контекст і зв'язки | `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-controls` | --- ### Висновок: ARIA-атрибути бувають **трьох типів**: 1. **Ролі (**`role`**)** - хто це; 2. **Стани (**`aria-*` **state)** - що зараз відбувається; 3. **Властивості (**`aria-*` **property)** - які є зв'язки та описи. Разом вони роблять інтерфейс **зрозумілим для скринридерів, доступним для клавіатури** та відповідним стандартам **WCAG**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.