Akordeon: Prozkoumání přístupnosti a iterace komponenty
Co
Iterace komponenty akordeon, aby byla více přístupná a splňovala současný best practice.
Bude třeba otestovat s uživateli.
Proč je to problém
- Akordeon není přístupný – nesplňuje WCAG SC 1.3.1 Info and Relationships – heading (nadpis) může být chybně vyložen jako link (odkaz)
- BREAKING Nadpis (heading) v buttonu není validní HTML – odečítačka obrazovky (můj case VoiceOver) nepřečte/nenajde na stránce nadpisy akordeonu
- Chevron ikonky nemusí být správně zobrazeny pro uživatele používající lupu (zvětšení textu)
- Chybějící tlačítka Zobrazit vše/Schovat vše, který by všechny akordeony otevřely/zavřely, pro jednodušší zobrazování informací/sken (prozkoumat s uživateli) – Při vypnutí JavaScriptu akordeon nefunguje, viz Issue #8
- V případě focusu tlačítka po rozbalení sekce se nadpis může zdát od textu separovaný (prozkoumat s uživateli)
Návrh
Akordeon si uchovává stav (rozbalený/zavřený) po refresh stránky
Doporučení
Příklad markupu akordeonu podle best practice
<div class="akordeon">
<section>
<h2 class="akordeon__handle">
<button aria-expanded="false" type="button">
<span>Název Sekce 1</span>
<svg chevron></svg>
</button>
</h2>
<div class="akordeon__drawer" hidden>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
</section>
</div>
Zdroje
- W3 příklad akordeonu
- Studie Normana Nielsena, která zjistila, že chevron ikonky splnily očekávání uživatelů nejvíce.
Spec
Zařízení: MacBook
Prohlížeč: Safari + Chrome
A11Y tool: VoiceOver na Big Sur 11.4