Настройка ARIA-атрибутов для элементов интерфейса 1С-Битрикс
ARIA (Accessible Rich Internet Applications) — это набор атрибутов для разметки интерфейсных виджетов, у которых нет нативного HTML-аналога. Дропдаун-меню, аккордеон, табы, модальные окна — всё это интерактивные паттерны, про которые браузер ничего не знает без явной ARIA-разметки. Screen reader видит кастомный компонент Битрикса как набор безымянных div-ов.
Первое правило ARIA: не использовать без необходимости
Нативный HTML всегда предпочтительнее. <button> лучше <div role="button">, <nav> лучше <div role="navigation">. Прежде чем добавлять ARIA — проверить, нет ли подходящего тега. В шаблонах Битрикса часто встречается:
<!-- Плохо: клик на 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-обновлений
Когда Битрикс обновляет цену при выборе 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.