Модуль 6 · Урок 21
Accessibility foundations і accessible name
Доступність — властивість змісту й функцій бути perceivable, operable, understandable та robust. Browser перетворює DOM і semantics на accessibility tree, а assistive technology працює з role, name, state і value — не з тим, на що елемент лише схожий візуально.
POUR — чотири питання до кожного рішення
| Принцип | Практичне питання |
|---|---|
| Perceivable | Чи можна отримати інформацію не лише одним сенсорним каналом? |
| Operable | Чи доступні всі дії keyboard та іншими способами введення? |
| Understandable | Чи передбачувані назви, instructions, порядок і помилки? |
| Robust | Чи передає код правильні semantics різним browsers і assistive technologies? |
Accessibility не дорівнює одному overlay, score або кольоровій схемі. Це набір перевірюваних вимог до content, code, interaction і evidence.
Native semantics перед ARIA
<button type="button">Додати до списку</button>
<!-- Не навчальний еквівалент: -->
<div class="button">Додати до списку</div>Native button уже має роль, keyboard behavior, focusability і state model. Звичайний div не набуває їх через CSS. Перше правило ARIA: якщо native HTML передає потрібні semantics і behavior, використовуйте його. ARIA може змінити accessibility tree, але не додає keyboard behavior автоматично.
Role, name, state і value
Кожен interactive control потребує accessible name. Visible label зазвичай найнадійніший, бо його бачать усі. Не дублюйте visible text через aria-label без потреби: воно може замінити computed name і розійтися з інтерфейсом.
Практика
- Відкрийте browser accessibility tree для flawed і reference сторінок.
- Заповніть role/name/state/value map для navigation, book actions і форми.
- Замініть один fake control native-елементом і порівняйте tree та keyboard behavior.
- Для кожного issue запишіть user impact, evidence і мінімальне виправлення.
Accessibility tree — не DOM screenshot
Перевіряйте computed role і name у DevTools; візуальна схожість не доводить programmatic semantics.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.