Přístupná drobečková navigace

Drobečková navigace ukazuje, kde se stránka v obchodě nachází: Domů › Dámské › Obuv › Kotníkové boty. Je jednoduchá, ale často se staví jako prostý text s oddělovači, které čtečky obrazovky nahlas čtou. Tato stránka ukazuje vzor APG. Je součástí série přístupné vzory UI.

Kdy drobečkovou navigaci použít

APG definuje drobečkovou cestu jako „seznam odkazů na nadřazené stránky aktuální stránky v hierarchickém pořadí“. Použijte ji na webech s více úrovněmi: kategorie, podkategorie, produktové stránky, články nápovědy. Obvykle se umisťuje před hlavní obsah. Na plochém webu se dvěma úrovněmi přidá jen málo.

Související kritéria WCAG

WCAG drobečkovou navigaci nevyžaduje, ale pokud ji máte, platí tato kritéria:

• 1.3.1 Informace a vztahy (A): cesta je seznam v navigačním landmarku, ne volný text.
• 2.4.5 Více způsobů (AA): drobečky mohou být jednou z cest k nalezení stránek vedle menu, vyhledávání a mapy stránek.
• 2.4.4 Účel odkazu (v kontextu) (A): texty odkazů jsou názvy stránek.
• 4.1.2 Název, role, hodnota (A) a 1.4.1 Použití barvy (A): aktuální stránka je označena v kódu, nejen barvou.
• 3.2.3 Konzistentní navigace (AA): cesta je na každé stránce na stejném místě.
• 2.5.8 Velikost cíle (minimum) (AA): krátké odkazy drobečků na mobilu potřebují dostatečnou velikost nebo rozestupy.
• 1.4.10 Přizpůsobení obsahu (AA): dlouhé cesty se na úzkých obrazovkách zalamují.

Příklad kódu

<nav aria-label="Drobečková navigace" class="breadcrumb">
  <ol>
    <li><a href="/cs/">Domů</a></li>
    <li><a href="/cs/damske">Dámské</a></li>
    <li><a href="/cs/damske/obuv">Obuv</a></li>
    <li><a href="/cs/damske/obuv/kotnikove-boty" aria-current="page">Kotníkové boty</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);   /* šipka nakreslená ohraničením: není co číst nahlas */
  }
  .breadcrumb [aria-current="page"] { font-weight: 600; text-decoration: none; }
</style>

Co APG předepisuje:

• Cesta „je obsažena v oblasti navigačního landmarku“, pojmenované pomocí aria-label nebo aria-labelledby.
• „Odkaz na aktuální stránku má aria-current nastavené na page.“ Pokud aktuální stránka není odkaz, ale prostý text, je aria-current volitelné.
• Příklad APG strukturuje odkazy jako uspořádaný seznam, který uživatelům čteček obrazovky říká, kolik je úrovní, a oddělovače přidává pomocí CSS (zkosené ohraničení), takže „nejsou zastoupeny ve stromu přístupnosti“.

Prvek nav dává uživatelům landmark, na který mohou skočit; popisek „Breadcrumb“ ho odliší od hlavní navigace a navigace v patičce.

Ovládání klávesnicí

APG uvádí ovládání klávesnicí u drobečkové navigace jako „nepoužitelné“: jsou to běžné odkazy.

Časté chyby v e-shopech

• Oddělovače v HTML („/“, „»“, „>“), které čtečky obrazovky čtou mezi každým odkazem.
• Prvek div s odkazy bez nav a bez seznamu, nebo nav bez popisku vedle dvou dalších nepopsaných prvků nav.
• Aktuální stránka označená jen šedou barvou, bez aria-current nebo jiného vizuálního rozdílu.
• Drobečky, které na některých stránkách odrážejí cestu procházením („Zpět na výsledky hledání“) a na jiných strom kategorií, což narušuje konzistenci.
• Zkrácené cesty na mobilu, které skryjí nadřazené kategorie bez možnosti je zobrazit.
• Malé odkazy namačkané k sobě na mobilu.
• Strukturovaná data drobečkové navigace, která neodpovídají viditelné cestě: sama o sobě to není problém přístupnosti, ale znamená to, že obojí vzniklo odděleně.

Co najde automatizovaná kontrola a co ruční testování

Všechna jsou kartami v naší knihovně pravidel. Ruční testování: ověřte čtečkou obrazovky, že se cesta oznámí jako navigace s názvem „Breadcrumb“ se seznamem se správným počtem položek, že oddělovače jsou němé a že je aktuální stránka označená; zkontrolujte, že se cesta zalomí na šířce 320 CSS pixelů a že je na každé stránce stejná.

Spusťte bezplatnou kontrolu jedné stránky na stránce kategorie. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Vyžaduje WCAG drobečkovou navigaci?

Ne. Drobečková navigace je jeden ze způsobů, jak uživateli ukázat, kde se nachází. Kritérium 2.4.5 Více způsobů žádá, aby se stránka v rámci sady stránek dala najít více než jednou cestou; drobečky to spolu s menu a vyhledáváním podpoří, ale povinné nejsou.

Jak správně označit drobečkovou navigaci?

Prvek nav s popiskem „Breadcrumb“ v aria-label, uvnitř uspořádaný seznam odkazů na nadřazené stránky a na odkazu na aktuální stránku aria-current="page". To je vzor drobečkové navigace podle APG.

Má být aktuální stránka v drobečkové navigaci odkaz?

Obojí je v pořádku. Pokud je to odkaz, musí mít aria-current="page". Pokud je to prostý text, podle APG je aria-current volitelné.

Jak přidat oddělovače?

Pomocí CSS, například ohraničení nebo pseudoprvku, aby čtečky obrazovky mezi odkazy nečetly „lomítko“ nebo „větší než“. Pokud je oddělovač v HTML, skryjte ho pomocí aria-hidden="true".

Dokáže automatizovaná kontrola otestovat drobečkovou navigaci?

Najde odkazy bez názvu, rozbitou strukturu seznamu, neplatné hodnoty aria-current a navigační landmarky bez jedinečného názvu. Zda cesta odpovídá struktuře webu, musí posoudit člověk.

Zdroje

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