Перевірка доступності сайту: автоматична чи ручна
· 5 хв читання
Автоматичні перевірки швидко й надійно знаходять технічні помилки: відсутній альтернативний текст, недостатній контраст, поля форм без підписів. Але чи справді сайтом можна користуватися з клавіатурою та екранним читачем, можуть оцінити лише люди. Найкраща стратегія — поєднання: автоматично, регулярно й по всьому сайту; вручну — прицільно для найважливіших сценаріїв.
Як працюють автоматичні перевірки
Автоматичний тест завантажує сторінку в браузері і застосовує до коду правила. Поширена відкрита бібліотека для перевірок — axe-core; у версії 4.11 вона містить понад 100 правил, приблизно дві третини з них пов’язані з критеріями WCAG рівнів A і AA. Типові правила:
- Чи має кожне зображення атрибут
alt? - Чи має кожне поле форми пов’язаний підпис?
- Чи достатній контраст тексту з фоном?
- Чи має кожна кнопка доступну назву?
- Чи вказано мову сторінки?
- Чи коректні атрибути ARIA?
Такі правила можна перевірити однозначно: атрибут є або його немає, контраст вищий за 4,5:1 або нижчий.
Що автоматичні перевірки вміють добре
- Охоплення. Сотні сторінок за короткий час, без утоми.
- Повторюваність. Та сама перевірка щотижня з порівнянними результатами.
- Раннє виявлення. Нові помилки після оновлення помітні одразу.
- Вартість. У перерахунку на сторінку значно дешевше за будь-яку ручну перевірку.
- Підтвердження. Історія показує, що ви постійно працюєте над доступністю.
Де автоматичні перевірки впираються в межі
Автоматичні тести охоплюють лише частину можливих бар’єрів; наскільки велику, дослідження оцінюють по-різному (тест GOV.UK, дослідження Deque). Типові прогалини:
| Запитання | Чому автоматика не може на нього відповісти |
|---|---|
| Чи змістовно альтернативний текст описує зображення? | «IMG_4711.jpg» формально є альтернативним текстом, але марним. |
| Чи логічний порядок переходу клавішею Tab? | Автоматика бачить код, а не шлях сторінкою. |
| Чи завжди видно фокус упродовж сценарію? | Залежить від станів, анімацій, оверлеїв. |
| Чи можна повністю оформити замовлення з клавіатури? | Потрібна справжня взаємодія в кілька кроків. |
| Чи зрозумілі повідомлення про помилки? | Це питання мови, а не синтаксису. |
| Чи оголошує екранний читач «Додано до кошика»? | Потрібен тест із допоміжною технологією. |
| Чи не перекриває cookie-банер кнопку у фокусі? | Залежить від макета і розміру екрана. |
До цього додаються хибні спрацювання в граничних випадках, наприклад з текстом на зображеннях чи градієнтах, де контраст важко обчислити.
Тому правило таке: автоматична перевірка — не повний аудит. Хто обіцяє інше, обіцяє забагато.
Як виглядає ручна перевірка
Ручна перевірка йде за критеріями успішності WCAG і тестує з реальними допоміжними технологіями:
- Клавіатура: керувати сторінкою лише клавішами Tab, Shift+Tab, Enter, пробіл, стрілками та Escape.
- Фокус: чи завжди зрозуміло, де ви зараз? Чи не ховається фокус під закріпленими шапками або банерами?
- Масштаб і перекомпонування: збільшення 200 %, вузька ширина екрана, без горизонтальної прокрутки.
- Екранний читач: пройти основний сценарій з NVDA у Windows або VoiceOver на Mac та iPhone.
- Зміст: оцінити за змістом альтернативні тексти, тексти посилань, заголовки й повідомлення про помилки.
- Мультимедіа: субтитри, аудіоопис, керування відео та слайдерами.
Як метод для структурованої перевірки підходить методологія оцінювання WCAG-EM від W3C. Повний аудит зіставляє всі результати з критеріями успішності і, залежно від обсягу, триває дні, а не хвилини.
Приклад із повсякденного життя магазину
Візьмімо поле «Код купона» під час оформлення замовлення. Автоматична перевірка повідомляє: поле введення не має пов’язаного підпису, лише текст-заповнювач. Це чітка, технічно виявна помилка — швидко знайдено, швидко виправлено. Але чи оголосить екранний читач повідомлення «Недійсний код» після надсилання і чи опиниться фокус потім у доречному місці, покаже лише ручний тест. Обидві перевірки доповнюють одна одну: автоматика знаходить помилку на всіх сторінках, людина перевіряє сценарій.
Порівняння коротко
| Автоматично | Вручну | |
|---|---|---|
| Швидкість | хвилини на багато сторінок | години або дні |
| Охоплення критеріїв | частина критеріїв | усі критерії |
| Повторення | скільки завгодно, наприклад щотижня | епізодично |
| Оцінює якість змісту | ні | так |
| Тестує реальні сценарії | обмежено | так |
| Вартість на сторінку | низька | вища |
Розумне поєднання для інтернет-магазинів
- Автоматично і регулярно. Щотижня перевіряйте всі важливі типи сторінок. Так технічно виявні помилки залишаються під контролем, а нові помітні одразу.
- Вручну для ключових сценаріїв. Пошук, вибір товару, кошик, оформлення замовлення, реєстрація — після кожного великого оновлення і щонайменше раз на рік.
- Вручну для нових компонентів. Новий фільтр, новий плагін оформлення замовлення, новий cookie-банер варті короткого тесту з клавіатурою та екранним читачем перед запуском.
- Враховуйте відгуки. Повідомлення клієнтів про бар’єри цінніші за будь-яке правило.
Перелік критеріїв із позначкою, що виявляється автоматично, а що ні, є в нашому чеклісті WCAG 2.2.
Чому оверлеї — не третій варіант
Іноді віджет пропонують як «автоматичне рішення». Але оверлей нічого не перевіряє і не виправляє в коді; він лише накладає зверху ще один шар. У 2025 році Федеральна торгова комісія США (FTC) домоглася від відомого постачальника виплати одного мільйона доларів США і заборони певних рекламних тверджень. Детальніше в статті Оверлеї — не рішення.
Що це означає для ваших обов’язків
Для магазинів, що підпадають під німецький BFSG: вимоги стосуються фактичної доступності, а не конкретного методу перевірки. Регулярна автоматична перевірка — добрий складник, який можна підтвердити. Для заяви про доступність за § 14 BFSG вам додатково потрібен опис вашої послуги, і жоден сканер його не дасть. Правові рамки пояснює посібник з BFSG.
Як перевіряємо ми
Ми автоматично перевіряємо за WCAG 2.2 AA за допомогою axe-core у справжньому браузері, пояснюємо кожен результат карткою правила і показуємо динаміку тиждень за тижнем. У кожному звіті зазначено: автоматична перевірка, не повний аудит, не юридична консультація. Як це працює в деталях, читайте на сторінці Як це працює. Спробуйте на одній сторінці свого магазину.