Доступні хлібні крихти

Хлібні крихти показують, де сторінка розташована в магазині: Головна › Жінкам › Взуття › Черевики. Вони прості, але часто будуються як звичайний текст із роздільниками, які програми зчитування з екрана озвучують. Ця сторінка показує патерн 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="/uk/">Головна</a></li>
    <li><a href="/uk/women">Жінкам</a></li>
    <li><a href="/uk/women/shoes">Взуття</a></li>
    <li><a href="/uk/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/