Dostępna ścieżka nawigacji (breadcrumbs)

Breadcrumbs pokazują, gdzie w sklepie znajduje się strona: Strona główna › Kobiety › Buty › Botki. Są proste, ale często budowane jako zwykły tekst z separatorami, które czytniki ekranu odczytują na głos. Ta strona pokazuje wzorzec z APG. Należy do serii dostępne wzorce interfejsu.

Kiedy używać breadcrumbs

APG definiuje ścieżkę nawigacji jako „listę linków do stron nadrzędnych bieżącej strony w porządku hierarchicznym”. Warto jej użyć w serwisach z kilkoma poziomami – kategorie, podkategorie, strony produktów, artykuły pomocy. Zwykle umieszcza się ją przed główną treścią. W płaskim serwisie o dwóch poziomach dodaje niewiele.

Kryteria WCAG

WCAG nie wymaga breadcrumbs, ale jeśli są, obowiązują następujące kryteria:

• 1.3.1 Informacje i relacje (A): ścieżka to lista w landmarku nawigacji, a nie luźny tekst.
• 2.4.5 Wiele dróg (AA): breadcrumbs mogą być jednym ze sposobów znajdowania stron, obok menu, wyszukiwarki i mapy strony.
• 2.4.4 Cel łącza (w kontekście) (A): teksty linków to nazwy stron.
• 4.1.2 Nazwa, rola, wartość (A) i 1.4.1 Użycie koloru (A): bieżąca strona jest oznaczona w kodzie, a nie tylko kolorem.
• 3.2.3 Spójna nawigacja (AA): ścieżka pojawia się w tym samym miejscu na każdej stronie.
• 2.5.8 Rozmiar celu (minimum) (AA): krótkie linki breadcrumbs na telefonie potrzebują odpowiedniego rozmiaru lub odstępów.
• 1.4.10 Dopasowanie do ekranu (AA): długie ścieżki zawijają się na wąskich ekranach.

Przykład kodu

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li><a href="/pl/">Strona główna</a></li>
    <li><a href="/pl/kobiety">Kobiety</a></li>
    <li><a href="/pl/kobiety/buty">Buty</a></li>
    <li><a href="/pl/kobiety/buty/botki" aria-current="page">Botki</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);   /* strzałka narysowana obramowaniem: nie ma czego czytać */
  }
  .breadcrumb [aria-current="page"] { font-weight: 600; text-decoration: none; }
</style>

Co określa APG:

• Ścieżka „jest zawarta w regionie landmarku nawigacji”, opisanym przez aria-label lub aria-labelledby.
• „Link do bieżącej strony ma aria-current ustawione na page.” Jeśli bieżąca strona nie jest linkiem, tylko zwykłym tekstem, aria-current jest opcjonalne.
• Przykład APG układa linki w listę uporządkowaną, co informuje użytkowników czytników ekranu, ile jest poziomów, a separatory dodaje w CSS – przekrzywionym obramowaniem – więc „nie są reprezentowane w drzewie dostępności”.

Użycie nav daje landmark, do którego można przeskoczyć; etykieta „Breadcrumb” odróżnia go od głównej nawigacji i nawigacji w stopce.

Obsługa klawiaturą

APG określa obsługę klawiatury dla breadcrumbs jako „nie dotyczy”: to zwykłe linki.

Typowe błędy w sklepach internetowych

• Separatory w HTML („/”, „»”, „>”), które czytniki ekranu odczytują między każdym linkiem.
• div z linkami bez nav i bez listy albo nav bez etykiety obok dwóch innych nieopisanych elementów nav.
• Bieżąca strona oznaczona wyłącznie szarym kolorem, bez aria-current ani innej różnicy wizualnej.
• Ścieżka odzwierciedlająca drogę przeglądania („Wróć do wyników wyszukiwania”) na jednych stronach, a drzewo kategorii na innych, co łamie spójność.
• Skrócone ścieżki na telefonie, które chowają kategorie nadrzędne bez możliwości ich pokazania.
• Maleńkie linki ściśnięte obok siebie na telefonie.
• Dane strukturalne breadcrumbs niezgodne z widoczną ścieżką – to nie problem dostępności sam w sobie, ale sygnał, że oba elementy zbudowano osobno.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Wszystkie to karty z naszej biblioteki reguł. Test ręczny: proszę sprawdzić czytnikiem ekranu, czy ścieżka jest ogłaszana jako nawigacja „Breadcrumb” z listą o właściwej liczbie pozycji, czy separatory milczą i czy bieżąca strona jest wskazana; proszę też sprawdzić, czy ścieżka zawija się przy 320 pikselach CSS i czy jest taka sama na każdej stronie.

Darmową kontrolę jednej strony warto uruchomić na stronie kategorii. To automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Czy WCAG wymaga ścieżki nawigacji (breadcrumbs)?

Nie. Breadcrumbs to jeden ze sposobów, by pomóc użytkownikom odnaleźć swoje miejsce. Kryterium 2.4.5 Wiele dróg wymaga więcej niż jednego sposobu dotarcia do strony w zestawie stron; breadcrumbs mogą to wspierać razem z nawigacją i wyszukiwarką, ale nie są wymagane.

Jak poprawnie oznaczyć breadcrumbs?

Element nav z etykietą „Breadcrumb” w aria-label, lista uporządkowana linków do stron nadrzędnych i aria-current="page" na linku do bieżącej strony. To wzorzec breadcrumb z APG.

Czy bieżąca strona w breadcrumbs powinna być linkiem?

Dopuszczalne jest jedno i drugie. Jeśli jest linkiem, potrzebuje aria-current="page". Jeśli jest zwykłym tekstem, APG uznaje aria-current za opcjonalne.

Jak dodawać separatory?

W CSS, np. obramowaniem lub pseudoelementem, aby czytniki ekranu nie odczytywały „ukośnik” czy „większy niż” między linkami. Jeśli separator jest w HTML, należy ukryć go przez aria-hidden="true".

Czy kontrola automatyczna przetestuje breadcrumbs?

Znajduje linki bez nazw, uszkodzoną strukturę listy, nieprawidłowe wartości aria-current i landmarki nawigacji bez unikalnych nazw. To, czy ścieżka odpowiada strukturze serwisu, musi ocenić człowiek.

Źródła

• 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/