Website Accessibility Setup (WCAG) in 1C-Bitrix
WCAG 2.1 Level AA is not optional for government and financial websites in Russia. Since 2023, several regulators directly reference the standard in inspections. Even for commercial projects, accessibility affects SEO: search bots read a website like a screen reader — poor semantics means poor indexing.
Main Problems with Standard Bitrix
Bitrix templates "out of the box" violate WCAG for several systematic reasons.
Images without alt. The catalog.element component outputs <img> via CFile::ShowImage() — this method doesn't add alt automatically. The template must explicitly pass the attribute:
echo CFile::ShowImage($fileId, 800, 800, 'border="0"',
'alt="' . htmlspecialcharsEx($arResult['NAME']) . '"');
Buttons without text content. Icon-only buttons like "Add to cart" with SVG icon and no text violate criterion 1.1.1. Minimum fix — add aria-label:
<button class="cart-btn" aria-label="Add to cart">
<svg>...</svg>
</button>
Navigation menus without semantics. Standard bitrix:menu component generates <ul>/<li> without <nav> and without aria-label — multiple navigation menus on the page are indistinguishable for screen readers.
Audit via Automated Tools
Before fixing code, a baseline check is needed. Axe DevTools (Chrome extension) finds violations with DOM-node binding in 30 seconds. Lighthouse (Accessibility tab) gives 0–100 scoring. Target for WCAG AA — 90+, but 100 doesn't guarantee full compliance: automation doesn't check logic, only markup.
Typical report for Bitrix store: 20–40 violations, of which 60% — missing alt, 20% — contrast issues, 10% — missing label on form fields.
Forms: Fields with Labels
Bitrix forms (cart, registration, callback) often use placeholder instead of <label>. This violates criterion 1.3.1 — placeholder disappears when typing, user with cognitive issues loses field context.
The bitrix:main.register component generates fields via $arResult['PERSONAL_FIELDS'] — template needs rewrite with explicit <label for="...">:
<label for="USER_LOGIN">Login</label>
<input type="text" id="USER_LOGIN" name="USER_LOGIN"
required aria-required="true"
autocomplete="username">
Skip-Link for Keyboard Navigation
First element on page should be "Skip to main content" link — allows keyboard users to bypass navigation. In Bitrix, add to beginning of header.php:
<a class="skip-link" href="#main-content">Skip to main content</a>
CSS makes it visible only on focus:
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 0; top: 0;
z-index: 9999;
padding: 8px 16px;
background: #000;
color: #fff;
}
Contrast and Font Sizes
WCAG 2.1 AA requires text contrast to background minimum 4.5:1 for normal text and 3:1 for large (18pt+). Gray labels on white background (#999 on #fff) give 2.85:1 contrast — violation. Check with WebAIM Contrast Checker tool, fix by replacing color with #767676 minimum.