Виправлення 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, а час завантаження не збільшився — розмір сторінки змінився незначно.

Які автоматичні інструменти використовувати для аудиту WCAG?

Перед правкою коду потрібна baseline-перевірка. Згідно з документацією WCAG (Understanding WCAG 2.1), автоматичні інструменти не замінюють експертизу, але прискорюють пошук типових помилок. Axe DevTools (розширення Chrome) за 30 секунд знаходить порушення з прив'язкою до DOM-вузлів. Lighthouse (вкладка Accessibility) дає скоринг 0–100. Цільове значення для WCAG AA — 90+, але 100 не гарантує повну відповідність: автоматика не перевіряє логіку, лише розмітку.

Типовий звіт для бітріксового магазину: 20–40 порушень, з яких 60% — відсутні alt, 20% — проблеми з контрастом, 10% — відсутність label у полів форм.

Ручний аудит виявляє в 3 рази більше критичних помилок, ніж автоматичні перевірки. Тому ручне тестування в 3 рази краще за автоматичне за кількістю знайдених проблем.

Чому автоматичної перевірки недостатньо?

Axe знаходить лише те, що закладено в правилах: контраст, alt, aria. Але не перевіряє логіку фокусу, читаність screen reader, навігацію з клавіатури. Наприклад, якщо кнопка з'являється динамічно, Axe її побачить, але не перевірить, чи можна до неї дотабулюватися. Ручне тестування з NVDA або JAWS обов'язкове. Ручний аудит виявляє в 3 рази більше критичних помилок, ніж автоматичні перевірки.

Як забезпечити доступність форм?

Форми Бітрікса (кошик, реєстрація, зворотній дзвінок) часто використовують 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 на Бітріксі?

Проведення аудиту доступності сайту Бітрікс за стандартом WCAG 2.1 AA дозволяє виправити критичні порушення. Виправлення alt зображень у каталозі Бітрікс — один із перших кроків аудиту WCAG. Ось покрокова інструкція:

1. Запустіть Axe DevTools на кожній типовій сторінці (головна, каталог, картка, кошик, форма).
2. Зберіть звіт — експортуйте JSON з порушеннями.
3. Класифікуйте їх за групами: alt, контраст, label, ARIA.
4. Виправте спочатку ті, що блокують користувацький шлях (кнопки без тексту, відсутність skip-link).
5. Повторіть автоматичну перевірку — переконайтеся, що лічильник порушень впав.
6. Проведіть ручне тестування з NVDA або JAWS на 3–5 ключових сценаріях.

Вартість аудиту — від 30 000 рублів. Економія на підтримці за рік може скласти до 200 000 рублів.

Що входить у налаштування доступності під ключ

Ми надаємо: звіт аудиту з повним переліком порушень та рекомендаціями, виправлення всіх помилок у коді шаблонів і компонентів, налаштування 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 рази порівняно з дефолтом. Правильна конфігурація сервера заощаджує до 60% вартості хостингу щомісяця. Оцінимо ваш проєкт за один день — отримайте консультацію. Звертайтеся, щоб замовити встановлення під ключ з гарантією продуктивності.

Як вибрати хостинг та редакцію для встановлення 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 з оптовими цінами та трьома складами. Перехід на «Бізнес» — доплата різниці, дані не втрачаються, але краще передбачити заздалегідь. Наші фахівці підберуть редакцію під поточні завдання і з запасом на зростання. Наприклад, ліцензія «Бізнес» окупається за рахунок мультискладу та обміну з 1С, а неправильний вибір призводить до додаткових витрат, які можуть у 2–3 рази перевищити вартість ліцензії.

Які налаштування сервера критичні для 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. Порівняно з Apache + mod_php, зв’язка nginx + PHP-FPM споживає на 30% менше оперативної пам’яті при однаковому навантаженні — це підтверджено на наших проєктах.

База даних та кешування

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']]]]

Redis прискорює роботу сайту в 1.5 рази порівняно з Memcached завдяки постійним з’єднанням та вбудованому кешуванню сесій.

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 з правильною конфігурацією сайт «полетів». Неправильна конфігурація призводить до невиправданих витрат — іноді в 2–3 рази дорожче, ніж вартість професійного налаштування. Ви отримуєте готову архітектуру, яка масштабується. Замовте встановлення 1С-Бітрікс під ключ — й отримайте надійну платформу для зростання бізнесу. Зв'яжіться з нами — розрахуємо вартість під ваш проєкт. Досвід понад 7 років, реалізовано 120+ проєктів на Бітрікс, включаючи highload‑магазини з каталогами понад 100 000 товарів. Звертайтеся — ми допоможемо налаштувати Бітрікс під ваш проєкт.