Незрячий пользователь со скринридером доходит до карточки товара, слышит «изображение image-4837, ссылка, ссылка, ссылка» и не понимает, ни что это за товар, ни как положить его в корзину. А человек, который пользуется только клавиатурой, нажимает Tab и обнаруживает, что кнопка «Купить» просто недосягаема. Оба клиента готовы платить — но интерфейс их не пускает.
Эта статья — практическое руководство по доступной и семантичной вёрстке карточки товара в шаблоне 1С-Битрикс: какие теги использовать, как заполнять alt, где нужна ARIA, как обеспечить навигацию с клавиатуры и не сломать структуру заголовков. Доступность — часть качественной фронтенд-разработки, которую мы закладываем в проектах по автоматизации и разработке на 1С.
Коротко
- Доступность улучшает интерфейс для всех: клавиатура, мобильные, поисковые роботы, а не только для людей с ограничениями.
- Сначала нативная семантика (button, a, h1, table), потом ARIA — и только там, где нативных тегов не хватает.
- Один h1 на страницу, осмысленный alt, настоящие кнопки для действий и видимый фокус на всех элементах.
- Кастомные блоки шаблонов 1С-Битрикс (SKU, галерея) нужно проверять вручную клавиатурой и скринридером.
Почему доступность выгодна магазину
Доступность (a11y) часто воспринимают как узкую заботу о небольшой группе пользователей. На деле она улучшает интерфейс сразу для всех. Семантичная вёрстка понятнее поисковым роботам, а значит, работает на SEO. Корректная навигация с клавиатуры ускоряет работу опытных пользователей. Хороший контраст спасает на ярком солнце, а логичная структура — в шумной обстановке или при временной травме руки.
Есть и прямой бизнес-аргумент: доступность всё чаще входит в требования крупных заказчиков, госзакупок и тендеров. Магазин, который недоступен части аудитории, теряет этих покупателей молча — они просто уходят туда, где могут купить. Поэтому a11y — это не благотворительность, а повышение качества и охвата.
Семантика прежде всего
Фундамент доступности — правильные HTML-теги. Нативный элемент уже несёт смысл и поведение, понятные и браузеру, и вспомогательным технологиям. Кнопка — это button, ссылка — это a, список характеристик — ul или dl, таблица характеристик — table с заголовками.
| Элемент карточки | Правильный тег | Частая ошибка |
|---|---|---|
| Наименование товара | h1 | Просто крупный div |
| Кнопка «В корзину» | button | div с onclick |
| Переход в раздел | a href | span с обработчиком |
| Характеристики | table или dl | Набор div со стилями |
| Хлебные крошки | nav с ol | Цепочка span |
Когда семантика на месте, скринридер объявляет элементы правильно, а клавиатурная навигация работает из коробки. Это экономит массу ARIA-костылей, которые иначе пришлось бы навешивать. Именно поэтому доступность начинают с ревизии тегов, а не с добавления атрибутов.
Иерархия заголовков карточки
Заголовки — это оглавление страницы для скринридера: пользователь перемещается по ним, чтобы быстро понять структуру. Поэтому иерархия должна быть логичной и без пропусков уровней.
- Один h1. Наименование товара — единственный заголовок первого уровня на странице.
- Логичные h2. Крупные блоки: характеристики, описание, отзывы, сопутствующие товары.
- h3 внутри h2. Подразделы без перепрыгивания через уровень.
- Без декоративных заголовков. Крупный текст ради стиля не должен быть заголовком.
В 1С-Битрикс за структуру заголовков отвечает не только шаблон карточки, но и вложенные компоненты. Блоки рекомендаций, отзывов или похожих товаров легко выводят собственные h1 или h2, ломая иерархию. Это стоит проверять при сборке страницы из компонентов.
Изображения и alt
Изображение товара без alt для незрячего пользователя не существует. Атрибут alt должен коротко и по делу описывать, что изображено: наименование товара, важный ракурс или цвет.
Правила простые, но их часто нарушают:
- Осмысленный текст. Alt описывает товар, а не содержит имя файла с цифрами.
- Пустой alt для декора. Чисто декоративные картинки получают пустой alt, чтобы скринридер их пропускал.
- Без дублирования. Не нужно повторять в alt подпись, которая уже есть рядом текстом.
В 1С-Битрикс alt удобно генерировать из наименования товара и свойств прямо в шаблоне, а не полагаться на имя загруженного файла. Хороший alt помогает и незрячим пользователям, и поиску картинок.
Кнопки, ссылки и действия
Самое частое и самое дорогое нарушение — интерактивные элементы, свёрстанные не теми тегами. Кнопка «В корзину», сделанная из div с обработчиком клика, недоступна с клавиатуры и не объявляется как кнопка. Покупатель, который не пользуется мышью, не сможет купить товар.
Разграничение простое: если элемент выполняет действие на текущей странице (добавить в корзину, открыть попап) — это button; если ведёт на другую страницу — это ссылка a. Нативные элементы получают фокус, срабатывают по Enter и пробелу и правильно объявляются. Ключевые действия карточки — в корзину, купить, в избранное, сравнение — обязаны быть настоящими интерактивными элементами, а не стилизованными блоками.
Выбор торговых предложений
Блок выбора вариантов (размер, цвет, объём) — это по сути группа переключателей, и его доступность требует внимания. Каждый вариант должен получать фокус, переключаться с клавиатуры и объявлять своё состояние — выбран он или нет.
Доступный подход — использовать нативные радиокнопки либо элементы с корректной ролью и состоянием выбранного, сгруппированные с подписью группы (через fieldset и legend или aria-label). В 1С-Битрикс блок SKU почти всегда верстается кастомно: цветные плашки, свотчи, кнопки размеров. Именно поэтому его доступность нужно проверять отдельно — из коробки семантики выбора там обычно нет, её добавляют осознанно.
Навигация с клавиатуры и фокус
Клавиатурная навигация — базовый тест доступности. Пользователь должен уметь пройти всю карточку клавишей Tab в логичном порядке и активировать любой элемент, ни разу не коснувшись мыши.
- Все интерактивные элементы достижимы. Кнопки, ссылки, поля, выбор вариантов доступны через Tab.
- Логичный порядок обхода. Фокус движется сверху вниз и слева направо, без хаотичных прыжков.
- Видимый фокус. Элемент в фокусе явно выделен — контур или подсветка, а не убранный ради эстетики outline.
- Ловушки фокуса контролируются. В попапах (быстрый просмотр, галерея) фокус заперт внутри и возвращается назад при закрытии.
Особенно легко потерять видимый фокус: дизайнеры нередко убирают стандартный контур ради чистоты вида. Убирать его нельзя — можно заменить своим заметным стилем, но фокус всегда должен быть виден.
ARIA там, где она нужна
ARIA — мощный, но опасный инструмент. Главное правило: не использовать ARIA, если задачу решает нативный элемент. Неверная или избыточная ARIA вредит сильнее, чем её отсутствие, потому что вводит скринридер в заблуждение.
Где ARIA действительно уместна на карточке:
- Состояния. aria-expanded для раскрывающихся блоков, aria-pressed для переключателей.
- Живые регионы. aria-live для сообщения «товар добавлен в корзину» без перезагрузки.
- Подписи. aria-label для иконочных кнопок без видимого текста.
- Группировка. aria-label для группы вариантов товара.
Во всех этих случаях речь о том, чего нет в нативной семантике. Если же элемент можно сделать нативным тегом — делают его, а не имитируют ролью через ARIA.
Контраст, размеры и мобильные
Доступность — это ещё и визуальная эргономика. Текст цены, характеристик и кнопок должен иметь достаточный контраст с фоном, иначе он нечитаем для людей со слабым зрением и на ярком экране. Особенно рискуют светло-серые подписи на белом и цветной текст на цветных плашках.
Интерактивные элементы должны быть достаточно крупными, чтобы в них можно было попасть пальцем на мобильном — маленькие кнопки размеров и иконки избранного часто это нарушают. И вся карточка должна оставаться доступной при увеличении масштаба страницы, не ломая вёрстку. На мобильных, где большинство покупателей, это критично вдвойне.
Особенности шаблонов 1С-Битрикс
Стандартные компоненты 1С-Битрикс дают базовую разметку, но доступность из коробки в них не гарантирована, а кастомные шаблоны легко её ломают. На что смотреть в первую очередь:
- Шаблоны компонентов. Карточка собирается из компонента детального просмотра и его шаблона — семантику правят именно там.
- Вложенные компоненты. Блоки SKU, галереи, отзывов и рекомендаций проверяют на лишние заголовки и недоступные элементы.
- Готовые решения. Купленные шаблоны часто верстают кнопки и вкладки на div — их приходится приводить к семантике.
- AJAX-обновления. Смена цены и наличия при выборе варианта должна объявляться через живой регион.
Если карточка требует глубокой доработки шаблонов и логики, это уже задача уровня разработки компонентов — подходы мы разбираем в статьях про разработку модуля Битрикс и работу с данными через D7 ORM, а вопросы окружения и производительности шаблонов — в материале про хостинг и инфраструктуру BitrixVM.
Тестирование доступности
Проверять доступность нужно и автоматически, и вручную — одно не заменяет другое. Автоматические аудиторы быстро находят часть проблем: недостаточный контраст, отсутствие alt, нарушенную иерархию заголовков. Но они покрывают лишь долю критериев.
Остальное ловится только руками: пройдите всю карточку клавишей Tab без мыши, проверьте, что фокус виден и все действия доступны; послушайте страницу скринридером — понятно ли, что это за товар и как его купить; протестируйте выбор варианта и добавление в корзину. Ручное тестирование интерактивных блоков обязательно, потому что именно там прячутся самые серьёзные барьеры.
Частые ошибки
- Кнопки на div. Действия свёрстаны неинтерактивными тегами и недоступны с клавиатуры.
- Несколько h1. Вложенные компоненты выводят лишние заголовки первого уровня.
- Alt из имени файла. Изображения товара описаны бессмысленным набором цифр.
- Убран фокус. Стандартный контур удалён ради эстетики, и навигация с клавиатуры становится вслепую.
- ARIA вместо семантики. Роли навешаны на div там, где хватило бы нативного тега.
- Недоступный выбор SKU. Свотчи и размеры не переключаются с клавиатуры и не объявляют состояние.
- Низкий контраст. Светло-серые цены и подписи нечитаемы для части пользователей.
Чек-лист внедрения
- Семантика выверена. Кнопки — button, ссылки — a, характеристики — таблица или список.
- Один h1 и чистая иерархия. Наименование — единственный h1, уровни заголовков без пропусков.
- Alt осмысленный. Изображения описаны по товару, декоративные — с пустым alt.
- Действия доступны. В корзину, купить и выбор варианта работают с клавиатуры и объявляются.
- Фокус виден. Каждый интерактивный элемент имеет заметный стиль фокуса.
- ARIA к месту. Роли и состояния добавлены только там, где нет нативной семантики.
- Проверено вручную. Карточка пройдена клавиатурой и скринридером, контраст достаточный.
Вывод
Доступная и семантичная карточка товара — это не отдельная фича для узкой аудитории, а признак качественного фронтенда, который выигрывает для всех: для незрячих и клавиатурных пользователей, для мобильных, для поиска и для крупных заказчиков с требованиями к доступности. Начинается всё с правильных тегов, а ARIA добавляется точечно там, где нативной семантики не хватает.
В 1С-Битрикс основную работу делают на уровне шаблонов компонентов, а самые коварные проблемы прячутся в кастомных блоках SKU, галерей и рекомендаций — их проверяют вручную клавиатурой и скринридером. Наведите порядок в семантике, обеспечьте достижимость и видимость фокуса, и карточка станет удобнее и доступнее, не потеряв в конверсии. Нужна помощь с доработкой шаблонов — мы поможем в рамках аудита и оптимизации сайта на 1С-Битрикс.
