Хлебные крошки (Breadcrumbs)

Список ссылок, представляющих текущее положение в иерархии сайта.

Основные данные

Основной ресурс откуда взята информация - https://ebay.gitbook.io/mindpatterns/navigation/breadcrumbs

Хлебные крошки - это ориентир навигации, который позволяет пользователю определить свое текущее положение в иерархии сайта и предоставляет средства для перехода вверх по этой иерархии.

Терминология

• breadcrumbs это цельный паттерн, состоящий из суб частей

• breadcrumb item: это ссылка

• separator: графический символ, который разделяет каждый breadcrumb

Лучшая практика

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

В качестве разделителя используется символ (иконка) SVG.

Последняя ссылка на хлебные крошки, представляющая текущее место в иерархии, не интерактивна.

Хлебные крошки должны иметь заголовок «Вы здесь» или соответствующие слова. Этот заголовок можно визуально скрыть за кадром.

Если путь хлебных крошек достаточно длинный, то рекомендуется скрывать промежуточные положения и оставлять только две ссылки.

Интерактивный дизайн

Взаимодействие с хлебными крошками похоже на простой список упорядоченных ссылок.

Управление клавиатурой

Клавиша TABпозволяет перейти от навигационной крошки к навигационной крошке.

Символы-разделители не должны фокусироваться с клавиатуры.

В последней строке навигации отсутствует значение href, поэтому она не указана в порядке табуляции.

Screenreader

Программа чтения с экрана распознает хлебные крошки как ориентир навигации.

Каждая навигационная цепочка будет объявлена ​​как «ссылка», за которой следует текст ссылки.

Программа чтения с экрана должна игнорировать каждый значок разделителя.

Код

Для хлебных крошек не требуется JavaScript, они представляют собой просто упорядоченный список ссылок и значков внутри области навигационных ориентиров.

XML/HTML/SVG

 <nav aria-labelledby="breadcrumbs_heading" class="container breadcrumbs" role="navigation">
            <h2 class="clipped" id="breadcrumbs_heading">Вы здесь</h2>
            <ol class="breadcrumbs__list">
               <li class="breadcrumbs__item">
                  <a class="breadcrumbs__link" href="http://www.ebay.com">Home</a>
                  <img class="breadcrumbs__icon" src="/img/svg/icons.svg#arrow" alt="" />
               </li>
               <li class="breadcrumbs__item">
                  <a class="breadcrumbs__link" href="http://www.ebay.com">Clothing, Shoes &amp; Accessories</a>
                  <img class="breadcrumbs__icon" src="/img/svg/icons.svg#arrow" alt="" />
               </li>
               <li class="breadcrumbs__item">
                  <a class="breadcrumbs__link" href="http://www.ebay.com">Men's Shoes</a>
                  <img class="breadcrumbs__icon" src="/img/svg/icons.svg#arrow" alt="" />
               </li>
               <li class="breadcrumbs__item">
                  <a class="breadcrumbs__link" aria-current="location">Boots</a>
               </li>
            </ol>
         </nav>

SCSS

.breadcrumbs {
   &__list {
      display: flex;
      flex-wrap: wrap;
   }
   &__list li + li {
      margin-left: 5px;
   }

   &__item {
   }
   &__item:last-child,
   &__item:first-child {
      @media (max-width: $md0+px) {
         display: none;
      }
   }

   &__link {
      color: var(--color-black);
      text-decoration: none;
      font-size: 12px;
   }
   &__link:hover:not(:last-child) {
      text-decoration: underline;
   }

   &__icon {
      width: 10px;
   }
}

Заголовок («Вы здесь») обычно скрывается за кадром с помощью класса .clipped.

Хотя значок разделителя можно создать с помощью CSS, мы обнаружили, что встроенный SVG предлагает более доступный и гибкий подход.

ARIA

• aria-current="location": предоставляет AT программное состояние на хлебной крошке, которое отражает текущее расположение сайта;

• role=navigation: создает ориентир для AT.