Аудит доступности сайта (WCAG 2.1) на 1С-Битрикс

Аудит доступности сайта (WCAG 2.1) на 1С-Битрикс

WCAG 2.1 — стандарт доступности веб-контента. Уровень A — минимальные требования, AA — общепринятый стандарт для коммерческих сайтов. В России доступность сайтов госструктур регулируется ГОСТами (Р 52872-2019), но для коммерческих сайтов это прежде всего вопрос охвата аудитории и SEO: правильная семантика, подписи изображений, контраст — всё это улучшает и ранжирование.

Инструменты автоматической проверки

Ни один автоматический инструмент не покрывает 100% критериев WCAG. Но они закрывают 30–40% проблем быстро:

• axe DevTools (расширение Chrome/Firefox) — наиболее полная автоматическая проверка
• WAVE (wave.webaim.org) — удобная визуализация ошибок прямо на странице
• Lighthouse (встроен в Chrome DevTools, вкладка Accessibility) — даёт балл и список проблем
• Pa11y — CLI-инструмент для автоматизации проверок в CI/CD

Запускайте проверки на нескольких типовых страницах: главная, каталог, карточка товара, корзина, страница оформления, личный кабинет.

Частые проблемы на сайтах Битрикс

Изображения без alt. Стандартный компонент catalog.element выводит alt="" или вовсе не выводит атрибут. Для информационных изображений alt должен описывать содержимое; для декоративных — alt="" корректен.

В template.php компонента проверьте:

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

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

// Для декоративного изображения:
<img src="banner.jpg" alt="" role="presentation">

Недостаточный контраст текста. WCAG 2.1 AA требует контраст не менее 4.5:1 для обычного текста, 3:1 для крупного. Серый текст на белом фоне #999 на #fff = 2.85:1 — нарушение. Проверяйте через Colour Contrast Checker или axe DevTools.

Формы без подписей. В Битрикс формы обратной связи (subscribe.form, webform.*) часто используют placeholder вместо <label>. placeholder исчезает при вводе — скринридер не сообщает пользователю, что за поле:

<!-- Неправильно: -->
<input type="email" placeholder="Ваш email">

<!-- Правильно: -->
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]">

Нет фокуса на интерактивных элементах. Сайт должен быть полностью управляем с клавиатуры. Стандартная CSS-строка outline: none в reset-стилях ломает навигацию для пользователей без мыши. Замените на кастомный стиль фокуса:

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

Корзина и оформление заказа. Компонент sale.order.ajax активно использует AJAX — при обновлении контента должен обновляться ARIA live region, чтобы скринридер сообщил об изменениях:

<div aria-live="polite" aria-atomic="true" id="cart-status"></div>

// При обновлении корзины
document.getElementById('cart-status').textContent = 'Корзина обновлена. Итого: ' + totalPrice + ' руб.';

Модальные окна. Всплывающие окна в Битрикс (подтверждение добавления в корзину, выбор города) должны удерживать фокус внутри при открытии и возвращать фокус на триггер при закрытии. Без этого пользователи с клавиатурной навигацией «проваливаются» за пределы модального окна.

Семантическая структура страниц Битрикс

Заголовки. Типичная ошибка в шаблонах Битрикс: несколько <h1> на странице или пропущенные уровни (за <h2> сразу <h4>). На странице должен быть один <h1>, далее — последовательная иерархия.

Навигация. Меню должно быть в <nav> с aria-label. Если несколько <nav> — каждый должен иметь уникальный aria-label:

<nav aria-label="Основное меню">...</nav>
<nav aria-label="Хлебные крошки">...</nav>
<nav aria-label="Пагинация">...</nav>

Кнопки и ссылки. <button> — для действий (добавить в корзину, отправить форму). <a> — для навигации. Использование <div onclick> вместо <button> ломает доступность полностью.

Аудит в формате отчёта

Сроки выполнения