Доступные хлебные крошки

Хлебные крошки показывают, где страница находится в магазине: Главная › Женщинам › Обувь › Ботильоны. Они просты, но их часто делают обычным текстом с разделителями, которые экранные дикторы зачитывают вслух. На этой странице показан шаблон APG. Она входит в серию доступных UI-паттернов.

Когда использовать хлебные крошки

В APG цепочка хлебных крошек определена как «список ссылок на родительские страницы текущей страницы в иерархическом порядке». Используйте хлебные крошки на сайтах с несколькими уровнями — категории, подкатегории, страницы товаров, справочные статьи. Обычно их размещают перед основным содержимым. На плоском сайте с двумя уровнями от них мало пользы.

Применимые критерии WCAG

WCAG не требует хлебных крошек, но если они у вас есть, применяются такие критерии:

• 1.3.1 Информация и взаимосвязи (A): цепочка — это список в ориентире навигации, а не россыпь текста.
• 2.4.5 Несколько способов (AA): хлебные крошки могут быть одним из способов найти страницы наряду с меню, поиском и картой сайта.
• 2.4.4 Назначение ссылки (в контексте) (A): тексты ссылок — названия страниц.
• 4.1.2 Имя, роль, значение (A) и 1.4.1 Использование цвета (A): текущая страница определяется в коде, а не только цветом.
• 3.2.3 Единообразная навигация (AA): цепочка появляется на одном и том же месте на каждой странице.
• 2.5.8 Размер цели (минимальный) (AA): коротким ссылкам хлебных крошек на мобильном нужен достаточный размер или отступы.
• 1.4.10 Перекомпоновка (AA): длинные цепочки переносятся на узких экранах.

Пример кода

<nav aria-label="Хлебные крошки" class="breadcrumb">
  <ol>
    <li><a href="/ru/">Главная</a></li>
    <li><a href="/ru/women">Женщинам</a></li>
    <li><a href="/ru/women/shoes">Обувь</a></li>
    <li><a href="/ru/women/shoes/ankle-boots" aria-current="page">Ботильоны</a></li>
  </ol>
</nav>

<style>
  .breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; }
  .breadcrumb li + li::before {
    content: "";
    display: inline-block;
    margin: 0 .5em;
    width: .4em; height: .4em;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);   /* a chevron drawn with borders: nothing to read aloud */
  }
  .breadcrumb [aria-current="page"] { font-weight: 600; text-decoration: none; }
</style>

Что задаёт APG:

• Цепочка «содержится в области ориентира навигации», подписанной через aria-label или aria-labelledby.
• «У ссылки на текущую страницу aria-current равен page». Если текущая страница — не ссылка, а простой текст, aria-current необязателен.
• В примере APG ссылки оформлены упорядоченным списком, который сообщает пользователям экранных дикторов, сколько уровней, а разделители добавлены средствами CSS — скошенной границей, — поэтому они «не представлены в дереве доступности».

Элемент nav даёт пользователям ориентир, к которому можно перейти; подпись «Хлебные крошки» отличает его от основной навигации и навигации в подвале.

Работа с клавиатуры

В APG для хлебных крошек работа с клавиатуры указана как «неприменимо»: это обычные ссылки.

Частые ошибки в интернет-магазинах

• Разделители в HTML («/», «»», «>»), которые экранные дикторы зачитывают между всеми ссылками.
• div со ссылками без nav и без списка, либо nav без подписи рядом с двумя другими nav без подписей.
• Текущая страница показана только серым цветом, без aria-current и без другого визуального отличия.
• Хлебные крошки, отражающие путь просмотра («Назад к результатам поиска») на одних страницах и дерево категорий на других, что нарушает единообразие.
• Урезанные цепочки на мобильном, которые скрывают родительские категории без возможности их показать.
• Крошечные ссылки, прижатые друг к другу на мобильном.
• Структурированные данные хлебных крошек, не совпадающие с видимой цепочкой, — это не проблема доступности сама по себе, но признак того, что их делали отдельно.

Что находит автоматика и что остаётся для ручной проверки

Все они — карточки в нашей библиотеке правил. Ручная проверка: убедитесь с экранным диктором, что цепочка объявляется как навигация «Хлебные крошки» со списком из нужного числа элементов, что разделители не озвучиваются и что текущая страница определена; проверьте, что цепочка переносится при 320 CSS-пикселях и одинакова на каждой странице.

Запустите бесплатную проверку одной страницы на странице категории. Это автоматическая проверка, а не полный аудит.

Частые вопросы

Требует ли WCAG хлебные крошки?

Нет. Хлебные крошки — один из способов помочь пользователю понять, где он находится. Критерий 2.4.5 «Несколько способов» просит предусмотреть более одного способа найти страницу в наборе страниц; хлебные крошки могут поддержать это вместе с навигацией и поиском, но не обязательны.

Как разметить доступные хлебные крошки?

Элемент nav с подписью «Хлебные крошки» через aria-label, упорядоченный список ссылок на родительские страницы и aria-current="page" на ссылке на текущую страницу. Это шаблон хлебных крошек из APG.

Должна ли текущая страница в хлебных крошках быть ссылкой?

Допустимы оба варианта. Если это ссылка, ей нужен aria-current="page". Если это простой текст, в APG сказано, что aria-current необязателен.

Как добавлять разделители?

Средствами CSS, например границей или псевдоэлементом, чтобы экранные дикторы не зачитывали «косая черта» или «больше» между ссылками. Если разделитель находится в HTML, скройте его с помощью aria-hidden="true".

Может ли автоматическая проверка проверить хлебные крошки?

Она находит ссылки без имени, нарушенную структуру списка, недопустимые значения aria-current и ориентиры навигации без уникальных имён. Соответствует ли цепочка структуре сайта, решает человек.

Источники

• W3C WAI, APG Breadcrumb pattern: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
• W3C WAI, APG Breadcrumb example: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/