Как исправить нарушения 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 и российские рекомендации.

Что включает профессиональная установка 1С-Битрикс

Мы начинаем установку 1С-Битрикс с проверки innodb_buffer_pool_size. Дефолтное значение MySQL (128 МБ) — приговор для интернет-магазина с каталогом на 10 000+ товаров. Мы ставим 70–80% от доступной RAM на выделенном сервере, 50% на VPS. Одна эта настройка ускоряет сайт в 2–3 раза по сравнению с дефолтом. Оценим ваш проект за один день — получите консультацию. Обращайтесь, чтобы заказать установку под ключ с гарантией производительности.

Как выбрать хостинг и редакцию для установки 1С-Битрикс?

BitrixVM — виртуальная машина с предустановленным стеком: nginx + Apache, PHP-FPM, MySQL/MariaDB, Sphinx, Push‑сервер. Для VPS — лучший старт. Всё уже сконфигурировано под Битрикс, включая OPcache, логротацию и firewall. Управление через веб‑панель на порту 8890.

VPS/VDS — золотая середина. Минимальная конфигурация для среднего интернет‑магазина: 2 vCPU, 4 ГБ RAM, SSD. Оптимальная: 4 vCPU, 8 ГБ RAM. ОС: Ubuntu 22.04 или Debian 12. Если не BitrixVM — настраиваем стек вручную под задачу. Виртуальный хостинг — только для визиток и лендингов. Требования: PHP 8.0+, MySQL 5.7+ / MariaDB 10.0+, 512 МБ RAM, .htaccess. Хостинг‑партнёры 1С-Битрикс — гарантия совместимости. Выделенный сервер — для highload. Типичная архитектура: веб‑сервер отдельно, база данных отдельно, Redis/Memcached отдельно. На редакции «Энтерпрайз» — веб‑кластер с балансировщиком. Облако (Yandex Cloud, VK Cloud, Selectel) — когда нагрузка скачет: распродажи, сезонные пики. Автомасштабирование через Managed Kubernetes или просто вертикальное масштабирование VM.

Выбор редакции — не менее важный шаг. Частая ошибка: берут «Малый бизнес» для магазина, который через полгода вырастает до B2B с оптовыми ценами и тремя складами. Переход на «Бизнес» — доплата разницы, данные не теряются, но лучше предусмотреть заранее. Наши специалисты подберут редакцию под текущие задачи и с запасом на рост. Например, лицензия «Бизнес» (около 35 000 ₽) окупается за счёт мультисклада и обмена с 1С, а неправильный выбор приводит к потере до 30 000 ₽ ежемесячно на избыточных ресурсах.

Какие настройки сервера критичны для 1С-Битрикс?

Веб‑сервер и PHP

nginx как reverse proxy + Apache (mod_php) или nginx + PHP-FPM напрямую. Второй вариант экономит память — Apache не нужен. Но некоторые модули Битрикс используют .htaccess, поэтому для совместимости иногда оставляем Apache. Конфигурация nginx: fastcgi_read_timeout 300 — для долгих операций (импорт из 1С), client_max_body_size 1024m — загрузка больших файлов. Закрываем доступ к .settings.php, .settings_extra.php, bitrix/.settings.php — там пароли к базе. Rewrite‑правила из urlrewrite.php — Битрикс сам генерирует, но при nginx + PHP-FPM нужно продублировать. PHP 8.0–8.2 с расширениями: mbstring, curl, gd, xml, json, opcache, redis/memcached. Ключевые настройки php.ini: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, max_execution_time=300, memory_limit=512M, upload_max_filesize=100M, post_max_size=128M.

База данных и кэширование

MySQL/MariaDB. Ключевые параметры my.cnf: innodb_buffer_pool_size — 70–80% RAM, innodb_log_file_size=256M, tmp_table_size=256M, max_heap_table_size=256M, thread_pool_size — по количеству ядер CPU. Кодировка utf8mb4 обязательно, иначе эмодзи и спецсимволы ломаются. Redis предпочтительнее Memcached для Битрикс — поддерживает persistent connections и более надёжен. Настраиваем в .settings_extra.php:

