Доступність сайту: як зробити сайт безбар'єрним

Доступність сайту (вебдоступність, digital accessibility) — це властивість сайту, завдяки якій ним можуть повноцінно користуватися люди з різними можливостями: з порушеннями зору, слуху, моторики чи когнітивних функцій. Безбар'єрний сайт можна прочитати екранним диктором, пройти лише з клавіатури, зрозуміти без звуку і без ідеального зору.

Ми в QD — команда глухих професіоналів. Тому для нас доступність — не пункт у технічному завданні, а щоденний досвід: ми самі багато років натрапляємо на відео без субтитрів, форми з єдиною кнопкою «Зателефонуйте нам» і капчі, які пропонують «прослухати код».

Для кого потрібна доступність сайту

Найчастіше про вебдоступність думають як про «функцію для людей з інвалідністю». Але насправді вона потрібна значно ширшій аудиторії:

• Постійні порушення — незрячі та слабозорі люди, глухі й люди з порушенням слуху, люди з порушеннями моторики чи когнітивних функцій.
• Тимчасові обмеження — зламана рука, втома очей після операції, контузія.
• Ситуативні обмеження — яскраве сонце на екрані, шумний транспорт без навушників, дитина на руках і телефон в іншій.
• Люди старшого віку — дрібний шрифт і низький контраст для них стають реальною перешкодою.

Тобто доступний сайт — це просто зручний сайт для всіх. І бонус: багато вимог доступності (структура заголовків, підписи до зображень, швидкість) збігаються з тим, що любить Google.

Які стандарти діють у 2026 році

WCAG 2.2 — міжнародний орієнтир

Головний документ — настанови Web Content Accessibility Guidelines (WCAG) від консорціуму W3C. Актуальна версія — WCAG 2.2, яка стала рекомендацією W3C 5 жовтня 2023 року і додала 9 нових критеріїв до версії 2.1. Нова WCAG 3.0 поки існує лише як робочий проєкт, тож на практиці орієнтуватися варто на 2.2.

У WCAG є три рівні відповідності: A (мінімум), AA (стандарт, на який посилаються закони) і AAA (найвищий). Для більшості сайтів ціль — рівень AA.

ДСТУ EN 301 549:2022 — український стандарт

В Україні діє національний стандарт ДСТУ EN 301 549:2022, який повністю відтворює однойменний європейський стандарт і спирається на WCAG 2.1. Мінцифри разом з ПРООН також опублікували офіційний український переклад WCAG 2.1 — ним зручно користуватися розробникам і дизайнерам.

European Accessibility Act — якщо продаєте в ЄС

З 28 червня 2025 року в Євросоюзі діє Європейський акт про доступність (European Accessibility Act, Директива 2019/882). Він поширюється на інтернет-магазини, банківські послуги, транспорт, електронні книжки та інші споживчі сервіси — зокрема й на компанії поза ЄС, які продають клієнтам у Євросоюзі. Технічна планка — стандарт EN 301 549, тобто для вебконтенту фактично WCAG 2.1 рівня AA.

Законопроєкт про цифрову доступність в Україні

У грудні 2025 року уряд вніс до Верховної Ради законопроєкт № 14278 «Про цифрову доступність в Україні». Він пропонує зробити вимоги доступності обов'язковими не лише для держави, а й для приватного бізнесу в ключових сферах — банки, транспорт, інтернет-магазини, медицина, освіта, зв'язок. Мікропідприємства планують звільнити від цих вимог (крім фінансових і платіжних послуг), а власників сервісів — зобов'язати публікувати декларацію про доступність з посиланням на головній сторінці.

На момент підготовки статті ми не знайшли інформації про остаточне ухвалення закону. Перевіряйте актуальний статус законопроєкту на сайті Верховної Ради — але готуватися варто вже зараз.

Чотири принципи WCAG простими словами

Усі вимоги WCAG згруповані навколо чотирьох принципів:

1. Сприйманість — інформацію можна сприйняти будь-яким способом: у зображень є текстові описи, у відео — субтитри, текст достатньо контрастний.
2. Керованість — сайтом можна користуватися з клавіатури, кнопки достатньо великі, нічого не зникає швидше, ніж людина встигає прочитати.
3. Зрозумілість — тексти прості, навігація передбачувана, помилки у формах пояснено людською мовою.
4. Надійність — код коректний, і сайт правильно працює з допоміжними технологіями: екранними дикторами, лупами, голосовим керуванням.

