Drobečková navigace: Prozkoumání přístupnosti a iterace komponenty

Co

Drobečková nesplňuje současný best practice.

Při vypnutí CSS nemusí uživateli dojít, že se jedná o drobečkovou navigaci.

Proč je to problém

• Uživateli se neoznamuje jako drobečková navigace, nebo jako seznam položek
• Delší drobečková navigace může na mobilních zařízeních zabírat až 3+ řádky (viz Příloha)

Doporučení

Příklad řešení:

<nav class="breadcrumbs" aria-label="breadcrumb">
  <ol class="">
    <li><a href="#">Domů</a></li>
    <li><a href="#">Parent</a></li>
    <li>Současná stránka</li>
  </o l>
</nav>

Element <nav> doporučuje W3C. Myslím, že stojí za prozkoumání s uživateli, zda to není overkill, v případě stránky s více navigačními rolemi. Pokud existuje aria-label="breadcrumb" jako sekundární role.

Návrh

• GOV.UK Design system drobečkovou navigaci na mobilních zařízeních zkracuje. Na první a poslední položky navigace
• Další možností je uvést pouze parenta stránky fungujícího jako odkaz zpět (back link)
• (Prozkoumat) Drobečková navigace se na mobilních zařízeních nezarovnává intuitivně

Zdroje

• GOV.UK Design system
• W3C drobečková navigace
• GOV.AU Design system

Spec

Zařízení: MacBook
Prohlížeč: Safari + Chrome A11Y tool: VoiceOver na Big Sur 11.4

Příloha