Доступность (a11y) интернет-магазина: базовый чек-лист для разработчика

Представьте покупателя, который не пользуется мышью: у него дрожат руки, или он ослеп на один глаз, или просто держит телефон одной рукой в метро. Он добавляет товар в корзину, доходит до оформления — и упирается в поле, которое нельзя заполнить с клавиатуры, или в кнопку без подписи, которую скринридер читает как «кнопка, кнопка». Заказ не оформлен. С точки зрения аналитики это просто «отвал на чекауте», но причина — недоступный интерфейс.

Эта статья — базовый чек-лист доступности (a11y) интернет-магазина для разработчика на 1С-Битрикс: что такое WCAG, как сделать семантичную вёрстку, клавиатурную навигацию, достаточный контраст, доступные формы и корзину, и как не сломать всё неправильной ARIA. Доступность — часть общего качества сайта, и как отдельный слой она хорошо ложится в работы по аудиту и оптимизации проекта.

Зачем доступность интернет-магазину

Доступность часто воспринимают как заботу об узкой группе пользователей, но на практике её аудитория гораздо шире. Ослабленное зрение с возрастом, дальтонизм, временные ограничения (перелом руки, яркое солнце на экране, шумное место без звука) — всё это ситуации, в которых недоступный интерфейс мешает покупать. По сути, a11y — это устойчивость сайта к любым нестандартным условиям использования.

Для интернет-магазина у доступности есть прямой коммерческий смысл. Каждый барьер на пути к заказу — это потерянная выручка, и часть таких барьеров создаётся именно недоступностью: невидимый фокус, кнопка без подписи, поле, которое не заполнить с клавиатуры. Убирая их, вы не «делаете доброе дело», а расширяете воронку и снижаете отвалы. Доступный сайт удобнее вообще всем, а не только людям с ограничениями.

WCAG и уровни соответствия

Международный ориентир доступности — рекомендации WCAG (Web Content Accessibility Guidelines). Они строятся вокруг четырёх принципов: контент должен быть воспринимаемым, управляемым, понятным и надёжным (устойчивым к разным программам чтения). Под каждым принципом — конкретные критерии с уровнями соответствия A, AA и AAA.

• Уровень A — минимум: без него контент недоступен целым группам пользователей.
• Уровень AA — практический стандарт для большинства коммерческих сайтов, к которому и стоит стремиться.
• Уровень AAA — максимум, нужный далеко не везде и не всегда достижимый для динамичного магазина.

Не нужно заучивать все критерии. Для интернет-магазина достаточно держать в голове несколько практических блоков — семантика, клавиатура, контраст, формы, изображения — и последовательно закрывать их. Ниже разбираем каждый.

Семантическая вёрстка как основа

Фундамент доступности — правильные HTML-теги. Скринридер, поисковый робот и клавиатура опираются на семантику: они «понимают» страницу через её структуру. Если весь интерфейс собран из div и span с обработчиками кликов, для вспомогательных технологий он превращается в бесформенную массу.

• Кнопки — это button, ссылки — a. Они по умолчанию доступны с клавиатуры и правильно озвучиваются. Кликабельный div лишён этого.
• Заголовки по иерархии. Один h1 на страницу, дальше h2, h3 без «перескоков» уровней — по ним пользователь скринридера ориентируется на странице.
• Ориентиры страницы. header, nav, main, footer позволяют быстро перемещаться между зонами.
• Списки и таблицы по назначению. Перечисления — в ul/ol, табличные данные — в table с заголовками, а не «нарисованные» на div.

Семантика полезна вдвойне: она же улучшает восприятие сайта поисковыми системами. Осмысленная структура заголовков и ориентиров — это и доступность, и качество разметки для индексации одновременно.

Клавиатурная навигация и фокус

Второй кит доступности — управление сайтом с клавиатуры. Им пользуются не только незрячие, но и люди с моторными ограничениями, и опытные пользователи, которым так быстрее. Правило простое: всё, что можно сделать мышью, должно быть доступно с клавиатуры — Tab для перехода, Enter/Space для активации, Esc для закрытия, стрелки внутри виджетов.

