Доступність вебу та атрибути ARIA

Що таке веб-доступність?

Веб-доступність (a11y) означає проектування веб-сайтів так, щоб всі люди, включаючи тих, хто має інвалідність, могли сприймати, навігувати та взаємодіяти з контентом. Це як етична відповідальність, так і часто юридична вимога.

Чому доступність важлива

~15% населення світу має якусь форму інвалідності
Покращує SEO (пошукові системи читають семантичний HTML)
Краща зручність використання для всіх (користувачі клавіатури, повільні мережі)
Юридична відповідність (ADA, WCAG, Розділ 508)

Основні принципи (WCAG)

Принцип	Опис
Сприйнятливий	Контент має бути представленим у способах, які користувачі можуть сприймати (alt текст, субтитри)
Операбельний	Інтерфейс має бути операбельним за допомогою клавіатури, без пасток часу
Зрозумілий	Контент та UI мають бути зрозумілими
Стійкий	Контент працює з допоміжними технологіями

Семантичний HTML на першому місці

Використання правильних HTML елементів є найважливішою практикою доступності:

html

<!-- ❌ Погано — div з обробником кліку -->
<div onclick="navigate()">Перейти до панелі керування</div>

<!-- ✅ Добре — правильне посилання -->
<a href="/dashboard">Перейти до панелі керування</a>

<!-- ❌ Погано — div, стилізований як кнопка -->
<div class="btn" onclick="submit()">Відправити</div>

<!-- ✅ Добре — справжня кнопка -->
<button type="submit">Відправити</button>

Що таке ARIA?

ARIA (Accessible Rich Internet Applications) — це набір HTML атрибутів, які надають додаткову семантику для допоміжних технологій (екрани читання).

Основні атрибути ARIA

Атрибут	Опис	Приклад
`role`	Визначає призначення елемента	`role="navigation"`, `role="dialog"`
`aria-label`	Текстова мітка для елемента	`aria-label="Закрити меню"`
`aria-labelledby`	Посилається на інший елемент як на мітку	`aria-labelledby="heading-id"`
`aria-describedby`	Посилається на елемент з описом	`aria-describedby="help-text"`
`aria-hidden`	Ховає елемент від екранних читачів	`aria-hidden="true"`
`aria-expanded`	Вказує на стан розширення	`aria-expanded="false"`
`aria-required`	Позначає поле як обов'язкове	`aria-required="true"`
`aria-live`	Оголошує зміни динамічного контенту	`aria-live="polite"`
`aria-disabled`	Вказує на стан вимкнення	`aria-disabled="true"`

Приклад ARIA

html

<button 
  aria-expanded="false" 
  aria-controls="dropdown-menu"
  aria-label="Відкрити меню навігації"
>
  ☰ Меню
</button>

<nav id="dropdown-menu" aria-hidden="true" role="navigation">
  <ul>
    <li><a href="/">Головна</a></li>
    <li><a href="/about">Про нас</a></li>
  </ul>
</nav>

Основні практики доступності

1. Alt текст для зображень

html

<!-- Інформативне зображення -->
<img src="chart.png" alt="Продажі зросли на 40% у Q3 2024">

<!-- Декоративне зображення — порожній alt -->
<img src="decoration.svg" alt="">

2. Навігація за допомогою клавіатури

css

/* Ніколи не видаляйте контури фокусу без заміни */
:focus { outline: 2px solid #007bff; }

/* Користувацький стиль фокусу */
:focus-visible { 
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

3. Контраст кольорів

Мінімальне співвідношення контрасту: 4.5:1 для звичайного тексту
Мінімальне співвідношення контрасту: 3:1 для великого тексту
Не покладайтеся тільки на колір для передачі інформації

4. Мітки форм

html

<!-- ✅ Ассоційована мітка -->
<label for="email">Електронна пошта:</label>
<input type="email" id="email" name="email">

<!-- ❌ Без асоціації мітки -->
<input type="email" placeholder="Електронна пошта">

Важливо:

Перше правило ARIA: не використовуйте ARIA, якщо ви можете використовувати рідний HTML елемент, який вже має потрібну вам семантику. <button> завжди краще, ніж <div role="button">. Використовуйте ARIA лише для заповнення прогалин, які HTML не може покрити.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань