Настройка доступности сайта (WCAG) на 1С-Битрикс
WCAG 2.1 уровня AA — не опциональное требование для государственных и финансовых сайтов в России. С 2023 года ряд регуляторов прямо ссылается на стандарт при проверках. Но даже для коммерческих проектов доступность влияет на SEO: поисковые роботы читают сайт как screen reader — плохая семантика означает плохую индексацию.
Главные проблемы стандартного Битрикса
Шаблоны Битрикса «из коробки» нарушают 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.
Аудит через автоматические инструменты
Перед правкой кода нужна baseline-проверка. Axe DevTools (расширение Chrome) за 30 секунд находит нарушения с привязкой к DOM-узлам. Lighthouse (вкладка Accessibility) даёт скоринг 0–100. Целевое значение для WCAG AA — 90+, но 100 не гарантирует полное соответствие: автоматика не проверяет логику, только разметку.
Типичный отчёт для битриксового магазина: 20–40 нарушений, из которых 60% — отсутствующие alt, 20% — проблемы с контрастом, 10% — отсутствие label у полей форм.
Формы: поля с 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 минимум.