Website Accessibility Audit (WCAG 2.1) on 1C-Bitrix

Website Accessibility Audit (WCAG 2.1) on 1C-Bitrix

WCAG 2.1 is the web content accessibility standard. Level A represents the minimum requirements; Level AA is the widely accepted standard for commercial websites. For commercial sites, accessibility is primarily a matter of audience reach and SEO: proper semantics, image alt text, and color contrast all improve search rankings as well.

Automated Testing Tools

No automated tool covers 100% of WCAG criteria, but they address 30–40% of issues quickly:

• axe DevTools (Chrome/Firefox extension) — the most comprehensive automated check
• WAVE (wave.webaim.org) — convenient visualization of errors directly on the page
• Lighthouse (built into Chrome DevTools, Accessibility tab) — gives a score and a list of issues
• Pa11y — CLI tool for automating checks in CI/CD pipelines

Run checks on several representative page types: homepage, catalog, product page, cart, checkout page, and user account.

Common Issues on Bitrix Sites

Images without alt text. The standard catalog.element component outputs alt="" or omits the attribute entirely. For informational images, the alt text must describe the content; for decorative images, alt="" is correct.

In the component's template.php, verify:

// Wrong:
<img src="<?= $product['PICTURE'] ?>">

// Correct:
<img src="<?= $product['PICTURE'] ?>" alt="<?= htmlspecialchars($product['NAME']) ?>">

// For a decorative image:
<img src="banner.jpg" alt="" role="presentation">

Insufficient text contrast. WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text. Gray text on a white background, e.g. #999 on #fff, yields 2.85:1 — a violation. Check using Colour Contrast Checker or axe DevTools.

Forms without labels. Bitrix feedback forms (subscribe.form, webform.*) often use placeholder instead of <label>. The placeholder disappears on input — a screen reader cannot tell the user what the field is for:

<!-- Wrong: -->
<input type="email" placeholder="Your email">

<!-- Correct: -->
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]">

No focus indicator on interactive elements. The site must be fully operable via keyboard. The common CSS reset outline: none breaks navigation for users without a mouse. Replace it with a custom focus style:

:focus-visible {
    outline: 2px solid #0066CC;
    outline-offset: 2px;
}

Cart and checkout. The sale.order.ajax component makes heavy use of AJAX — when content updates, an ARIA live region must be updated so screen readers announce the changes:

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

// On cart update
document.getElementById('cart-status').textContent = 'Cart updated. Total: ' + totalPrice;

Modal dialogs. Pop-up windows in Bitrix (add-to-cart confirmation, city selection) must trap focus inside when open and return focus to the trigger element when closed. Without this, keyboard users "fall through" beyond the modal dialog.

Semantic Page Structure in Bitrix

Headings. A typical error in Bitrix templates: multiple <h1> elements on a page, or skipped levels (jumping from <h2> directly to <h4>). A page must have exactly one <h1>, followed by a sequential hierarchy.

Navigation. Menus must be wrapped in <nav> with an aria-label. If multiple <nav> elements are present, each must have a unique aria-label:

<nav aria-label="Main menu">...</nav>
<nav aria-label="Breadcrumbs">...</nav>
<nav aria-label="Pagination">...</nav>

Buttons and links. <button> — for actions (add to cart, submit form). <a> — for navigation. Using <div onclick> instead of <button> breaks accessibility entirely.

Audit Report Format

Timeline