Setting up ARIA attributes for 1C-Bitrix interface elements

Setting Up ARIA Attributes for UI Elements in 1C-Bitrix

ARIA (Accessible Rich Internet Applications) is a set of attributes for markup of interface widgets without native HTML equivalents. Dropdown menus, accordions, tabs, modals — all interactive patterns the browser knows nothing about without explicit ARIA markup. Screen reader sees Bitrix custom component as a set of unnamed divs.

First ARIA Rule: Don't Use Without Need

Native HTML always preferred. <button> better than <div role="button">, <nav> better than <div role="navigation">. Before adding ARIA — check if suitable tag exists. In Bitrix templates often found:

<!-- Bad: div click without semantics -->
<div class="add-to-cart" onclick="addToCart(1234)">Add to cart</div>

<!-- Good: native button -->
<button type="button" class="add-to-cart" data-product-id="1234">Add to cart</button>

Navigation Menus: bitrix:menu

The bitrix:menu component generates list structure without navigation landmarks. If multiple menus on page (main, footer, sidebar) — screen reader can't distinguish them.

In component template add wrapper with role and label:

<nav aria-label="Main menu">
    <?php $APPLICATION->IncludeComponent('bitrix:menu', 'main', [...]) ?>
</nav>

<nav aria-label="Footer menu">
    <?php $APPLICATION->IncludeComponent('bitrix:menu', 'footer', [...]) ?>
</nav>

For dropdown menu items need aria-expanded and aria-haspopup attributes:

<button aria-haspopup="true" aria-expanded="false" aria-controls="submenu-catalog">
    Catalog
</button>
<ul id="submenu-catalog" role="menu">
    <li role="menuitem"><a href="/catalog/">All products</a></li>
</ul>

JavaScript toggles aria-expanded when submenu opens/closes.

Tabs (Tabs) in Product Card

The catalog.element component often contains tabs: "Description", "Specifications", "Reviews". Without ARIA just list of links with JavaScript. With ARIA — full-featured tab widget:

<div role="tablist" aria-label="Product information">
    <button role="tab" aria-selected="true" aria-controls="tab-description" id="tab-btn-description">
        Description
    </button>
    <button role="tab" aria-selected="false" aria-controls="tab-specs" id="tab-btn-specs" tabindex="-1">
        Specifications
    </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>
    <!-- specifications -->
</div>

Inactive tabs get tabindex="-1" — focus moves through them with arrows, not Tab. Standard WAI-ARIA Authoring Practices pattern for roving tabindex.

Live Regions for AJAX Updates

When Bitrix updates price on SKU selection or shows "Added to cart" — screen reader doesn't know without explicit notification. Solution — aria-live region:

<div aria-live="polite" aria-atomic="true" class="sr-only" id="cart-status"></div>

When product added to cart, JavaScript changes text:

document.getElementById('cart-status').textContent = 'Product added to cart';

Class sr-only hides element visually but keeps accessible for 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;
}

Forms and Error Messages

On form validation error (component bitrix:main.register, order form), error message should be linked to field via aria-describedby:

<input type="email" id="USER_EMAIL" aria-describedby="email-error" aria-invalid="true">
<span id="email-error" role="alert">Enter valid email</span>

role="alert" automatically announced by screen reader on DOM appearance — no need for aria-live.