Чек-лист: доступність сайту за 12 пунктів

Цей список не замінює повний аудит, але закриває найпоширеніші проблеми, які ми бачимо на сайтах українського бізнесу.

1. Контраст тексту — щонайменше 4,5:1 для звичайного тексту і 3:1 для великого (рівень AA). Світло-сірий текст на білому — найчастіша помилка.
2. Alt-тексти — кожне змістовне зображення має опис. Декоративні картинки отримують порожній alt="", щоб диктор їх пропускав.
3. Структура заголовків — один h1 на сторінку, далі h2, h3 по порядку. Не обирайте рівень заголовка «за розміром шрифту».
4. Навігація з клавіатури — усе, що можна натиснути мишкою, можна пройти клавішею Tab і натиснути Enter. Фокус добре видно.
5. Субтитри до відео — для записаних відео субтитри є вимогою вже рівня A. Автоматичні субтитри без перевірки — не рішення.
6. Підписи полів форм — у кожного поля є видимий підпис, а не лише підказка всередині, яка зникає під час введення.
7. Зрозумілі помилки — «Перевірте e-mail: бракує символу @» замість «Помилка 422».
8. Розмір кнопок — WCAG 2.2 вимагає, щоб ціль для натискання була не меншою за 24×24 пікселі. Комфортно — від 44 пікселів.
9. Інформація не лише кольором — помилку позначають і кольором, і текстом чи іконкою.
10. Мова сторінки — атрибут lang="uk", щоб диктор читав українською, а не з англійською вимовою.
11. Без автоматичних рухів — карусель можна зупинити, а анімації вимикаються, якщо користувач обрав «зменшити рух» у налаштуваннях.
12. Кілька способів зв'язку — не лише телефон, а й форма, e-mail чи месенджер. Для глухих людей це критично.

Як перевірити доступність свого сайту

• Тест клавіатурою. Відкладіть мишку і пройдіть сайт клавішею Tab: від меню до відправлення форми. Якщо фокус губиться або його не видно — це проблема.
• Екранний диктор. Увімкніть VoiceOver на iPhone чи Mac, TalkBack на Android або безкоштовний NVDA на Windows і послухайте, як звучить ваша головна сторінка.
• Автоматичні сканери. Lighthouse у Chrome, axe DevTools або WAVE швидко знаходять технічні помилки: контраст, відсутні alt, порожні посилання. Але вони ловлять лише частину проблем.
• Реальні користувачі. Найкращий тест — попросити людину, яка щодня користується допоміжними технологіями, виконати типове завдання на вашому сайті.

Віджети «доступності», які додають кнопку з іконкою людини і перемикачами контрасту, не роблять сайт доступним. Вони не виправляють код, а іноді навіть заважають екранним дикторам. Доступність закладається в дизайн і розробку.

Чому бізнесу вигідно інвестувати у вебдоступність

• Більше клієнтів. Люди з інвалідністю, люди старшого віку, ветерани з наслідками поранень — велика аудиторія, яку недоступний сайт просто втрачає.
• Краще SEO. Чиста структура, alt-тексти, зрозумілі посилання і швидкість допомагають і людям, і пошуковим системам.
• Готовність до закону. Вимоги вже діють у ЄС і готуються в Україні. Виправити доступність на етапі дизайну дешевше, ніж переробляти готовий сайт.
• Репутація. Безбар'єрний сайт — це конкретний доказ того, що компанія дбає про людей, а не лише говорить про це.

Як ми робимо доступні сайти в QD

Кожен наш сайт ми проєктуємо з думкою про доступність: перевіряємо контраст кольорів ще на етапі брендингу, будуємо правильну структуру заголовків, робимо навігацію з клавіатури і даємо кілька способів зв'язку без дзвінків. А про те, як зробити контент зручним саме для глухих людей, ми розповіли в окремій статті — «Сайт для глухих: жестова мова, субтитри і текст».

Хочете перевірити свій сайт або зробити новий — одразу безбар'єрним? Залиште заявку, і ми підкажемо, з чого почати.

Джерела: W3C: WCAG 2.2 — рекомендація W3C · ПРООН: новий державний стандарт ДСТУ EN 301 549:2022 · Комітет ВРУ з питань свободи слова: висновок щодо законопроєкту № 14278 · Mind: уряд схвалив законопроєкт про цифрову доступність