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

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

WCAG 2.1 — стандарт доступності веб-контенту. Рівень A — мінімальні вимоги, AA — загальноприйнятий стандарт для комерційних сайтів. Для комерційних сайтів доступність — це передусім питання охоплення аудиторії та 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> повністю ламає доступність.

Аудит у форматі звіту

Терміни виконання