1. Логичный порядок Tab. Фокус движется в естественном порядке чтения, а не скачет по странице из-за хаотичной вёрстки.
2. Видимый фокус. Активный элемент явно обведён — нельзя убирать outline без замены на собственный заметный стиль фокуса.
3. Ловушки фокуса только в модалках. В открытом окне фокус заперт внутри, по Esc окно закрывается и возвращает фокус на кнопку-инициатор.
4. Пропуск к контенту. Ссылка «перейти к содержимому» позволяет не пробегать всё меню Tab-ом на каждой странице.

Контраст, цвет и размер текста

Даже идеально свёрстанный сайт бесполезен, если текст сливается с фоном. Контраст — критерий, который проваливают чаще всего: светло-серый текст на белом фоне выглядит «стильно» в макете, но нечитаем для многих пользователей и на солнце.

Отдельное правило: цвет не должен быть единственным носителем смысла. Если ошибка в форме показана только красной рамкой, дальтоник её не заметит — добавьте текст и значок. И не запрещайте масштабирование: пользователь должен иметь возможность увеличить страницу минимум до 200% без потери контента.

Изображения, alt и медиа

Картинки в магазине несут смысл — это фото товара, схемы, инфографика. Для незрячего пользователя их «переводит» атрибут alt. Но alt должен быть осмысленным, а не формальным.

• Информативные изображения получают краткое описание по сути: «Дрель ударная, синий корпус, вид сбоку», а не «img_0421».
• Декоративные элементы получают пустой alt="", чтобы скринридер их пропускал и не засорял озвучку.
• Текст на картинке дублируется в alt или, лучше, выносится в настоящий текст рядом.
• Видео сопровождается субтитрами, а важная озвучка — текстовой расшифровкой.

В карточке товара alt особенно важен: это одновременно доступность и польза для поиска по картинкам. Задавайте alt из данных товара при выводе, чтобы он заполнялся автоматически и осмысленно, а не оставался пустым или техническим.

Доступные формы, корзина и оформление

Формы — самое чувствительное место магазина, потому что через них проходит заказ. Недоступная форма оформления напрямую режет выручку. Основные требования просты, но их регулярно нарушают.

• Каждому полю — подпись. Настоящий label, связанный с полем, а не только placeholder, который исчезает при вводе и не читается частью скринридеров.
• Ошибки — понятно и рядом. Сообщение об ошибке привязано к полю, объясняет, что не так, и озвучивается при появлении.
• Группировка. Связанные поля (адрес, способ доставки) объединяются в fieldset с legend.
• Автозаполнение. Атрибуты autocomplete помогают быстро заполнить контакты — это и удобство, и доступность.

В корзине и на чекауте отдельно проверьте динамику: когда меняется количество или пересчитывается сумма, изменение должно быть заметно и озвучено, а не «тихо» обновляться. Скорость и стабильность этих шагов — тоже часть доступности, и её удобно закрывать вместе с работами по автоматизации продаж и склада, где корзина и оформление завязаны на реальные остатки.

ARIA: когда помогает, а когда вредит

ARIA (Accessible Rich Internet Applications) — набор атрибутов, которые сообщают вспомогательным технологиям роль, состояние и свойства элементов. Это мощный инструмент, но с ним легко навредить. Главный принцип формулируется так: «Первое правило ARIA — не использовать ARIA, если есть нативный HTML-элемент».

Нативные button, a, input, select уже доступны из коробки. ARIA нужна там, где стандартных средств не хватает: кастомные вкладки, аккордеоны, выпадающие фильтры, всплывающие подсказки. Там уместны aria-expanded, aria-controls, role, aria-live для динамических сообщений.

Доступность компонентов 1С-Битрикс

Интернет-магазин на 1С-Битрикс собирается из штатных компонентов — каталога, умного фильтра catalog.smart.filter, корзины, форм. Их разметка не всегда идеальна с точки зрения a11y, но она полностью правится в шаблонах компонентов, без вмешательства в ядро.

