Záložky/Tabs: Prozkoumání přístupnosti a iterace komponenty
Co
Komponenta nesplňuje best practice a nemusí být (vizuálně) rozpoznatelná jako tab.
Proč je to problém
- Sémantika komponenty by neměla být tvořena
button
y, jelikož se ve své podstatě jedná o seznam sekcí/odkazů, které tvoří stránku - Taby by měly být pomocí JS postupně vylepšeny. Pokud premisa seznamu sekcí stránky platí, pak se jedná o čistý
ul
seznam - Pro taby samo o sobě platí, že jsou špatně objevitelné, viz Zdroje. Při zobrazení na mobilních zařízeních nemusí být uživatelům jasné, že se jedná o tab, což zhoršuje jejich objevitelnost
-
BREAKING Při kliknutí na tab nedostává sekce s obsahem
focus
. Nemusí splňovat WCAG 2.1 SC 2.4.3 Focus Order - Tím, že se nejedná o odkaz, nemohou uživatelé stránku/tab uložit mezi oblíbené položky v internetovém prohlížeči, a ani se jim nezobrazí v historii
Doporučení
Příklad řešení, tabindex="-1"
je použit, aby sekce ztratila focus
a uživatel se mohl pohybovat dál.
<div class="tabs">
<ul role="tablist">
<li role="presentation">
<a role="tab" id="tab-section1" href="#section1" aria-selected="true">Sekce 1</a>
</li>
<li role="presentation">
<a role="tab" id="tab-section2" href="#section2" aria-selected="false">Sekce 2</a>
</li>
<li role="presentation">
<a role="tab" id="tab-section3" href="#section3" aria-selected="false">Sekce 3</a>
</li>
</ul>
<section role="tabpanel" id="section1" aria-labelledby="tab-section1" tabindex="-1">
<h2>Sekce 1</h2>
<p>Obsah sekce 1.</p>
</section>
<section role="tabpanel" id="section2" aria-labelledby="tab-section2" tabindex="-1" hidden>
<h2>Sekce 2</h2>
<p>Obsah sekce 2.</p>
</section>
<section role="tabpanel" id="section3" aria-labelledby="tab-section3" tabindex="-1" hidden>
<h2>Sekce 3</h2>
<p>Obsah sekce 3.</p>
</section>
</div>
Zdroje
- Inclusive components
- GOV.UK Tabs
- Tabs, Used Right — Nielsen Norman Group
- Tabs: ARIA Authoring Practices
- Danger! ARIA Tabs — Simply Accessible
- WCAG 2.1 Success Criterion 2.4.3 Focus Order
Spec
Zařízení: MacBook
Prohlížeč: Safari + Chrome
A11y tool: VoiceOver na Big Sur 11.4