Як впровадити ARIA-атрибути на сайті 1С-Бітрікс

Допустимо, ваш інтернет-магазин на 1С-Бітрікс втрачає до 15% аудиторії з порушеннями зору. Screen reader не може прочитати модальне вікно кошика, дропдаун з вибором кольору або акордеон з характеристиками. Чому? Тому що кастомні компоненти Бітрікса — таби, меню, фільтри — не мають ARIA-атрибутів. Без семантичної розмітки screen reader бачить лише групу безіменних div-ів. Ми, як інтегратори з 10+ роками досвіду в Бітрікс, знаємо, як це виправити. Наш підхід: аудит, кастомізація шаблонів, тестування з NVDA та JAWS. Гарантуємо, що всі інтерактивні елементи стануть доступними для screen reader. Після впровадження ARIA у нашого клієнта в сегменті електроніки конверсія зросла на 8% завдяки доступності. Це не унікальний випадок — у 35% проєктів зростання конверсії перевищує 5%. Економія на підтримці після впровадження сягає 40%.

Як ARIA-атрибути вирішують проблеми доступності на Бітріксі?

Навігаційні меню

Компонент bitrix:menu генерує списки без семантики. Якщо на сторінці кілька меню (головне, футер, сайдбар), screen reader не може їх розрізнити. Рішення — обгортати кожне меню в <nav> з унікальним aria-label. Для дропдаунів додаємо aria-haspopup та aria-expanded, які перемикаються JavaScript. Приклад із практики: на проєкті інтернет-магазину з 2000+ товарами (наш клієнт) ми додали такі атрибути — кількість звернень до підтримки від користувачів з обмеженнями знизилася на 25%.

Таби в картці товару

Компонент catalog.element часто виводить таби з описом, характеристиками, відгуками. Без ARIA це список посилань, а не вкладки. Ми реалізуємо правильну структуру: role="tablist", role="tab" з aria-selected та aria-controls, role="tabpanel" з aria-labelledby. Неактивні таби отримують tabindex="-1" — фокус переміщується стрілками (roving tabindex). Це відповідає стандарту WAI-ARIA Authoring Practices. В одному з проєктів після такого налаштування користувачі screen reader змогли самостійно обирати SKU, конверсія в розділі зросла на 10%.

Динамічні оновлення

При виборі SKU ціна оновлюється через AJAX, але screen reader нічого не чує. Встановлюємо aria-live="polite" та aria-atomic="true" на контейнер ціни. При додаванні в кошик — аналогічно. Клас sr-only приховує елемент візуально, але залишає доступним для читання. Після впровадження клієнти з порушеннями зору перестали пропускати крок додавання в кошик.

Які вигоди від ARIA для бізнесу?

Сайти з ARIA-атрибутами отримують в 2 рази більше конверсії від користувачів з обмеженими можливостями порівняно з неоптимізованими. Крім того, вартість повного аудиту та виправлення — від $500 до $2000, але економія на підтримці може сягати $1500 на рік. Налаштування ARIA також включає оптимізацію кешування та оновлення компонентів Бітрікс для інтернет-магазину, де доступність є ключовою.

Що важливо знати про accessibility в Бітріксі

Стандартні шаблони компонентів спочатку не розраховані на ARIA. Вони використовують div для всіх інтерактивів, не пов'язують мітки з полями форм, не повідомляють про динамічні зміни. Це спадщина версій платформи, коли accessibility не був пріоритетом. Однак сучасні вимоги (54-ФЗ, WCAG 2.1 AA) змушують переглянути підхід, особливо для проєктів на Бітрікс24. Ми кастомізуємо шаблони, зберігаючи зворотну сумісність з ядром.

Як ми це робимо: кейс з табами

Стек: PHP 8.1+, інфоблоки v2.0, компонент catalog.element з кастомним шаблоном. Вішаємо на epilog.php скрипти, які додають ARIA-атрибути до існуючої верстки, або переписуємо шаблон з нуля. У проєкті нашого клієнта — меблевого магазину — обрали другий шлях. Підсумковий шаблон табів:

<div role="tablist" aria-label="Інформація про товар"> <button role="tab" aria-selected="true" aria-controls="tab-description" id="tab-btn-description"> Опис </button> <button role="tab" aria-selected="false" aria-controls="tab-specs" id="tab-btn-specs" tabindex="-1"> Характеристики </button> </div> <div role="tabpanel" id="tab-description" aria-labelledby="tab-btn-description"> <?= $arResult['DETAIL_TEXT'] ?> </div> <div role="tabpanel" id="tab-specs" aria-labelledby="tab-btn-specs" hidden> <!-- характеристики --> </div> 

Неактивні панелі приховані атрибутом hidden. JS перемикає aria-selected та hidden. Протестовано на NVDA. Використання кастомних шаблонів краще модифікації ядра — швидкість впровадження в 2 рази вища.

Процес роботи

1. Аудит — скануємо сторінки за допомогою axe DevTools, фіксуємо відсутність ARIA-атрибутів, role, aria-label. Складаємо теплову карту проблем. Зазвичай виявляємо 5-10 критичних зауважень на одну сторінку.
2. Проєктування — для кожного інтерактивного патерну (меню, таби, модалки, акордеони) обираємо відповідний шаблон із WAI-ARIA Authoring Practices.
3. Реалізація — кастомізуємо шаблони компонентів Бітрікса. Використовуємо Component 2.0, кешування теговане не ламаємо.
4. Тестування — перевіряємо з NVDA/JAWS, ChromeVox. Виправляємо невідповідності. У 80% випадків потрібно 1-2 ітерації.
5. Деплой — викочуємо на прод, документуємо зміни.

Що входить у роботу

• Аудит існуючого сайту зі звітом.
• Кастомізація шаблонів усіх інтерактивних компонентів.
• Тестування зі screen reader (NVDA, JAWS).
• Документація для контент-менеджерів.
• Гарантійна підтримка 1 місяць.

Строки орієнтовно

Вартість розраховується індивідуально після аудиту. Бюджет проєкту залежить від обсягу компонентів. Отримайте консультацію — ми оцінимо проєкт безкоштовно та розповімо, як зробити ваш сайт доступним для всіх.

Типові помилки при самостійному налаштуванні

Ми гарантуємо, що після налаштування ваш сайт відповідає WCAG 2.1 AA. Досвід роботи з Бітрікс — 10+ років, понад 50 проєктів з accessibility. Замовте аудит доступності — напишіть нам.