• Умный фильтр. Чекбоксы и ползунки должны иметь подписи и быть управляемы с клавиатуры; счётчик найденного — озвучиваться при пересчёте.
• Каталог и пагинация. Карточки — как ссылки/кнопки с осмысленным текстом, пагинация — с понятными подписями «Страница N», а не «голыми» цифрами без контекста.
• Быстрый просмотр и модалки. Всплывающие окна с ловушкой фокуса, закрытием по Esc и возвратом фокуса.
• Сообщения корзины. «Товар добавлен» выводится в область aria-live, чтобы изменение услышал пользователь скринридера.

Работа идёт в кастомных шаблонах компонентов и общем шаблоне сайта. Это аккуратная, но не разрушительная задача: обновления Битрикса остаются совместимыми, а доступность живёт в вашем слое разметки. Подходы к чистой доработке компонентов мы разбираем в статье про разработку модулей и компонентов Битрикс.

Как тестировать a11y

Доступность нельзя «сделать один раз» — её проверяют регулярно, сочетая автоматические и ручные методы. Автоматические сканеры быстро находят формальные дефекты (нет alt, низкий контраст, нет подписи), но ловят лишь около трети проблем. Остальное вскрывает ручной тест.

1. Клавиатурный проход. Весь ключевой путь только с клавиатуры: порядок фокуса, видимость, работа модалок.
2. Скринридер. Включите экранный диктор ОС и послушайте, как читаются заголовки, ссылки, поля и сообщения корзины.
3. Автопроверка контраста и разметки. Прогоните страницы автоматическим инструментом доступности.
4. Масштаб и адаптивность. Увеличьте страницу до 200% и убедитесь, что контент не ломается и не пропадает.

Полезно включить базовые проверки доступности в приёмку и, в идеале, в конвейер разработки — тогда регрессии ловятся до релиза. Как встроить автоматические проверки в поставку, мы описывали в материале про CI/CD и деплой на Битрикс.

Частые ошибки

• Кликабельные div вместо кнопок. Не работают с клавиатуры и неправильно озвучиваются.
• Скрытый фокус. outline: none без замены — пользователь клавиатуры не видит, где он находится.
• Placeholder вместо label. Подпись исчезает при вводе, форму трудно заполнять и озвучивать.
• Смысл только цветом. Ошибки и статусы, показанные лишь цветом, теряются для дальтоников.
• Пустой или мусорный alt. «image123» вместо описания товара — бесполезно и для человека, и для поиска.
• Ложная ARIA. Роли и атрибуты «для галочки», которые описывают несуществующее поведение.
• «Версия для слабовидящих». Отдельный устаревший режим, который отстаёт от основного сайта по контенту.

Чек-лист внедрения

1. Семантика в порядке. Кнопки — button, ссылки — a, один h1 и корректная иерархия заголовков, ориентиры страницы на месте.
2. Клавиатура работает везде. Весь путь покупки проходится с клавиатуры, фокус виден и логичен, модалки с Esc и возвратом фокуса.
3. Контраст достаточный. Текст и элементы проходят порог AA, смысл не передаётся одним лишь цветом.
4. Изображения описаны. Информативные — с осмысленным alt, декоративные — с пустым, текст на картинках продублирован.
5. Формы доступны. У полей настоящие label, ошибки понятны и озвучиваются, есть автозаполнение.
6. ARIA к месту. Нативные элементы в приоритете, ARIA только там, где нужно, и с корректным поведением.
7. Компоненты доработаны. Умный фильтр, каталог, корзина и модалки поправлены в шаблонах.
8. Есть регулярный тест. Клавиатура, скринридер, автопроверка и масштаб входят в приёмку.

Вывод

Доступность интернет-магазина — это не отдельный «режим для инвалидов», а качество интерфейса, которым пользуются все. Три основы — семантическая вёрстка, клавиатурная навигация и достаточный контраст — закрывают большую часть реальных барьеров и не требуют переписывать проект. Дальше идут доступные формы, осмысленные alt и аккуратная ARIA только там, где она действительно нужна.

На 1С-Битрикс доступность достигается правкой шаблонов штатных компонентов, а не отказом от них, и хорошо совмещается с общим аудитом и оптимизацией сайта. Начните с клавиатурного прохода по пути покупки — этот пятиминутный тест обычно показывает, сколько заказов вы теряете на невидимых барьерах, и с чего начинать.