Доступність сайту: що вимагає закон і чому це вигідно бізнесу
Доступність сайту довго вважали благодійністю: щось, що роблять, коли залишився бюджет. Зараз ситуація змінилася з двох боків. З одного – у Європейському Союзі набув чинності Європейський акт про доступність, і вимоги до цифрових продуктів стали обов’язковими для широкого кола компаній. З іншого – виявилося, що доступний сайт зручніший для всіх, а не тільки для людей з особливими потребами.
Одразу застереження: конкретний обсяг зобов’язань залежить від країни, розміру компанії та виду діяльності, і для мікропідприємств передбачені винятки. Перевіряти своє становище треба з юристом, а не за статтею в блозі. Нижче – технічна частина, яка не залежить від юрисдикції.
Що таке доступність на практиці
Це здатність користуватися сайтом, коли щось працює не так, як у типового відвідувача. Причини бувають постійні й тимчасові, і другі трапляються значно частіше:
- Людина зі слабким зором збільшує шрифт до 200%.
- Відвідувач у метро вимкнув звук і читає субтитри.
- Хтось працює з клавіатури, бо зламалася миша.
- Людина з тимчасовою травмою руки користується однією рукою.
- Хтось відкриває сайт на сонці, де низький контраст просто не видно.
Останній пункт добре ілюструє суть: світло-сірий текст на білому тлі – це не про інклюзію, це про те, що половина мобільних відвідувачів на вулиці нічого не прочитає.
Чотири принципи, на яких усе тримається
| Принцип | Що означає | Типове порушення |
|---|---|---|
| Сприйнятність | Контент можна отримати різними способами | Зображення без alt, відео без субтитрів |
| Керованість | Усім можна користуватися без миші | Меню розкривається тільки при наведенні |
| Зрозумілість | Поведінка передбачувана, помилки пояснені | Форма каже «помилка» без вказівки поля |
| Надійність | Працює з допоміжними технологіями | Кнопки зроблені на div без ролі |
Що перевірити за годину
Ці перевірки не вимагають інструментів і виявляють більшість проблем.
Пройдіть сайт клавішею Tab
Не торкаючись миші, пройдіть головну сторінку від початку до кінця. Дивіться: чи видно, на якому елементі зараз фокус; чи можна дістатися до всіх посилань і кнопок; чи не провалюється фокус у невидимі елементи; чи можна закрити модальне вікно клавішею Esc.
Це найшвидший спосіб знайти проблеми. Якщо неможливо зрозуміти, де ви знаходитесь, – обведення фокуса прибрали стилями, і це найпоширеніша помилка.
Збільште масштаб до 200%
Верстка не має ламатися, текст не повинен обрізатися, горизонтальна прокрутка не має з’являтися.
Перевірте контраст
Основний текст має відрізнятися від фону досить сильно. Норматив – 4.5:1 для звичайного тексту й 3:1 для великого. Світло-сірий на білому й білий на світлому фото не проходять.
Вимкніть зображення
Сторінка має залишатися зрозумілою. Якщо замість картинок порожні місця без підписів, alt відсутні.
Заповніть форму з помилками
Повідомлення має вказувати, яке саме поле неправильне й чому. «Заповніть форму коректно» не годиться.
Чому це вигідно, крім закону
- Це та сама робота, що й SEO. Alt у зображень, структура заголовків, осмислені тексти посилань, семантична розмітка. Пошуковий робот і читалка з екрана читають сторінку схожим чином.
- Ширша аудиторія. Люди з порушеннями зору, слуху й моторики – це помітна частка населення, і вона зростає разом зі старінням аудиторії.
- Менше звернень у підтримку. Зрозумілі помилки у формах прибирають цілий клас питань.
- Краще на мобільних. Великі області натискання, контраст і керованість з клавіатури покращують досвід усіх, а не тільки тих, хто без миші.
- Участь у тендерах. Державні й корпоративні закупівлі дедалі частіше містять вимоги до доступності.
Помилки, які трапляються найчастіше
| Помилка | Чому погано | Як правильно |
|---|---|---|
| Прибрали обведення фокуса | Незрозуміло, де ви на сторінці | Замінити на свій стиль, а не видалити |
| Кнопка зроблена на div | Не працює з клавіатури й читалок | Використовувати button і a |
| Текст посилання «детальніше» | Поза контекстом нічого не означає | «Детальніше про доставку» |
| Alt на кожній декоративній іконці | Шум, що заважає слухати сторінку | Порожній alt для декоративних |
| Колір як єдиний сигнал | Не всі розрізняють відтінки | Колір плюс значок або підпис |
| Плагін-накладка «одна кнопка» | Не виправляє причину, іноді заважає | Виправляти розмітку |
Останній рядок вартий окремої згадки. Віджети, які обіцяють зробити сайт доступним однією кнопкою, не замінюють нормальну верстку і в частині випадків конфліктують із допоміжними технологіями, якими люди реально користуються.
З чого почати
Не з аудиту на сто сторінок. Візьміть три ключові сценарії: головна, сторінка послуги, форма звернення. Пройдіть кожен клавіатурою, перевірте контраст і alt, полагодьте знайдене. Це закриває більшу частину реальних бар’єрів.
Доступність – не окремий проєкт із власним бюджетом. Це набір звичок при верстці, який майже нічого не коштує, якщо закладений із самого початку, і коштує помітно, якщо переробляти готовий сайт. Тому найдешевший момент цим зайнятися – на етапі, коли макети ще не намальовані.
