Az egyoldalas alkalmazások jelentős akadálymentességi kihívást jelentenek a nézet változásainak kommunikálásakor. Az oldal frissítése nélkül a képernyőolvasók nem veszik fel ezeket a fontos felhasználói felület-módosításokat, így a látássérült felhasználók zavartak és nem tudnak róla.
Az egyik megoldás egy üzenet létrehozása az oldal címe alapján, és egy ARIA élő régió felhasználása annak érdekében, hogy egy hasznos üzeneten keresztül kifejezetten bejelentse, hogy új nézet betöltődött. Először hozzon létre egy függvényt, amelyet a viewContent frissítésekor hívnak meg. Az AngularJS egy $ viewContentLoaded eseményt biztosít erre a célra. A vezérlő kódjában hallgassa meg az eseményt, és hívjon meg egy funkciót (CoffeeScript-ben):
app.controller ’PageController’, ($ hatókör, $ hely, $ http) -> $ hatókör. $ on ’$ viewContentLoaded’, announce_view_loaded
Az announce_view_loaded függvényben frissítse az oldal címét, és közölje az üzenetet. Míg az egyoldalas keretek nem frissítik automatikusan az oldalcímeket, az oldalcím szinkronizálása az aktuális nézettel javítja a felhasználók megértését a nézetben.
Ennek egyik módja egy adatattribútum használata valahol a nézetben a nézet címének tárolásához:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Most hozzon létre egy üzenetet a frissített oldal címe segítségével, és közölje:
$ .announce (document.title + ’, nézet betöltve’)
A $ .announce () egy jQuery függvény, amely egyetlen, nem látható élő régiót használ a tartalom bejelentéséhez. Ez a megközelítés segít egyszerűsíteni a kódot és a hibakeresési erőfeszítéseket az élő régiók eseti használatához képest. Van azonban néhány emlékezetes legjobb gyakorlat.
Először hozzon létre egyetlen „bemondó” élő régiót az oldalán a tartalom bejelentéséhez az aria-live = "udvarias | magabiztos" használatával. Ne használjon más élő régiókat, beleértve az élő régió szerepeket (pl. Role = "alert | timer | log"). Példa élő régióra:
div aria-live = "udvarias" id = "beharangozó"> (Az itt hozzáadott vagy frissített szöveget közöljük) / div>
Másodszor, nem sokkal a tartalom frissítése után törölje az élő régió tartalmát. Ez megakadályozza, hogy a felhasználók a régi üzenetekbe botlanak.
Végül, mint bármely akadálymentességi technika esetében, használja a $ .announce () megfontoltan. Csak jelentős UI-frissítések közlésére használható.
Szavak: Patrick Fox
Patrick Fox az austini Razorfish webes felhasználói felületének technológiai igazgatója. Ez a cikk eredetileg a net magazin 271. számában jelent meg.
Tetszett ez? Olvassa el ezeket!
- A digitális hozzáférhetőség tervezői útmutatója
- A legjobb ingyenes szkript betűtípusok
- Ingyenes graffiti betűtípus kiválasztás