'cache' => ['value' => ['type' => ['class_name' => '\\Bitrix\\Main\\Data\\CacheEngineRedis']]]
'session' => ['value' => ['mode' => 'default', 'handlers' => ['general' => ['type' => 'redis']]]]

SSL, почта и cron

SSL — Let's Encrypt через certbot в 90% случаев. Редирект HTTP → HTTPS (301), HSTS, TLS 1.2/1.3, OCSP Stapling. В Битрикс переключаем на HTTPS в настройках главного модуля. Почта: отказываемся от mail() — подключаем SMTP (Яндекс.Почта для домена, Mail.ru для бизнеса). Обязательно настраиваем SPF, DKIM, DMARC. Без SPF письма уходят в спам. Тестируем доставляемость через mail‑tester.com — оценка 9+/10. Cron: агенты Битрикс переводим на системный cron — * * * * * /usr/bin/php /var/www/bitrix/modules/main/tools/cron_events.php. На cron вешаем обмен с 1С (15–60 мин), поисковую переиндексацию, бэкапы (mysqldump + rsync, ротация 7+4), очистку временных файлов.

Безопасность и администрирование

Файловая система: владелец www-data, директории 755, файлы 644, upload 775. nginx блокирует доступ к файлам конфигурации. Включаем Проактивную защиту Битрикс — WAF, контроль активности (блокировка после 5 неудачных попыток), проверку целостности ядра. Для админ‑панели: двухфакторная аутентификация через Google Authenticator или OTP, ограничение доступа по IP через nginx для параноиков.

Сколько времени занимает установка 1С-Битрикс и настройка?

Проверка после установки (пошаговый чек‑лист)

1. Монитор производительности (/bitrix/admin/perfmon_panel.php) — целимся в 30+ баллов. Ниже 20 — есть серьёзные проблемы с конфигурацией.
2. Проверка системы — автоматическая проверка всех параметров. Красные пункты — исправляем обязательно, жёлтые — по ситуации.
3. Сканер безопасности — проверка на типичные уязвимости.
4. PageSpeed Insights — TTFB < 200мс на VPS, LCP < 2.5с.
5. Тестовый обмен с 1С — если планируется интеграция, проверяем CommerceML‑обмен до запуска.

Дополнительно проверяем версии ПО, настройки кэширования, работу cron, SSL‑сертификат, SPF/DKIM/DMARC, права доступа, удаление дефолтных пользователей и страниц. Для проектов с 54‑ФЗ убеждаемся, что настроена фискализация через ОФД‑провайдера.

Что входит в работу (deliverables)

• Полностью настроенный сервер под 1С-Битрикс с оптимизацией MySQL, PHP, nginx.
• Установленная и активированная лицензия нужной редакции.
• SSL‑сертификат, почтовые настройки, cron и бэкапы.
• Документация: все параметры конфигурации, доступы, cron‑задачи.
• Обучение контент‑менеджера: как заходить в админку, добавлять товары, загружать изображения.
• Поддержка после установки в течение 30 дней — консультации по настройкам.

Почему стоит доверить установку профессионалам?

Неправильная установка — потеря времени и денег. Мы видели проекты, где магазин на «Старте» не мог выдержать 50 посетителей, потому что не был настроен innodb_buffer_pool_size. После переноса на VPS с правильной конфигурацией сайт «полетел». Неправильная конфигурация может обходиться в 30 000 ₽ ежемесячно из‑за избыточного потребления ресурсов. Вы получаете готовую архитектуру, которая масштабируется. Закажите установку 1С-Битрикс под ключ — и получите надёжную платформу для роста бизнеса. Свяжитесь с нами — рассчитаем стоимость под ваш проект. Опыт более 7 лет, реализовано 120+ проектов на Битрикс, включая highload‑магазины с миллионными каталогами. Обращайтесь — мы поможем настроить Битрикс под ваш проект.