Как исправить нарушения 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, а время загрузки не увеличилось — размер страницы изменился незначительно.

Аудит через автоматические инструменты

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

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

Ручной аудит выявляет в 3 раза больше критических ошибок, чем автоматические проверки — это подтверждают наши проекты. Axe находит лишь 30% нарушений, тогда как ручное тестирование — 100%.

Почему автоматической проверки недостаточно

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

Формы: поля с label

Формы Битрикса (корзина, регистрация, обратный звонок) часто используют 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 на Битриксе: пошаговая инструкция

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

Стоимость аудита и доработок рассчитывается индивидуально. Экономия на поддержке за год может быть существенной.

Что входит в настройку доступности под ключ

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

Опыт: более 50 проектов по доступности на 1С-Битрикс, 5+ лет на рынке. Используем WCAG 2.1 и российские рекомендации.