Проверка доступности сайта на 1С-Битрикс по WCAG 2.1

Каждый четвёртый пользователь сталкивается с барьерами доступности. Если ваш сайт на Битрикс не соответствует WCAG, вы теряете до 15% аудитории и рискуете штрафами. Наши эксперты проводят аудит доступности по стандарту WCAG 2.1 (уровень AA) и дают конкретные рекомендации по исправлению. Мы работаем с Битрикс более 10 лет и знаем типовые ошибки в шаблонах и компонентах.

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

Стандартные шаблоны Битрикс часто содержат нарушения: изображения без alt, формы без label, низкий контраст и отсутствие фокуса. Это не только мешает пользователям с инвалидностью, но и ухудшает 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 раза больше нарушений. Поэтому мы сочетаем оба метода.

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

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

Что входит в отчёт по аудиту?

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

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

Закажите аудит доступности — мы проверим все страницы и дадим готовые решения. Получите консультацию по аудиту и экономьте на штрафах. Свяжитесь с нами для бесплатной оценки вашего проекта.