Налаштування ARIA-атрибутів для елементів інтерфейсу в 1С-Bitrix
ARIA (Accessible Rich Internet Applications) — це набір атрибутів для розмітки інтерфейсних віджетів, у яких нема нативного HTML-аналога. Дропдаун-меню, аккордеон, таби, модальні вікна — все це інтерактивні паттерни, про які браузер нічого не знає без явної ARIA-розмітки. Screen reader бачить кастомний компонент Bitrix як набір безіменних div-ів.
Перше правило ARIA: не використовувати без необхідності
Нативний HTML завжди переважніший. <button> краще за <div role="button">, <nav> краще за <div role="navigation">. Перед додаванням ARIA — перевірити, нема ли підходящого тега. В шаблонах Bitrix часто зустрічається:
<!-- Погано: клік на div без семантики -->
<div class="add-to-cart" onclick="addToCart(1234)">В корзину</div>
<!-- Добре: нативна кнопка -->
<button type="button" class="add-to-cart" data-product-id="1234">В корзину</button>
Навігаційні меню: bitrix:menu
Компонент bitrix:menu генерує структуру списків без навігаційних орієнтирів. Якщо на сторінці кілька меню (головне, футер, сайдбар) — screen reader не може їх розрізнити.
В шаблоні компонента додайте обертку з роллю та міткою:
<nav aria-label="Головне меню">
<?php $APPLICATION->IncludeComponent('bitrix:menu', 'main', [...]) ?>
</nav>
<nav aria-label="Меню в підвалі">
<?php $APPLICATION->IncludeComponent('bitrix:menu', 'footer', [...]) ?>
</nav>
Для дропдаун-пунктів меню потрібні атрибути aria-expanded та aria-haspopup:
<button aria-haspopup="true" aria-expanded="false" aria-controls="submenu-catalog">
Каталог
</button>
<ul id="submenu-catalog" role="menu">
<li role="menuitem"><a href="/catalog/">Усі товари</a></li>
</ul>
JavaScript переключає aria-expanded при відкритті/закритті підменю.
Вкладки (таби) в карточці товару
Компонент catalog.element часто містить таби: «Опис», «Характеристики», «Відгуки». Без ARIA це просто список посилань з JavaScript. З ARIA це повноцінний tab-віджет:
<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>
Неактивні таби отримують tabindex="-1" — фокус переміщується по них стрілками, а не Tab. Це стандартний паттерн WAI-ARIA Authoring Practices для roving tabindex.
Live-регіони для AJAX-оновлень
Коли Bitrix оновлює ціну при виборі SKU або показує «Додано в корзину» — screen reader про це не знає без явного сповіщення. Рішення — aria-live регіон:
<div aria-live="polite" aria-atomic="true" class="sr-only" id="cart-status"></div>
При додаванні товару в корзину JavaScript змінює текст:
document.getElementById('cart-status').textContent = 'Товар додан в корзину';
Клас sr-only приховує елемент візуально, але залишає доступним для screen reader:
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
Форми та повідомлення про помилки
При помилці валідації форми (компонент bitrix:main.register, форма замовлення) повідомлення об ошибке повинне бути пов'язане з полем через aria-describedby:
<input type="email" id="USER_EMAIL" aria-describedby="email-error" aria-invalid="true">
<span id="email-error" role="alert">Введіть коректну email</span>
role="alert" автоматично оголошується screen reader при появленні в DOM — не потрібен aria-live.