Понад один мільярд людей у світі живуть з тією чи іншою формою інвалідності. Це приблизно 15% населення планети. Серед них — незрячі та слабозорі люди, глухі та слабочуючі, люди з руховими порушеннями, когнітивними відмінностями або тимчасовими станами, як-от зламана рука чи мігрень.
Коли ми створюємо вебсайти, не враховуючи цих реалій, ми не просто створюємо незручності. Ми позбавляємо людей доступу до інформації, послуг і можливостей, які інші сприймають як належне. Доступність — це не функція. Це відповідальність.
Що означає вебдоступність
Вебдоступність означає проєктування та розробку вебсайтів таким чином, щоб люди з інвалідністю могли сприймати, розуміти, переміщуватися та взаємодіяти з ними. Це також означає, що вони можуть робити свій внесок у вебпростір.
Це виходить за межі екранних зчитувачів. Доступність охоплює:
- Зорові порушення: сліпота, слабкий зір, дальтонізм
- Слухові порушення: глухота, слабкий слух
- Рухові порушення: обмежена дрібна моторика, тремор, параліч
- Когнітивні порушення: дислексія, СДУГ, проблеми з пам'яттю, порушення навчання
- Тимчасові та ситуативні: зламане зап'ястя, яскраве сонячне світло на екрані, шумне оточення, повільний інтернет
Ключовий висновок: доступний дизайн корисний для всіх. Субтитри допомагають у шумному місці. Високий контраст допомагає при яскравому освітленні. Навігація клавіатурою допомагає досвідченим користувачам. Зрозумілий текст допомагає тим, для кого мова не є рідною. Доступність — це не спеціальний режим, а якісний дизайн.
Стандарт WCAG
Рекомендації з доступності вебконтенту (WCAG) — це міжнародний стандарт вебдоступності, опублікований W3C. Поточна версія — WCAG 2.2, організована навколо чотирьох принципів, відомих за абревіатурою POUR:
Сприйнятність (Perceivable)
Інформація повинна подаватися способами, які можуть сприйняти всі користувачі.
- Текстові альтернативи: кожне зображення потребує атрибута
alt, що описує його вміст. Декоративні зображення використовуютьalt="". - Субтитри та транскрипції: відеоконтент потребує субтитрів; аудіоконтент потребує транскрипцій.
- Адаптивна структура: вміст повинен мати сенс без стилів. Використовуйте семантичний HTML (
<h1>,<nav>,<main>,<article>). - Розрізнюваний вміст: достатній колірний контраст, масштабований текст, жодна інформація лише через колір.
Керованість (Operable)
Користувачі повинні мати можливість керувати інтерфейсом.
- Доступність з клавіатури: кожен інтерактивний елемент повинен бути досяжним і придатним для використання лише за допомогою клавіатури. Ніяких пасток для миші.
- Достатньо часу: якщо контент має часові обмеження, користувачі повинні мати можливість продовжити або вимкнути їх.
- Без тригерів нападів: уникайте контенту, що блимає більше трьох разів на секунду.
- Навігабельність: зрозумілі заголовки сторінок, логічна ієрархія заголовків, посилання для пропуску навігації, видимі індикатори фокусу.
Зрозумілість (Understandable)
Вміст та інтерфейс повинні бути зрозумілими.
- Читабельний текст: вказуйте мову сторінки (атрибут
lang). Використовуйте зрозумілу, просту мову, де це можливо. - Передбачувана поведінка: навігація повинна бути послідовною. Сторінки не повинні несподівано змінювати контекст.
- Допомога при введенні: чітко маркуйте поля форм. Надавайте корисні повідомлення про помилки, які пояснюють, що пішло не так і як це виправити.
Надійність (Robust)
Вміст повинен бути достатньо надійним, щоб працювати з поточними та майбутніми технологіями.
- Валідний HTML: правильна семантична розмітка, яку допоміжні технології можуть надійно інтерпретувати.
- Ім'я, роль, значення: користувацькі компоненти повинні розкривати своє призначення для API доступності (через ARIA за потреби).
Рівні відповідності
WCAG визначає три рівні:
| Рівень | Значення | Приклад |
|---|---|---|
| A | Мінімальна доступність | Зображення мають alt-текст, сторінки мають заголовки |
| AA | Стандартна ціль для більшості сайтів | Коефіцієнт контрастності щонайменше 4,5:1 для звичайного тексту |
| AAA | Найвищий рівень, не завжди досяжний | Коефіцієнт контрастності 7:1, жестова мова для всіх відео |
Більшість законодавств у світі вимагає відповідності Рівню AA. Це той рівень, на який слід орієнтуватися.
Поширені бар'єри та як їх усунути
Відсутній alt-текст у зображеннях
Проблема: користувачі екранних зчитувачів чують «зображення» або нічого.
Рішення: додайте описовий текст alt до кожного інформативного зображення. Для декоративних зображень використовуйте alt="", щоб екранні зчитувачі їх пропускали.
<!-- Good -->
<img
src="chart.png"
alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>
<!-- Decorative -->
<img src="divider.svg" alt="" />
Недостатній колірний контраст
Проблема: люди зі слабким зором або дальтонізмом не можуть прочитати текст.
Рішення: забезпечте мінімальний коефіцієнт контрастності 4,5:1 для звичайного тексту та 3:1 для великого тексту (18px+ або 14px напівжирний). Використовуйте інструмент перевірки контрасту для перевірки ваших колірних комбінацій.
Ви можете перевірити колірний контраст прямо зараз за допомогою нашого інструмента Перевірка контрасту. Він миттєво показує результати відповідності WCAG AA та AAA.
Відсутні мітки форм
Проблема: користувачі екранних зчитувачів не знають, для чого призначене поле форми.
Рішення: кожне поле введення потребує видимого елемента <label>, пов'язаного через атрибут for.
<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />
<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />
Відсутня навігація клавіатурою
Проблема: користувачі, які не можуть використовувати мишу, застрягають.
Рішення: використовуйте нативні HTML-елементи (<button>, <a>, <select>), які за замовчуванням доступні з клавіатури. Якщо ви створюєте користувацькі компоненти, переконайтеся, що вони можуть отримувати фокус і реагують на події клавіатури. Ніколи не видаляйте контури фокусу без надання альтернативи.
Відсутня структура сторінки
Проблема: користувачі екранних зчитувачів не можуть ефективно навігувати.
Рішення: використовуйте семантичний HTML. Один <h1> на сторінку, логічна ієрархія заголовків (без пропуску рівнів), орієнтири (<nav>, <main>, <footer>).
Автоматичне відтворення медіа
Проблема: несподіваний звук заважає користувачам екранних зчитувачів. Автоматичне відтворення відео може спровокувати напади або викликати дискомфорт.
Рішення: ніколи не відтворюйте звук автоматично. Якщо відео відтворюється автоматично, переконайтеся, що звук вимкнений за замовчуванням, і забезпечте елементи керування паузою.
Колір — це не все
Ніколи не покладайтеся лише на колір для передачі інформації. Зверніть увагу:
- Поле форми з червоною рамкою для помилок також потребує іконки або текстового повідомлення
- Діаграма з кольоровими лініями також потребує патернів, міток або легенди
- Посилання в тексті потребує підкреслення або іншої візуальної підказки, а не лише зміни кольору
Приблизно 8% чоловіків і 0,5% жінок мають ту чи іншу форму порушення колірного зору. Проєктування з урахуванням цього — не виняток, а базова інклюзивність.
Тестування доступності
Автоматизоване тестування
Автоматизовані інструменти виявляють приблизно 30-40% проблем доступності. Це гарний перший крок, але не повне рішення.
- axe DevTools (розширення браузера) — сканує сторінку та повідомляє про порушення WCAG
- Lighthouse (вбудований у Chrome DevTools) — включає аудит доступності
- WAVE (вебінструмент) — візуальне накладення, що показує проблеми
Ручне тестування
Багато проблем доступності вимагають людського судження:
- Тестування клавіатурою: від'єднайте мишу та пройдіть весь сайт за допомогою Tab, Enter, Escape та клавіш зі стрілками. Чи можете ви дістатися до всього? Чи логічний порядок фокусу?
- Тестування екранним зчитувачем: спробуйте VoiceOver (Mac), NVDA (Windows, безкоштовно) або TalkBack (Android). Чи має вміст сенс, коли його зачитують вголос?
- Тестування масштабуванням: збільшіть масштаб браузера до 200%. Чи працює макет? Чи обрізається або перекривається вміст?
- Зменшений рух: увімкніть "зменшення руху" в налаштуваннях вашої ОС. Чи дотримуються анімації цієї переваги?
Тестування з користувачами
Найцінніший зворотний зв'язок надходить від людей, які дійсно використовують допоміжні технології у своєму повсякденному житті. Якщо ваш бюджет дозволяє, залучіть користувачів з інвалідністю до процесу тестування.
Доступність — це спектр, а не прапорець
Доступність — це не одноразовий проєкт з фінішною лінією. Це постійна практика. Вебсайти змінюються, додається контент, і нові бар'єри можуть з'являтися з кожним оновленням.
Мета — не досконалість. Мета — це постійне вдосконалення та щира турбота про людей, які користуються тим, що ви створюєте. Почніть з найбільш впливових змін — колірний контраст, alt-текст, навігація клавіатурою, мітки форм — і рухайтеся далі.
Кожен бар'єр, який ви усуваєте — це двері, які ви відчиняєте.
Швидкий контрольний список
- Усі зображення мають змістовний текст
alt(абоalt="", якщо декоративні) - Колірний контраст відповідає WCAG AA (4,5:1 для тексту, 3:1 для великого тексту)
- Усі поля форм мають видимі мітки
- Сайт повністю навігабельний за допомогою клавіатури
- Заголовки слідують логічній ієрархії
- Індикатори фокусу видимі
- Мова сторінки встановлена (атрибут
langна<html>) - Жодна інформація не передається лише через колір
- Відео мають субтитри
- Анімації дотримуються
prefers-reduced-motion