Jednostránkové aplikace představují významnou výzvu pro usnadnění přístupu, pokud jde o komunikaci změn zobrazení. Bez obnovení stránky čtečky obrazovky nezachycují tyto důležité změny uživatelského rozhraní, takže uživatelé se zrakovým postižením jsou zmatení a nevědomí.
Jedním z řešení je vytvořit zprávu založenou na názvu stránky a využít živou oblast ARIA k výslovnému oznámení prostřednictvím užitečné zprávy o načtení nového pohledu. Nejprve vytvořte funkci, která se volá při aktualizaci viewContent. AngularJS pro tento účel poskytuje událost $ viewContentLoaded. V kódu řadiče poslouchejte událost a zavolejte funkci (v CoffeeScript):
app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ on '$ viewContentLoaded' ,nounce_view_loaded
Ve funkci announce_view_loaded aktualizujte název stránky a oznamte zprávu. Zatímco jednostránkové rámce neaktualizují automaticky názvy stránek, zachování synchronizace názvu stránky s aktuálním pohledem zlepšuje porozumění pohledu uživatelům.
Jedním ze způsobů, jak to udělat, je použít atribut data někde v pohledu k uložení názvu pohledu:
document.title = $ („[data-viewtitle]“). data „viewtitle“
Nyní vytvořte zprávu pomocí aktualizovaného názvu stránky a oznamte ji:
$ .announce (document.title + „, view loaded“)
$ .announce () je funkce jQuery, která k ohlašování obsahu používá jednu neviditelnou živou oblast. Tento přístup pomáhá zjednodušit kód a úsilí při ladění ve srovnání s používáním živých oblastí ad hoc. Je však třeba pamatovat na několik osvědčených postupů.
Nejprve vytvořte na své stránce jedinou živou oblast „hlasatele“, která bude ohlašovat obsah pomocí aria-live = "polite | assertive". Nepoužívejte žádné další živé oblasti, včetně rolí živých oblastí (např. Role = "alert | timer | log"). Příklad živého regionu:
div aria-live = "polite" id = "hlasatel"> (text přidaný nebo aktualizovaný zde bude oznámen) / div>
Za druhé, krátce po aktualizaci obsahu vyčistěte obsah aktivní oblasti. To zabrání uživatelům v narušení starých zpráv.
Nakonec, stejně jako u jakékoli techniky přístupnosti, použijte $ .announce () uvážlivě. Mělo by se používat pouze pro komunikaci významných aktualizací uživatelského rozhraní.
Slova: Patrick Fox
Patrick Fox je technologickým ředitelem webového uživatelského rozhraní ve společnosti Razorfish v Austinu. Tento článek se původně objevil v čísle 271 čistého časopisu.
Líbilo se vám to? Přečtěte si tyto!
- Průvodce designéra pro digitální přístupnost
- Nejlepší písma zdarma skriptů
- Zdarma výběr písma graffiti
