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
Spec
Zařízení: MacBook
Prohlížeč: Safari + Chrome
A11Y tool: VoiceOver na Big Sur 11.4