Виправлення WCAG на 1С-Бітрікс: аудит та налаштування

Стандартний каталог Бітрікса не проходить автоматичну перевірку Axe — 40 порушень на головній сторінці. Це не привід панікувати, а причина для планомірного аудиту. WCAG 2.1 рівня AA — не опціональна вимога для державних і фінансових сайтів в Росії. В останні роки регулятори прямо посилаються на стандарт під час перевірок. Але навіть для комерційних проєктів доступність впливає на SEO: пошукові роботи читають сайт як screen reader — погана семантика означає погану індексацію. Ми налаштовуємо доступність під ключ: від аудиту до фінального тестування з реальними користувачами. За 5 років ми провели понад 50 проєктів з WCAG, включаючи великі інтернет-магазини на Бітрікс.

Які порушення WCAG найчастіше зустрічаються в Бітріксі?

Шаблони Бітрікса «з коробки» порушують WCAG з кількох систематичних причин. Розглянемо найчастіші.

Зображення без alt. Компонент catalog.element виводить <img> через CFile::ShowImage() — цей метод не додає alt автоматично. У шаблоні потрібно явно передавати атрибут:

echo CFile::ShowImage($fileId, 800, 800, 'border="0"', 'alt="' . htmlspecialcharsEx($arResult['NAME']) . '"'); 

Кнопки без текстового вмісту. Іконкові кнопки типу «В кошик» з SVG-іконкою і без тексту порушують критерій 1.1.1. Мінімальне виправлення — додати aria-label:

<button class="cart-btn" aria-label="Додати в кошик"> <svg>...</svg> </button> 

Навігаційні меню без семантики. Стандартний компонент bitrix:menu генерує <ul>/<li> без <nav> і без aria-label — кілька навігаційних меню на сторінці не розрізнені для screen reader. Рішення — обернути кожне меню в <nav> з унікальним aria-label.

Як виправити відсутність alt у компоненті catalog.element?

Покажемо на прикладі: клієнт — інтернет-магазин автозапчастин з каталогом на 10 000 товарів. Axe знаходив 400 порушень alt. Ми перевизначили шаблон catalog.element — у result_modifier.php додали масив з alt з NAME елемента. Потім у шаблоні зображення виводиться через звичайний <img> з alt. Додатково довелося обробити зображення в торгівельних пропозиціях через подію OnGetImageAlt. В результаті порушень alt стало 0, а час завантаження не збільшився — розмір сторінки змінився незначно.

Які автоматичні інструменти використовувати для аудиту WCAG?

Перед правкою коду потрібна baseline-перевірка. Згідно з документацією WCAG (Understanding WCAG 2.1), автоматичні інструменти не замінюють експертизу, але прискорюють пошук типових помилок. Axe DevTools (розширення Chrome) за 30 секунд знаходить порушення з прив'язкою до DOM-вузлів. Lighthouse (вкладка Accessibility) дає скоринг 0–100. Цільове значення для WCAG AA — 90+, але 100 не гарантує повну відповідність: автоматика не перевіряє логіку, лише розмітку.

Типовий звіт для бітріксового магазину: 20–40 порушень, з яких 60% — відсутні alt, 20% — проблеми з контрастом, 10% — відсутність label у полів форм.

Ручний аудит виявляє в 3 рази більше критичних помилок, ніж автоматичні перевірки. Тому ручне тестування в 3 рази краще за автоматичне за кількістю знайдених проблем.

Чому автоматичної перевірки недостатньо?

Axe знаходить лише те, що закладено в правилах: контраст, alt, aria. Але не перевіряє логіку фокусу, читаність screen reader, навігацію з клавіатури. Наприклад, якщо кнопка з'являється динамічно, Axe її побачить, але не перевірить, чи можна до неї дотабулюватися. Ручне тестування з NVDA або JAWS обов'язкове. Ручний аудит виявляє в 3 рази більше критичних помилок, ніж автоматичні перевірки.

Як забезпечити доступність форм?

Форми Бітрікса (кошик, реєстрація, зворотній дзвінок) часто використовують placeholder замість <label>. Це порушення критерію 1.3.1 — placeholder зникає при введенні, користувач з когнітивними порушеннями втрачає контекст поля.

Компонент bitrix:main.register генерує поля через $arResult['PERSONAL_FIELDS'] — шаблон потрібно переписати з явними <label for="...">:

<label for="USER_LOGIN">Логін</label> <input type="text" id="USER_LOGIN" name="USER_LOGIN" required aria-required="true" autocomplete="username"> 

Skip-link для клавіатурної навігації

Перший елемент на сторінці має бути посиланням «Перейти до основного вмісту» — воно дозволяє користувачам клавіатури пропустити навігацію. У Бітріксі додається на початок header.php:

<a class="skip-link" href="#main-content">Перейти до основного вмісту</a> 

CSS робить її видимою лише при фокусі:

.skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 0; top: 0; z-index: 9999; padding: 8px 16px; background: #000; color: #fff; } 

Контраст і розміри шрифтів

WCAG 2.1 AA вимагає контраст тексту до фону мінімум 4.5:1 для звичайного тексту і 3:1 для великого (18pt+). Сірі підписи на білому фоні (#999 на #fff) дають контраст 2.85:1 — порушення. Перевірка через інструмент Contrast Checker WebAIM, виправлення — замінити колір на #767676 мінімум.

Як провести аудит WCAG на Бітріксі?

Проведення аудиту доступності сайту Бітрікс за стандартом WCAG 2.1 AA дозволяє виправити критичні порушення. Виправлення alt зображень у каталозі Бітрікс — один із перших кроків аудиту WCAG. Ось покрокова інструкція:

1. Запустіть Axe DevTools на кожній типовій сторінці (головна, каталог, картка, кошик, форма).
2. Зберіть звіт — експортуйте JSON з порушеннями.
3. Класифікуйте їх за групами: alt, контраст, label, ARIA.
4. Виправте спочатку ті, що блокують користувацький шлях (кнопки без тексту, відсутність skip-link).
5. Повторіть автоматичну перевірку — переконайтеся, що лічильник порушень впав.
6. Проведіть ручне тестування з NVDA або JAWS на 3–5 ключових сценаріях.

Вартість аудиту — від $270–390ів. Економія на підтримці за рік може скласти до $1.8k–2.6kів.

Що входить у налаштування доступності під ключ

Ми надаємо: звіт аудиту з повним переліком порушень та рекомендаціями, виправлення всіх помилок у коді шаблонів і компонентів, налаштування skip-link, семантичної розмітки, контрастів, доопрацювання форм, повторний аудит після виправлень, навчання контент-менеджерів, документацію для розробника. Гарантуємо усунення всіх критичних порушень. Зв'яжіться з нами для оцінки вашого проєкту. Замовте безкоштовну консультацію з доступності вашого сайту на Бітрікс.

Досвід: понад 50 проєктів з доступності на 1С-Бітрікс, 5+ років на ринку. Використовуємо WCAG 2.1 та російські рекомендації.