Stránkování: Prozkoumání přístupnosti a iterace komponenty
Co
Stránkování nesplňuje současný best practice. Markup by měl být uspořádaný seznam stránek a měl by být postupně vylepšen skrz WAI-ARIA.
Pro uživatele používající lupu je komponenta nepoužitelná, pro uživatele na mobilních zařízeních je značně omezující.
Proč je to problém
- Uživatelům odečítaček obrazovek by se mělo stránkování ohlašovat jako soubor/seznam stránek, které spolu souvisí
- BREAKING Pokud má komponenta více jak dvě stránky je za použití lupy nepoužitelná (Chrome zoom na 500 %), viz Přílohy
Doporučení
Příklad řešení
<nav class="pages" aria-labelledby="my-pagination">
<a class="pages__prev">
<span class="sr">Předchozí stránka</span>
<svg class="icon" focusable="false" aria-hidden="true">
<use xlink:href="/..."></use>
</svg>
</a>
<ol class="pages__numbered">
<li><a href="/1" aria-current="page">Stránka 1</a></li>
<li><a href="/2">Stránka 2</a></li>
<li><a href="/3">Stránka 3</a></li>
<li role="separator">…</li>
<li><a href="/999">Stránka 999</a></li>
</ol>
<div class="pages__text">Stránka 1 z 999</div>
<a class="pages__prev" href="/2">
<span class="sr">Další stránka</span>
<svg class="icon" focusable="false" aria-hidden="true">
<use xlink:href="/..."></use>
</svg>
</a>
</nav>
- Tato implementace zahrnuje označený navigační landmark
- Současná stránka je asistenční technologiím komunikována skrz
aria-current="page"
- Role
separator
je použita k odstranění výpustky z výčtu prvků - Předchozí a další stránky jsou "nepoužitelné" a nezaměřitelné odstraněním jejich
href
- Třída
pages__text
se zobrazuje pouze na mobilních zařízeních. Řeší zároveň problém nepoužitelnosti komponenty při větším zoomu. Např. pro@media (min-width: 650px)
není třída zobrazována..pages__text { display: none; }
Návrh k prozkoumání
- Prozkoumat s uživateli nahrazení stránkování tlačítkem
Načíst více
(nemyšlen infinity scroll). Postupné načítání prvků na stránce může potenciálně vést k lepšímu vyhledávání - Komponenta stránkování by se použila v případě, že by měl uživatel vypnutý JavaScript, nebo kde prohlížeče nepodporují rozhraní
Promise
- Pro maximální zpětnou kompatibilitu zvážit použití
inline-block
na třídě.pages__numbered
Zdroje
- 11ty Docs
- A11Y style guide
- Role separator
- Automatic infinite scrolling & accessibility
- So You Think You’ve Built a Good Infinite Scroll
Přílohy
Spec
Zařízení: MacBook
Prohlížeč: Safari + Chrome