Аудит веб-доступності для сайтів на 1С-Бітрікс

Якщо ваш сайт на Бітрікс не проходить аудит доступності сайту за WCAG 2.1 (WCAG 2.1), ви втрачаєте до 15% аудиторії та ризикуєте штрафами. Наші експерти проводять аудит доступності за стандартом WCAG 2.1 (рівень AA) і дають конкретні рекомендації щодо виправлення. Ми маємо 10+ років досвіду, провели понад 50 аудитів для Бітрікс-сайтів. Ми гарантуємо усунення порушень та надаємо сертифікат відповідності WCAG 2.1.

Чому аудит доступності критичний для Бітрікс-сайтів?

Стандартні шаблони Бітрікс часто містять порушення: відсутність атрибута alt у тегах , відсутність label для полів форм, недостатній коефіцієнт контрастності (нижче 4.5:1) та відсутність індикатора фокусу при клавіатурній навігації. Це не лише заважає користувачам з інвалідністю, але й погіршує SEO. Пошукові системи враховують семантику та доступність. Крім того, в Україні діють рекомендації, які радять WCAG 2.1 для державних сайтів. Для комерційних сайтів аудит — це інвестиція в охоплення та репутацію.

Які порушення WCAG ми найчастіше знаходимо на Бітрікс?

Зображення без alt. Стандартний компонент catalog.element не виводить атрибут alt. Для інформаційних зображень alt має описувати вміст. Виправлення в template.php:

// Неправильно: <img src="<?= $product['PICTURE'] ?>"> // Правильно: <img src="<?= $product['PICTURE'] ?>" alt="<?= htmlspecialchars($product['NAME']) ?>"> 

Форми без підписів. У компонентах subscribe.form та webform.* часто використовують placeholder замість label. Placeholder зникає при введенні — скринрідер не повідомляє, що за поле. Правильна розмітка:

<label for="email">Email</label> <input type="email" id="email" name="email" placeholder="[email protected]"> 

Недостатній контраст. Сірий текст #999 на білому фоні #fff дає контраст 2.85:1 при необхідному 4.5:1. Перевіряємо через Colour Contrast Checker або axe DevTools.

Відсутній фокус на клавіатурі. outline: none у reset-стилях ламає навігацію з клавіатури. Замінюємо на кастомний стиль:

:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; } 

Модальні вікна без керування фокусом. Спливаючі вікна мають утримувати фокус при відкритті та повертати його на тригер при закритті.

Як самостійно перевірити базові порушення?

1. Відкрийте сайт у Chrome, запустіть Lighthouse (вкладка Audits). Він покаже основні проблеми контрасту та атрибутів.
2. Встановіть розширення axe DevTools — запустіть аналіз на кількох сторінках: головна, каталог, картка товару, форма зворотного зв'язку.
3. Спробуйте навігацію з клавіатури: табулюйте по всіх елементах. Переконайтеся, що видно фокус, а модальні вікна не блокують вихід.
4. Увімкніть скринрідер (NVDA на Windows, VoiceOver на macOS) і прослухайте ключові сторінки. Зверніть увагу на читання зображень і форм.

Автоматичні інструменти виявляють лише 30–40% проблем, а ручна перевірка знаходить у 2 рази більше порушень. Наш підхід поєднує автоматичні та ручні методи, що дає в 2 рази більше точності, ніж автоматичні інструменти окремо.

Як ми проводимо аудит WCAG 2.1?

Ми використовуємо комбінацію автоматичних і ручних перевірок. Наші інженери мають сертифікати з WCAG та досвід понад 10 років у розробці на Бітрікс. Автоматичні інструменти (axe DevTools, WAVE, Lighthouse, Pa11y) виявляють 30–40% проблем. Потім проводиться ручна перевірка з клавіатурою та скринрідерами NVDA/VoiceOver. На основі результатів складаємо детальний звіт.

Повний перелік критеріїв WCAG 2.1 рівня AA (30+ перевірок)

Охоплюються всі успішні критерії з Perceivable, Operable, Understandable, Robust. Наприклад: контраст 4.5:1, клавіатурна навігація, ARIA-атрибути, заголовки, мітки форм, керування фокусом, обробка помилок і повідомлення про статус.

Що входить у звіт за аудитом?

Звіт містить таблицю порушень із зазначенням критерію WCAG, рівня (A/AA), статусу та сторінок. Кожній проблемі присвоєно пріоритет: критичні (рівень A), середні (AA) та рекомендації. Для типових помилок наведено готові виправлення коду компонентів Бітрікс. Також даються рекомендації щодо семантичної структури та ARIA. Після внесення виправлень проводиться повторна перевірка.

Терміни виконання

Замовте аудит доступності — ми перевіримо всі сторінки та дамо готові рішення. Отримайте консультацію з аудиту та економте на штрафах. Зв'яжіться з нами для безкоштовної оцінки вашого проекту.