Представьте клиента, который не может завершить заказ, потому что кнопку «Купить» не видит скринридер, а поле «Телефон» не подписано. Он не пожалуется — просто уйдёт и купит там, где смог. Барьеры доступности не всегда заметны владельцу магазина, но они молча отсекают часть аудитории и продаж. И часть этой аудитории — не только люди с ограничениями, но и все, кому просто неудобно.
Эта статья — практическое руководство по аудиту доступности (a11y) интернет-магазина на 1С-Битрикс: какими инструментами проверять, как тестировать с клавиатуры и скринридером, на что смотреть в карточке и оформлении заказа, и готовый чек-лист. Доступность — часть UX и конверсии, поэтому она тесно связана с нашей работой по аудиту и оптимизации.
Коротко
- Доступность — это возможность купить для всех: с клавиатуры, со скринридером, при нарушениях зрения и моторики.
- Аудит начинают с автоматической проверки, затем идут ручные сценарии на пути к покупке.
- Критичнее всего карточка товара, корзина и оформление заказа — там барьеры напрямую бьют по продажам.
- Фундамент доступности — семантическая вёрстка; «кнопка для слабовидящих» её не заменяет.
Что такое доступность и зачем она магазину
Доступность (accessibility, сокращённо a11y) — это свойство сайта, при котором им могут пользоваться люди с разными возможностями и в разных условиях. Это не отдельная «версия для инвалидов», а качество основного сайта: он одинаково работает и для человека с мышкой, и для того, кто навигирует клавиатурой или слушает страницу через экранный диктор.
Магазину доступность выгодна по нескольким причинам сразу. Она расширяет аудиторию, убирая барьеры для части клиентов. Она улучшает UX для всех — понятные подписи, контраст и логичный фокус удобны каждому. И она помогает SEO, потому что семантическая структура, нужная скринридерам, хорошо читается и поисковиками. Доступность — это не благотворительность, а работа с конверсией и охватом.
Кому доступность помогает купить
Полезно понимать, о ком идёт речь, — тогда аудит становится не абстракцией, а проверкой реальных сценариев.
| Группа | Как пользуется сайтом | Что критично |
|---|---|---|
| Нарушение зрения | Скринридер, увеличение | alt, подписи, семантика, контраст |
| Нарушение моторики | Только клавиатура | Фокус, навигация, крупные цели |
| Слабое зрение | Крупный шрифт, высокий контраст | Контраст, масштабируемость текста |
| Ситуативные ограничения | Яркое солнце, шум, спешка | Контраст, понятность, устойчивость |
Последняя строка важна: ситуативные ограничения касаются всех. Человек на солнце не видит бледный текст, а в шумном месте не слышит видео без субтитров. Улучшая доступность для людей с постоянными ограничениями, вы делаете магазин удобнее для всей аудитории.
Автоматическая проверка: с чего начать
Аудит удобно начинать с автоматических инструментов — они быстро находят очевидные проблемы и дают карту, где копать. В арсенале:
- Встроенные аудиты браузера. Инструменты разработчика показывают проблемы контраста, структуры и базовые нарушения.
- Специализированные расширения. Подсвечивают отсутствие alt, поля без подписей, ошибки ARIA и заголовков.
- Проверка структуры заголовков. Показывает, логична ли иерархия h1–h2–h3 на странице.
Ручная проверка с клавиатуры
Самый простой и показательный ручной тест — пройти магазин, не касаясь мыши. Клавиша Tab перемещает фокус, Enter и пробел активируют элементы. Этот тест мгновенно вскрывает большинство барьеров.
- Видимость фокуса. Должно быть чётко видно, на каком элементе сейчас фокус.
- Логичный порядок. Фокус движется по странице предсказуемо, сверху вниз и слева направо.
- Достижимость всего. До каждой кнопки и ссылки можно добраться с клавиатуры.
- Нет ловушек фокуса. Из модальных окон и меню можно выйти клавиатурой, фокус не застревает.
- Работа элементов. Кнопки, выпадающие списки и фильтр управляются с клавиатуры.
Если добавить товар в корзину и оформить заказ только клавиатурой не получается — это критичный барьер, который стоит исправить в первую очередь. Именно на пути к покупке доступность превращается в деньги.
Тест со скринридером
Следующий уровень — пройти сайт со скринридером (экранным диктором, встроенным в операционную систему). Это показывает, как магазин «звучит» для незрячего пользователя.
На что обращают внимание:
- Осмысленность. Ссылки и кнопки читаются понятно, а не как «ссылка», «кнопка» без контекста.
- Изображения. Значимые картинки имеют alt, декоративные — скрыты от озвучивания.
- Формы. Поля объявляются со своими подписями, ошибки — понятно и вслух.
- Структура. Заголовки позволяют быстро перемещаться по странице.
- Динамика. Изменения (товар добавлен в корзину) объявляются, а не происходят молча.
Тест со скринридером требует привычки, но даже базовое прохождение ключевых страниц вскрывает проблемы, которых не видно глазами. Это самый честный способ понять реальную доступность.
Контраст, шрифты и цвет
Визуальная доступность — то, что проверяется проще всего и даёт быстрый эффект. Основные вещи:
- Контраст текста. Текст и фон должны иметь достаточный контраст, чтобы читаться при слабом зрении и на ярком свету.
- Масштабируемость. При увеличении шрифта вёрстка не должна ломаться, текст — не обрезаться.
- Не только цвет. Информация не передаётся одним цветом: ошибку в форме показывают и цветом, и текстом или иконкой.
- Размер целей. Кнопки и ссылки достаточно крупные, чтобы по ним легко попасть, особенно на мобильных.
Эти правки почти всегда точечные и делаются на уровне стилей шаблона. При этом они улучшают восприятие для всей аудитории: хороший контраст и читаемый шрифт нужны каждому, а не только людям с нарушениями зрения.
Карточка товара и каталог
Карточка товара и каталог — сердце магазина, поэтому их доступность проверяют особенно тщательно. Здесь клиент принимает решение о покупке.
- Изображения товара. Осмысленные alt, чтобы незрячий понял, что на фото.
- Цена и наличие. Читаются скринридером, а не переданы только цветом или картинкой.
- Выбор вариантов. Размер, цвет и фасовка выбираются с клавиатуры и объявляются при выборе.
- Умный фильтр. Фильтр каталога управляется с клавиатуры, а результаты обновления объявляются.
- Кнопка покупки. Доступна, подписана понятно, реагирует на клавиатуру.
Умный фильтр (компонент catalog.smart.filter) и динамические блоки требуют особого внимания: при обновлении выдачи без перезагрузки страницы важно, чтобы вспомогательные технологии узнавали об изменениях. Это тонкий момент, который автоматика часто пропускает.
Формы, корзина и оформление
Оформление заказа — самая критичная зона. Барьер здесь напрямую означает несовершённую покупку, поэтому доступность форм проверяют в первую очередь.
- Подписи полей. У каждого поля видимая и программная подпись, связанная с ним.
- Понятные ошибки. Ошибки валидации объявляются текстом, а не только красной рамкой.
- Логичный порядок. Фокус проходит форму сверху вниз без скачков.
- Доступные способы оплаты и доставки. Выбор вариантов работает с клавиатуры и озвучивается.
- Подтверждение заказа. Результат оформления понятен и объявляется.
Доступное оформление заказа — это часть общей работы над конверсией корзины: понятные подписи и обработка ошибок помогают вообще всем клиентам довести заказ до конца, а не только тем, кто пользуется вспомогательными технологиями.
Семантика и ARIA
Фундамент доступности — семантическая вёрстка. Скринридеры и клавиатурная навигация опираются на смысл элементов: заголовок должен быть заголовком, кнопка — кнопкой, ссылка — ссылкой, поле формы — с подписью.
Когда интерфейс собран из «div на всё» с обработчиками кликов, вспомогательные технологии не понимают его структуру: для них это безликая масса. Поэтому первый шаг к доступности — чистая семантическая разметка шаблона, а ARIA-атрибуты лишь дополняют её там, где родной семантики не хватает (например, в сложных виджетах). Правило простое: сначала правильный HTML-элемент, и только если подходящего нет — ARIA. Избыток ARIA поверх плохой вёрстки чаще вредит, чем помогает.
Чтобы доступность не терялась при доработках, её встраивают в процесс разработки: базовые проверки новых компонентов и, при необходимости, автоматические тесты доступности в конвейере сборки. Как устроить такой конвейер, мы разбирали в статье про CI/CD и деплой для 1С-Битрикс. А чистая структура данных и вывода, на которой держится семантичный шаблон, — тема материала про D7 и ORM в 1С-Битрикс. Поддержка доступности идёт рука об руку с сопровождением сайта в рамках автоматизации на 1С и регулярной оптимизации.
Мифы о доступности
Вокруг доступности много заблуждений, которые мешают взяться за неё правильно.
- «Достаточно кнопки для слабовидящих». Отдельная версия с крупным шрифтом не помогает людям с клавиатурой и скринридерами — нужен доступный основной сайт.
- «Это дорого и требует переписать всё». Чаще всего это управляемый список точечных правок шаблона, а не переработка с нуля.
- «Это нужно единицам». Ситуативные ограничения касаются всех, а улучшения UX работают на всю аудиторию.
- «Автоматика всё проверит». Инструменты ловят часть проблем; логику фокуса и озвучивание проверяет только человек.
Частые ошибки доступности
- Изображения без alt. Незрячий клиент не понимает, что на фото товара.
- Поля форм без подписей. Скринридер не может объявить, что вводить в поле.
- Невидимый фокус. Непонятно, на каком элементе клавиатурная навигация сейчас находится.
- Ловушки фокуса. Из модального окна нельзя выйти с клавиатуры.
- Низкий контраст. Бледный текст не читается при слабом зрении и на ярком свету.
- Информация только цветом. Ошибка или статус переданы одним цветом, без текста.
- «Div вместо кнопок». Несемантичная вёрстка, которую не понимают вспомогательные технологии.
- Молчаливая динамика. Добавление в корзину и обновление фильтра не объявляются.
Чек-лист аудита
- Автопроверка пройдена. Инструменты прогнаны на ключевых страницах, очевидные проблемы найдены.
- Клавиатура работает. Весь путь к покупке проходится без мыши, фокус виден и логичен.
- Скринридер проверен. Ключевые страницы осмысленно звучат, изображения и формы озвучены.
- Контраст в норме. Текст читаем, информация не передаётся одним цветом.
- Карточка доступна. Alt, цена, выбор вариантов и кнопка покупки работают для всех.
- Оформление доступно. Поля подписаны, ошибки понятны, оплата и доставка выбираются с клавиатуры.
- Семантика чистая. Правильные элементы, ARIA только там, где нужно.
- Поддержка заложена. Проверка доступности встроена в процесс доработок.
Вывод
Аудит доступности — это не разовая формальность ради галочки, а проверка того, могут ли все ваши клиенты дойти до покупки. Начинают с автоматических инструментов для быстрых находок, затем проходят реальные сценарии с клавиатуры и со скринридером, уделяя особое внимание карточке товара и оформлению заказа, где барьеры напрямую превращаются в потерянные продажи.
Хорошая новость в том, что большинство проблем закрываются точечными правками шаблона — alt и подписи, контраст, фокус, семантика, — а не переписыванием магазина. А чтобы доступность не терялась при доработках, её включают в процесс. В итоге вы получаете магазин, которым удобно пользоваться всем: и людям с ограничениями, и всей остальной аудитории, которой просто стало понятнее и приятнее покупать. На 1С-Битрикс это достигается семантичным шаблоном и вниманием к деталям, а не отдельной «версией для слабовидящих».
