Přístupná drobečková navigace

autor:

Aktualizováno:

Vzpomínáte si na kousky chleba, kterými si Jeníček značil cestu v pohádce bratří Grimmů Hänsel und Gretel (nebo Perníková chaloupka, chcete-li)? To je drobečková navigace (neboli breadcrumbs).

Poskytuje uživateli informaci o tom, kde je zrovna zanořen ve struktuře webových stránek. Zvyšuje přehlednost a přináší další výhody:

  • lepší navigaci pro zákazníka – jednoduchá orientace v neznámu
  • prodloužení návštěvy – pokud čtenář nebo zákazník nenašel co hledal, má po ruce související obsah
  • umožňuje rychlé přesuny v rámci webu
  • podporuje SEO

Drobečková navigace je proto důležitý, užitečný a naštěstí i rozšířený prvek. Často je ale implementována špatně.

Obsah

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

Aby drobečková navigace sloužila dobře opravdu všem, měla by splňovat několik pravidel.

Kdy a jak použít drobečkovou navigaci

Pro weby, které mají složitou a hlubokou strukturu, je drobečková navigace v podstatě povinností. Je několik přístupů, jak drobečkovou navigaci tvořit. Když máte web s jasnou strukturou stránek, podstránek a příspěvků, budete reflektovat tuto strukturu. Jiná situace je, když máte e-shop s produkty, které jsou ve více kategoriích. V tom případě je vhodné v drobečkové navigaci zobrazovat cestu, jakou se na danou stránku uživatel skutečně dostal – prostě proto, aby se mohl snadno vrátit o krok zpět.

Speciálním případem je navigace u sekvence stránek, tvořící jeden proces (např. dokončení objednávky). Ta by měla jasně ukazovat, v které fázi procesu uživatel v danou chvíli je.

Ale pozor, pokud je web jednoduchý a drobečková navigace by neměla více než dvě úrovně, nepoužívejte ji.

Umístění drobečkové navigace

Na správné umístění není jednoznačná odpověď. Typicky se vkládá mezi hlavičku (menu) a vlastní obsah stránky. Každopádně by drobečková navigace měla být před hlavním obsahem (tedy před nadpisem stránky) a přeskakovací odkaz na hlavní obsah by měl přeskočit i drobečkovou navigaci.

Struktura drobečkové navigace

Správný kód drobečkové navigace splňuje následující:

  • je to opravdu navigace – je třeba použít správný tag <nav>, nebo správně označený element, např. <ol role="navigation">
  • je jasné, o jaký typ navigace se jedná – pomocí atributu aria-label=”Drobečková navigace” (případně aria-label="Breadcrumb")
  • jedná se o číslovaný seznam <ol>, čísla poskytují informaci o úrovni zanoření nebo kroku
  • začátek je vždy na homepage a obsahuje celou cestu ke stránce (na vlastní homepage ale drobečková navigace není)
  • poslední úroveň (současná stránka) nemá na sobě odkaz a je označena atributem aria-current=”page”

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

<!-- Drobečková navigace je označena pomocí aria-label="Drobečková navigace" -->
<nav aria-label="Drobečková navigace" class="breadcrumb">
  <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>

Zobrazení a stylování drobečkové navigace

Drobečková navigace obvykle na sebe nemá vázat přílišnou pozornost, musí ale zůstat dobře čitelná:

Oddělovač jednotlivých úrovní je vhodné vložit pomocí stylu a je dobré vyhnout se znakům (různé čtečky nejsou ve zpracování textu v pseudoelementech konzistentní).

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;
}
/* poslední položka je tučná */
nav.breadcrumb li:last-child {
     font-weight: bold;
 }
/* jako oddělovač se šipka vytvořená inline blokem se zobrazeným ohraničením */
nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  transform: rotate(45deg);
  border-top: 0.05em solid currentColor;
  border-right: 0.05em solid currentColor;
  width: 0.5em;
  height: 0.5em;
  content: '';
}

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

Zdroje a další informace

Vazba na pravidla přístupnosti

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