Що таке веб-доступність? WCAG і інклюзивний дизайн простими словами
Веб-доступність означає створення сайтів і застосунків, якими можуть користуватися люди з інвалідністю — незрячі, які користуються програмами озвучування екрана, люди, що не можуть користуватися мишею, люди зі слабким зором або дальтонізмом, люди з порушеним слухом чи з когнітивними або навчальними порушеннями. На практиці це зводиться до таких речей, як текстові альтернативи для зображень, достатній контраст кольорів, форми з правильними мітками і робота всього з клавіатури. Міжнародний стандарт для цього — WCAG, Web Content Accessibility Guidelines від W3C.
Доступність часто скорочують до a11y — «a», потім 11 літер, потім «y».
Чому доступність важлива, коли ви створюєте з ШІ
Конструктори ШІ добре створюють застосунки, які виглядають правильно. Доступність здебільшого стосується того, чого не видно на скриншоті: чи справді кнопка є кнопкою, чи має поле введення мітку, яку може озвучити програма для незрячих, чи можна дійти до меню клавішею Tab.
Тому варто ставити такі питання:
- Це легко пропустити. Випадаюче меню з власним стилем може виглядати ідеально і бути неможливим для використання без миші. Ви цього не помітите, доки не перевірите.
- Це дешевше зробити правильно на початку. Прохання про доступні компоненти з першого запиту майже нічого не коштує. Переробка готового застосунку означає правки на кожному екрані.
- Це допомагає всім. Субтитри допомагають людям у шумних місцях, добрий контраст — людям з телефонами на сонці, а зрозумілі мітки допомагають усім швидше заповнювати форми.
- Це перетинається з SEO. Правильні заголовки, описові посилання та alt-текст допомагають і пошуковим системам розуміти ваші сторінки — див. SEO для сайтів, створених за допомогою ШІ.
- Це може бути обов’язковим. Залежно від того, де ви працюєте і кому служите, доступність може бути юридичним обов’язком.
Повсякденна аналогія
Уявіть вхід до будівлі.
Сходи добре працюють для багатьох людей. Пандус потрібен людям у інвалідних візках — і також батькам з дитячими візками, кур’єрам з візками та мандрівникам з валізами. Автоматичні двері, зрозумілі таблички, шрифт Брайля на кнопках ліфта і добре освітлення кожне прибирає перешкоду для когось.
Веб-доступність — та сама ідея для цифрових просторів: пандуси, таблички і поручні вашого застосунку. І, як і з будівлею, набагато легше передбачити пандус у проєкті, ніж додати його після того, як застигне бетон.
WCAG коротко
WCAG публікує Ініціатива веб-доступності W3C. Поточна версія — WCAG 2.2, вперше опублікована у жовтні 2023 року. Вона зворотно сумісна: вміст, що відповідає WCAG 2.2, відповідає також 2.1 і 2.0, а W3C рекомендує використовувати останню версію. WCAG 2.2 також затверджено як міжнародний стандарт ISO/IEC 40500:2025. Дуже відмінна WCAG 3 перебуває в розробці як ранній проєкт, а не як завершений стандарт.
WCAG побудовано на чотирьох принципах, які часто запам’ятовують як POUR:
| Принцип | Значення | Приклади |
|---|---|---|
| Сприйнятність (Perceivable) | Люди можуть сприйняти вміст тими органами чуття, якими користуються | Alt-текст для зображень, субтитри для відео, достатній контраст |
| Керованість (Operable) | Люди можуть користуватися елементами керування і навігувати | Доступ з клавіатури, немає обмежень часу, яких не можна продовжити, видимий фокус |
| Зрозумілість (Understandable) | Вміст і поведінка мають сенс | Зрозумілі мітки, корисні повідомлення про помилки, послідовна навігація |
| Надійність (Robust) | Працює з різними браузерами і допоміжними технологіями | Правильні HTML-елементи, коректні назви і ролі елементів керування |
Кожне правило має перевірювані критерії успіху на трьох рівнях:
- Рівень A — мінімум. Порушення цих критеріїв повністю блокують деяких людей.
- Рівень AA — стандартна ціль, і саме на цей рівень посилаються більшість законів і політик.
- Рівень AAA — найвищий рівень. Інколи варто на нього орієнтуватися, але W3C не рекомендує вимагати його для всіх сайтів, бо деякий вміст не може його відповідати.
WCAG 2.2 додав до 2.1 дев’ять критеріїв успіху, зокрема Target Size (Minimum) на рівні AA — клікабельні цілі загалом мають бути щонайменше 24 на 24 CSS-пікселі, з винятками — та Accessible Authentication (Minimum), яка обмежує кроки входу, що покладаються на пам’ять або головоломки, наприклад коли потрібно повторно вводити пароль, не даючи його вставити. Також він прибрав застарілий критерій «Parsing».
Приклад: форма реєстрації
Ось форма реєстрації, яку міг би створити ШІ, і що знаходить перевірка доступності:
| Проблема | Кого стосується | Виправлення |
|---|---|---|
| Поля використовують placeholder-текст («Email») замість міток | Користувачі програм озвучування; будь-хто, хто забуває, яке було поле, щойно почав вводити | Видима <label>, пов’язана з кожним полем |
| Світло-сірий текст на білому з контрастом значно менше 4,5:1 | Люди зі слабким зором, будь-хто на вулиці | Темніший текст, що відповідає контрасту 4,5:1 |
| Помилки показуються лише червоною рамкою | Люди з дальтонізмом, користувачі програм озвучування | Текстове повідомлення поруч із полем, яке озвучується програмами для незрячих |
«Зареєструватися» — стилізований <div>, а не <button> | Користувачі з клавіатурою і програмами озвучування не можуть його активувати | Використайте справжній елемент <button> |
| Немає видимого контуру при переході по полях Tab | Користувачі з клавіатурою губляться, де вони знаходяться | Чіткий стиль фокусу |
| У зображення логотипу немає alt-тексту | Користувачі програм озвучування чують назву файлу | Alt-текст на кшталт «Acme Bookings» |
Жодне з цих виправлень суттєво не змінює вигляд форми. Але кожне змінює те, чи може деяка людина взагалі нею скористатися.
Ключові терміни
| Термін | Значення |
|---|---|
| Програма озвучування екрана | Програмне забезпечення, що зачитує екран вголос або передає текст на брайлівський дисплей, наприклад VoiceOver, NVDA або JAWS. |
| Alt-текст | Текстовий опис зображення, який зачитують програми озвучування. Декоративні зображення мають порожній alt, щоб їх пропускали. |
| Коефіцієнт контрасту | Наскільки відрізняються кольори тексту і фону, від 1:1 до 21:1. |
| Навігація з клавіатури | Користування сайтом клавішами Tab, Enter, Space і стрілками замість миші. |
| Індикатор фокусу | Видимий контур, що показує, на якому елементі зараз клавіатура. |
| Семантичний HTML | Використання правильного елемента для завдання — <button>, <nav>, <h2> — щоб браузери та допоміжні технології розуміли сторінку. |
| ARIA | Додаткові атрибути, що описують власні елементи керування для допоміжних технологій. Їх краще використовувати обережно; спочатку йдуть вбудовані елементи HTML. |
| Допоміжні технології | Інструменти, якими люди користуються для доступу до комп’ютерів, від програм озвучування до перемикачів і голосового керування. |
Поширені хибні уявлення
- «Доступність важлива лише для незрячих користувачів». Вона охоплює порушення зору, рухової функції, слуху, мовлення та когнітивні порушення, а також тимчасові ситуації, як-от зламана рука.
- «Доступні сайти виглядають простими». Доступність обмежує деякі речі — контраст, стилі фокусу, розмір тексту, — але гарні доступні сайти є нормою, а не винятком.
- «Автоматична перевірка показує 100, отже, ми готові». Автоматичні інструменти знаходять лише частину проблем. Чи має alt-текст справжній сенс і чи логічний потік для програми озвучування, має перевірити людина.
- «Віджет-оверлей зробить нас відповідними стандартам». Панелі, прикручені зверху, не можуть виправити відсутні мітки чи зламаний доступ з клавіатури у вашому коді. Виправляйте джерело.
- «У нас немає користувачів з інвалідністю». Ви можете просто не знати. Багато порушень не видно, а люди, які натикаються на перешкоду, зазвичай просто йдуть.
Що попросити у вашого ШІ-конструктора
- «Зроби це так, щоб відповідати WCAG 2.2 рівня AA.»
- «Використовуй семантичний HTML: справжні кнопки, посилання, заголовки в правильному порядку і мітки для кожного поля форми.»
- «Переконайся, що кожен інтерактивний елемент працює лише з клавіатури і має видимий стиль фокусу.»
- «Перевір контраст усіх кольорів тексту й іконок — 4,5:1 для звичайного тексту, 3:1 для великого тексту та іконок.»
- «Додай змістовний alt-текст до інформативних зображень і порожній alt до декоративних.»
- «Показуй помилки у формах текстом, пов’язаним з полем, а не лише кольором.»
- «Враховуй налаштування зменшеного руху користувача для анімацій.»
- «Запусти автоматичну перевірку доступності і перелічи, що вона не може перевірити, щоб я перевірив це вручну.»
Потім перевірте самі: відкладіть мишу і спробуйте завершити головний сценарій, використовуючи лише Tab, Shift+Tab, Enter і Space. Спробуйте вбудовану програму озвучування на телефоні на головній сторінці. Збільште масштаб браузера до 200% і подивіться, чи нічого не ламається.
Доступність у Mythex
Mythex не має окремого перевірювача доступності, тож сприймайте доступність як частину ваших запитів і тестування. Просіть WCAG 2.2 AA з першого запиту, перевіряйте результат у Preview за допомогою клавіатури і використовуйте /test, щоб агент пройшов головні сценарії, перш ніж ви опублікуєте — див. App Testing. Рецепт SEO також просить семантичні заголовки та змістовний alt-текст, які служать обом цілям.
Практичний чек-лист див. у як зробити ваш сайт доступним. Щодо дизайну читайте як спроєктувати гарний застосунок за допомогою ШІ, а перед запуском — як протестувати застосунок перед запуском. Авторитетним джерелом є огляд WCAG від W3C.
Запитання
Що таке веб-доступність простими словами?
Веб-доступність означає проєктування й створення сайтів та застосунків так, щоб люди з інвалідністю могли їх сприймати, розуміти, навігувати й використовувати. Це стосується людей, які незрячі й користуються програмами озвучування екрана, людей, які не можуть користуватися мишею, людей зі слабким зором або дальтонізмом, людей із порушеним слухом і людей з когнітивними порушеннями.
Що таке WCAG?
WCAG (Web Content Accessibility Guidelines) — це міжнародний стандарт веб-доступності, опублікований W3C. Поточна версія — WCAG 2.2, вперше опублікована у жовтні 2023 року. Критерії успіху поділяються на рівні A, AA і AAA, і саме рівень AA є цільовим, на який посилаються більшість організацій і законів.
Який контраст кольорів вимагає WCAG?
На рівні AA звичайний текст має мати коефіцієнт контрасту щонайменше 4,5:1 відносно фону, а великий текст (приблизно 18 пунктів або 14 пунктів жирним) — щонайменше 3:1. Іконки та видимі частини елементів керування мають мати щонайменше 3:1 відносно сусідніх елементів.
Чи є веб-доступність юридичною вимогою?
У багатьох місцях і для багатьох організацій так. Закони відрізняються залежно від країни та сфери — наприклад, Європейський акт про доступність охоплює багато споживчих цифрових продуктів і послуг у ЄС. Перевірте правила, що стосуються саме вас, або зверніться до юриста.
Чи може віджет або оверлей доступності зробити мій сайт відповідним стандартам?
Сам по собі — ні. Оверлеї додають панель інструментів поверх сайту, але не можуть надійно виправити глибші проблеми, як-от відсутні мітки, непридатна навігація з клавіатури чи незрозуміла структура. Надійний підхід — виправляти код і вміст самого сайту.