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