Доступность сайта звучит как «забота о немногих», но на деле это про очень широкую аудиторию: людей с нарушениями зрения, моторики, слуха, пожилых пользователей, а ещё всех, кто открывает сайт на ярком солнце, с медленным интернетом или одной рукой в транспорте. Если магазин недоступен, часть этих людей просто не может у вас купить — тихо, без жалоб, просто уходя к конкуренту.
Эта статья — практический старт по доступности (a11y) интернет-магазина на 1С-Битрикс: что такое WCAG простыми словами, с каких быстрых мер начать и как проверить сайт своими силами. Без академизма, по делу. Комплексную доработку сайта и его компонентов мы закрываем услугой аудита и оптимизации 1С-Битрикс.
Коротко
- WCAG — рекомендации по доступности; следование им расширяет аудиторию, помогает SEO и снижает риски.
- Начинать стоит с быстрых мер: контраст, работа с клавиатуры, видимый фокус, семантика, alt у картинок.
- Базовую проверку можно сделать самому: пройти путь покупки с клавиатуры и прогнать сайт автоаудитом.
- Доступность и конверсия идут рука об руку; виджеты-оверлеи не заменяют доступности в самой вёрстке.
Зачем магазину доступность
Доступность — это способность людей с разными возможностями пользоваться сайтом наравне со всеми. Для интернет-магазина это не абстрактная этика, а вполне измеримая аудитория и деньги. Человек, который не может нажать кнопку с клавиатуры или прочитать бледный серый текст, не оформит заказ — и вы даже не узнаете о потерянной продаже.
При этом выгода от доступности шире, чем помощь людям с ограничениями:
- Больше аудитории. Доступный сайт покупают и те, кто иначе ушёл бы к конкуренту.
- Лучше для всех. Контраст, читаемость и понятная структура удобны каждому пользователю.
- Плюс к SEO. Многие практики доступности совпадают с требованиями поисковых систем.
- Меньше рисков. Внимание к доступности снижает и юридические, и репутационные риски.
Поэтому начинать работу над доступностью стоит даже без формального требования — это одновременно забота о пользователях и вполне коммерческое решение.
Что такое WCAG простыми словами
WCAG (Web Content Accessibility Guidelines) — это международные рекомендации по доступности веб-контента. По сути, это свод понятных правил о том, как сделать сайт удобным для людей с разными возможностями: что должно работать с клавиатуры, какой нужен контраст, как описывать изображения, как строить формы.
Пугаться объёма WCAG не стоит. Для коммерческого магазина документ носит скорее рекомендательный характер, а большая часть эффекта достигается небольшим набором базовых мер. Не нужно сразу закрывать все критерии высшего уровня — важно последовательно устранить грубые барьеры, которые реально мешают людям покупать. Именно с них и начинают.
Четыре принципа доступности
WCAG строится вокруг четырёх принципов, которые легко запомнить. Они задают рамку, по которой удобно проверять любой элемент сайта.
| Принцип | Что означает | Пример для магазина |
|---|---|---|
| Воспринимаемость | Контент можно увидеть или услышать | Контраст текста, alt у фото товара |
| Управляемость | Всем можно управлять с клавиатуры | Оформить заказ без мыши |
| Понятность | Интерфейс предсказуем и ясен | Понятные ошибки в форме заказа |
| Надёжность | Совместимость с ассистивными технологиями | Корректная семантика для скринридеров |
Эти четыре принципа — удобный фильтр для проверки. Взяв любой элемент витрины (кнопку, карточку товара, форму), спросите себя: воспринимаем ли он, управляем ли, понятен ли, надёжен ли для ассистивных технологий. Если хоть один ответ «нет» — есть что улучшить.
Контраст и читаемость текста
Самая частая и самая простая для исправления проблема — недостаточный контраст текста. Модный бледно-серый текст на белом фоне выглядит стильно на макете дизайнера, но плохо читается на солнце, на дешёвом экране и людьми с ослабленным зрением.
- Достаточный контраст. Текст должен уверенно контрастировать с фоном, особенно основной и мелкий.
- Читаемый размер. Слишком мелкий шрифт исключает часть аудитории; базовый текст должен быть комфортным.
- Не только цветом. Важную информацию (ошибка, скидка, статус) нельзя передавать одним цветом — добавляйте текст или значок.
- Читаемость на мобильном. На маленьком экране требования к контрасту и размеру ещё строже.
Контраст правится буквально настройкой стилей и не требует переделки сайта, но эффект даёт огромный: текст становится читаемым для всех. Это первое, с чего логично начать работу над доступностью витрины.
Работа с клавиатуры и фокус
Значительная часть пользователей с ограничениями (и не только) управляют сайтом с клавиатуры, а не мышью. Поэтому весь путь покупки должен проходиться клавишами: перемещение по элементам (Tab), активация (Enter), работа со списками и фильтрами.
Что здесь критично:
- Всё достижимо клавиатурой. До любой кнопки, ссылки и поля можно дойти без мыши.
- Видимый фокус. Элемент, на котором стоит фокус, чётко выделен — пользователь видит, где он находится.
- Логичный порядок. Переход по Tab идёт в осмысленной последовательности, а не хаотично.
- Ловушки фокуса. Из модальных окон и фильтров можно выйти клавиатурой, а не застрять.
Проверить это просто: отложите мышь и попробуйте оформить заказ одной клавиатурой. Если куда-то нельзя попасть или непонятно, где фокус, — это барьер. Особенно внимательно стоит проверить модальные окна, выпадающие меню и мобильные фильтры, о которых мы писали в контексте удобства витрины.
Семантика и структура страниц
Ассистивные технологии (скринридеры) понимают страницу через её семантику — правильные HTML-теги и структуру. Если вёрстка состоит из «дивов» без смысла, программа чтения экрана не может объяснить пользователю, где заголовок, где навигация, а где кнопка.
- Осмысленные заголовки. Один h1 на странице, логичная иерархия h2/h3 — по ним ориентируется и человек, и скринридер.
- Правильные элементы. Кнопка — это кнопка, ссылка — ссылка; не «div, притворяющийся кнопкой».
- Ориентиры страницы. Шапка, навигация, основной контент и подвал размечены как области.
- Понятные ссылки. Текст ссылки говорит, куда она ведёт, а не «подробнее» без контекста.
Хорошая семантика — фундамент доступности, и она же полезна для SEO. В 1С-Битрикс многое зависит от качества шаблона и компонентов: аккуратная вёрстка закладывает доступность на уровне архитектуры. Принципы чистой работы с данными и компонентами мы затрагиваем в статьях про D7 ORM в Битрикс и разработку модуля под Битрикс.
Альтернативный текст изображений
Изображения товаров — сердце витрины, но для человека со скринридером картинка без описания просто не существует. Альтернативный текст (атрибут alt) — это текстовое описание изображения, которое читается вслух и индексируется поиском.
- Осмысленный alt у товаров. Описание должно передавать суть: что за товар, а не «image123.jpg».
- Пустой alt у декора. Чисто декоративные картинки помечают пустым alt, чтобы скринридер их не зачитывал.
- Не дублировать текст. Если рядом уже есть подпись, alt не повторяет её слово в слово.
- Автоматизация для каталога. Для тысяч товаров alt удобно формировать из названия и характеристик.
Для большого каталога заполнять alt вручную нереально, поэтому его генерируют из данных товара при выводе. Это одновременно улучшает доступность и SEO картинок — двойная польза от одной доработки шаблона.
Доступные формы и ошибки
Формы — критическая точка магазина: без доступной формы заказа человек не купит, каким бы удобным ни был каталог. Здесь доступность и конверсия совпадают почти полностью.
- Подписи к полям. У каждого поля есть связанная подпись (label), а не только серый плейсхолдер, который исчезает при вводе.
- Понятные ошибки. Ошибка описана текстом и связана с полем: не просто красная рамка, а объяснение, что исправить.
- Ошибка не только цветом. Проблемное поле помечено и текстом или значком, а не одним красным цветом.
- Логичный порядок и фокус. При ошибке фокус переходит к проблемному полю, форма проходится клавиатурой.
Доступная форма заказа — это форма, которую легко заполнить всем: и человеку со скринридером, и уставшему покупателю на бегу. Понятные подписи и ошибки повышают долю доходящих до оплаты у всей аудитории, а не только у людей с ограничениями.
Как проверить доступность
Базовую проверку доступности можно провести своими силами, без специальных знаний. Она не заменяет полноценный аудит, но выявляет большинство грубых барьеров.
- Пройдите путь клавиатурой. Отложите мышь и оформите заказ только клавишами — отметьте, где застряли или потеряли фокус.
- Прогоните автоаудит. Встроенный в браузер аудитор доступности покажет очевидные проблемы контраста, alt и семантики.
- Проверьте контраст. Оцените читаемость основного и мелкого текста, особенно бледных надписей.
- Проверьте картинки. Есть ли осмысленный alt у товаров, не зачитывается ли декор.
- Проверьте формы. Подписи, понятные ошибки, работа с клавиатуры.
Автоматический аудит ловит не всё — часть проблем видна только при ручной проверке сценариев. Но связка «автоаудит плюс проход клавиатурой» даёт отличную стартовую картину и список первоочередных исправлений.
Доступность, SEO и конверсия
Важно понимать: работа над доступностью окупается даже с чисто коммерческой стороны, потому что тесно переплетается с SEO и конверсией. Это не «расходы на этику», а инвестиция в качество витрины.
- Пересечение с SEO. Семантика, alt, структура заголовков нужны и людям с ассистивными технологиями, и поисковым роботам.
- Рост конверсии. Понятные формы, читаемый текст и работа на любом устройстве повышают долю доходящих до покупки.
- Шире аудитория. Доступный магазин обслуживает клиентов, которых иначе бы потерял.
- Качество в целом. Доступность дисциплинирует вёрстку и делает сайт аккуратнее для всех.
Поэтому доступность не конкурирует с бизнес-целями, а работает на них. Улучшая a11y, вы одновременно улучшаете позиции в поиске и конверсию — три задачи закрываются одной работой.
Частые ошибки и мифы
- «Это для немногих». На деле доступность помогает широкой аудитории и всем в неудобных условиях.
- «Доступность против дизайна». Миф: контраст и читаемость улучшают восприятие для всех.
- Ставка на виджет-оверлей. Кнопка настроек поверх сайта не заменяет доступности в самой вёрстке.
- Бледный текст. Модный низкий контраст исключает часть покупателей.
- Плейсхолдер вместо подписи. Исчезающий серый текст в поле — не замена label.
- Ошибка одним цветом. Красная рамка без текста непонятна части пользователей.
- Разовая работа. Без поддержки доступность деградирует с каждым новым блоком.
Чек-лист старта по доступности
- Контраст в норме. Основной и мелкий текст уверенно читаются, важное не передаётся одним цветом.
- Клавиатура работает. Весь путь покупки проходится клавишами, фокус виден, порядок логичен.
- Семантика корректна. Один h1, иерархия заголовков, настоящие кнопки и ссылки, ориентиры страницы.
- Alt заполнен. У товаров осмысленный alt, декор помечен пустым, для каталога — генерация из данных.
- Формы доступны. Подписи к полям, понятные ошибки, ошибка не только цветом, фокус на проблемном поле.
- Проверка проведена. Проход клавиатурой и автоаудит выполнены, список исправлений собран.
- Доступность в компонентах. Заложена в шаблон и компоненты, а не наклеена виджетом сверху.
- Поддержка в процессе. Новые блоки проверяются на доступность до публикации, включены в приёмку.
Вывод
Доступность интернет-магазина — это не академическая обязанность, а расширение аудитории и рост качества витрины. WCAG звучит объёмно, но начинать нужно с малого: контраст, работа с клавиатуры, видимый фокус, корректная семантика, осмысленные alt и доступные формы. Эти быстрые меры убирают большинство барьеров, не требуя переписывать сайт.
Проверить базу можно своими силами — пройти путь покупки клавиатурой и прогнать автоаудит. А главное, помнить: доступность, SEO и конверсия идут рука об руку, поэтому работа над a11y окупается и коммерчески. Закладывайте доступность в сами компоненты, поддерживайте её как обычное требование к качеству — и ваш магазин станет удобнее и доступнее для всех, кто хочет у вас купить.
