Користувач із порушенням зору не може заповнити форму на вашому сайті — кнопка відправлення недоступна з клавіатури, а програма екранного читання (скринрідер) не озвучує помилки. За статистикою WebAIM Million Report, 96% із мільйона домашніх сторінок містять помилки WCAG. Ми проводимо аудит доступності сайту, який виявляє такі бар'єри та дає точні інструкції щодо їх усунення, щоб ваш сайт відповідав стандарту WCAG 2.2 рівня AA. Аудит доступності сайту допомагає уникнути юридичних ризиків: штрафи за недоступність у США сягають $50 000 за перше порушення, а в Європі — до €75 000 за GDPR (для держсайтів). Економія на доопрацюваннях після своєчасного аудиту може становити до $10 000.
Аудит доступності сайту — це не разова перевірка, а вбудовування культури інклюзивності в процес розробки. Комбінований метод (автоматизоване + ручне) виявляє в 2.5 рази більше помилок, ніж самотужки автоматизоване. Своєчасний аудит дозволяє уникнути судових витрат і підвищити лояльність користувачів.
Чому WCAG AA — не просто галочка?
Державні сайти в багатьох країнах зобов'язані дотримуватися WCAG AA. Комерційні проекти слідують йому де-факто: це знижує юридичні ризики та розширює аудиторію на 15–20%. Поточна версія стандарту — WCAG 2.2 — включає нові критерії успішності: фокус-індикація (2.4.13), цільовий розмір (2.5.8) та стійкість введення (2.5.7). Наш аудит покриває всі ці вимоги.
Як ми перевіряємо доступність: від автоматизації до ручного тестування
Автоматизоване сканування виявляє близько 30–40% порушень: відсутність alt-текстів, низький контраст, неправильну структуру заголовків, пропущені ARIA-атрибути. Використовуємо axe-core, Lighthouse та Pa11y.
# axe-core CLI npm install -g @axe-core/cli axe https://mysite.com --reporter=json > axe-report.json Ручне тестування — обов'язковий етап. Перевіряємо навігацію з клавіатури, роботу зі скринрідерами (NVDA + Firefox, VoiceOver + Safari, TalkBack + Android). Модальні вікна, форми, кастомні компоненти — кожен інтерактивний елемент проходить 20+ тестів. Наприклад, при перевірці alt-текстів ми відзначаємо: <img src="banner.jpg" alt="Аудит доступності сайту: знижка 30%"> — коректний alt, а порожній alt на декоративному зображенні — помилка.
Фокус-пастки в модальних вікнах — одна з найчастіших помилок. Правильний код на React:
Код модального вікна
const Modal = ({ isOpen, onClose, children }) => { const modalRef = useRef(null); useEffect(() => { if (isOpen) { const previouslyFocused = document.activeElement; modalRef.current?.focus(); return () => { previouslyFocused?.focus(); }; } }, [isOpen]); return ( <div ref={modalRef} role="dialog" aria-modal="true" aria-labelledby="modal-title" tabIndex={-1}> {children} </div> ); }; Порівняння методів тестування
| Метод | Частка виявлених помилок | Час | Приклади інструментів |
|---|---|---|---|
| Автоматизоване | 30–40% | Хвилини | axe, Pa11y, Lighthouse |
| Ручне | 60–70% | Години–дні | Клавіатура, NVDA, VoiceOver |
| Комбіноване | ~95% | 1–3 дні | Наш стандартний процес |
Що ми перевіряємо: ключові критерії WCAG AA
| Критерій | Вимога | Часта помилка |
|---|---|---|
| 1.1.1 Alt Text | Усі зображення мають alt | Декоративні зображення без alt="" |
| 1.3.1 Info and Relationships | Структура передана семантикою | <div> замість <button>, <nav>, <main> |
| 1.4.3 Contrast | 4.5:1 для тексту, 3:1 для великого | Сірий текст на білому фоні |
| 2.1.1 Keyboard | Усе доступне з клавіатури | Відсутність фокусу на кастомних dropdown |
| 2.4.7 Focus Visible | Видимий індикатор фокусу | outline: none без альтернативи |
| 3.3.1 Error Identification | Помилки форм описані текстом | Тільки колір для позначення помилки |
| 4.1.2 Name, Role, Value | ARIA для кастомних компонентів | Пропущені role/aria-label на іконках-кнопках |
Як виправити типові помилки?
Іконка-кнопка без опису:
// ПОГАНО <div onClick={handleDelete}><TrashIcon /></div> // ДОБРЕ <button onClick={handleDelete} aria-label="Видалити запис"><TrashIcon aria-hidden="true" /></button> Посилання пропуску навігації:
<a href="#main-content" class="skip-link">Перейти до основного вмісту</a> <style> .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 0; top: 0; z-index: 9999; } </style> Структура звіту
- Повний список порушень із прив'язкою до критеріїв WCAG (критичні, серйозні, помірні).
- Скріншоти та HTML-селектори кожного проблемного елемента.
- Рекомендації щодо виправлення з готовими прикладами коду.
- Чек-лист ручної перевірки для розробників.
- Інтеграційні рекомендації для CI/CD (Playwright, axe).
Приклад запису:
- Порушення: Відсутність alt-тексту на зображенні (1.1.1).
- Селектор:
#main img.banner. - Пріоритет: Критичний.
- Рекомендація: Додати
alt="Банер: знижка 30% на зимову колекцію".
Що входить у процес аудиту?
- Аналітика — визначаємо ключові сторінки та сценарії (до 20 сторінок за 1 день).
- Автоматизація — прогін axe/Pa11y, збір 30–40% помилок (1 година).
- Ручне тестування — клавіатура, скринрідери, логічний порядок (1–2 дні).
- Звіт — структурований список з пріоритетами.
- Рекомендації — готові виправлення з кодом (2–3 дні).
Терміни та вартість
Аудит доступності сайту до 20 сторінок займає 2–3 робочих дні. Вартість аудиту під ключ розраховується індивідуально — напишіть нам для оцінки вашого проекту. Зв'яжіться з нами для консультації.
Наш досвід: 5+ років у веб-доступності, 100+ перевірених проектів для банків, держорганів та e-commerce. Гарантуємо відповідність WCAG AA.