Přístupná drobečková navigace

Drobečková navigace je analogie na kousky chleba, kterými si Jeníček značil cestu v pohádce bratří Grimmů Hansel and Gretel (nebo Perníková chaloupa, chcete-li).

Drobečková navigace (neboli breadcrumbs) poskytuje uživateli informaci o tom, kde je zrovna zanořen ve struktuře webových stránek (nebo jiné aplikace). Zvyšuje přehlednost a je to proto velmi užitečná a naštěstí i rozšířený prvek. Často je ale implementován špatně.

Správné použití drobečkové navigace

Aby drobečková navigace sloužila dobře opravdu všem, měla by splňovat následující:

  • měla by to být opravdu navigace – je třeba použít správný (<nav>) nebo správně označený element (role="navigation")
  • mělo by být jasné, o jaký typ navigace se jedná – pomocí atributu aria-label="Breadcrumbs"
  • znaky, které oddělují jednotlivé části, by měly být definované pomocí CSS, aby je neinterpretovaly čtečky
  • měl by to být číslovaný seznam (<ol>), protože ten poskytuje informaci o úrovni zanoření

Příklad zdrojového kódu drobečkové navigace:

<!-- Drobeckova navigace je oznacena pomoci aria-label="Drobečková navigace" -->
<nav aria-label="Drobečková navigace" class="breadcrumb" role="navigation">
  <ol>
    <li>
      <a href="#">
        Úvod
      </a>
    </li>
    <li>
      <a href="#">
        Tipy a návody
      </a>
    </li>
    <li>
      <!-- Aktualni umisteni je oznaceno pomoci aria-current="page" -->
      <span  aria-current="page"> 
        Přístupná drobečková navigace
      </span>
    </li>
  </ol>
</nav>

Příklad stylu pro vložení oddělovače jednotlivých úrovní:

nav.breadcrumb ol {
  list-style: none;
}

/* jednotlivé položky seznamu se zobrazí na jednom řádku */
nav.breadcrumb li {
  display:inline-block;
}

/* místo znaku pro lomítko je použit inline blok se zobrazeným ohraničením */
nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  /* díky transformaci se border zobrazí jako lomítko */
  transform: rotate(15deg);  
  border-right: 0.1em solid currentColor; 
  height: 0.8em;
  content: '';
}

Jako příklad může sloužit také drobečková navigace použitá na těchto stránkách.

Další informace (v angličtině) o přístupnosti drobečkové navigace

Vazba na pravidla přístupnosti

Správně udělaná drobečková navigace pomáhá splnit kritéria úspěšnosti: