Single-Säit Apps stellen eng bedeitend Accessibilitéit Erausfuerderung wann et drëm geet d'Viewännerunge matzedeelen. Ouni Säiteupdate huelen Écran Lieser dës wichteg UI Ännerungen net op, a loosse sehbehënnerte Benotzer duercherneen an net bewosst.
Eng Léisung ass eng Noriicht ze kreéieren baséiert op der Säitentitel, an eng ARIA Live Regioun z'ënnerstëtzen fir explizit matzedeelen, iwwer eng hëllefräich Noriicht, datt eng nei Vue gelueden ass. Erstellt eng Funktioun déi ugeruff gëtt wann viewContent aktualiséiert gëtt. AngularJS bitt e $ viewContentLoaded Event fir dësen Zweck. Am Controller Code, lauschtert fir d'Evenement a rufft eng Funktioun (a CoffeeScript):
app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ on '$ viewContentLoaded', announce_view_loaded
An der Announce_view_loaded Funktioun aktualiséieren de Säitentitel an annoncéiert d'Botschaft. Wärend eenzel Säitekaderen d'Säitentitelen net automatesch aktualiséieren, verbessert de Säitentitel synchroniséiert mat der aktueller Vue d'Verbesserung vum Benotzer d'Vue.
Ee Wee fir dëst ze maachen ass en Datenattribut iergendwou an der Sicht ze benotzen fir den Titel ze späicheren:
document.title = $ ('[data-viewtitle]'). data 'viewtitle'
Erstellt elo eng Noriicht mat dem aktualiséierte Säitentitel, an annoncéiert se:
$ .announce (document.title + ', Vue gelueden')
$ .announce () ass eng jQuery Funktioun déi eng eenzeg, net sichtbar Live Regioun benotzt fir Inhalter ze verkënnegen. Dës Approche hëlleft de Code ze vereinfachen an Debuggen Efforten am Verglach zum Ad hoc Benotze vu Live Regiounen. Wéi och ëmmer, et ginn e puer Best Practices fir ze erënneren.
Als éischt erstallt eng eenzeg 'Annonceur' Live Regioun op Ärer Säit fir Inhalter mat aria-live = "héiflech | assertiv" matzedeelen. Benotzt keng aner Live Regiounen, inklusiv Live Regioun Rollen (z. B. role = "alert | timer | log"). E Beispill Live Regioun:
div aria-live = "héiflech" id = "Annonceur"> (Text derbäigesat oder hei aktualiséiert gëtt annoncéiert) / div>
Zweetens, kläert den Inhalt vun der Live Regioun kuerz nodeems den Inhalt aktualiséiert gouf. Dëst vermeit d'Benotzer op al Messagen ze stierzen.
Endlech, wéi mat all Accessibilitéitstechnik, benotzt $ .announce () gerecht. Et sollt nëmme benotzt ginn fir bedeitend UI Updates ze kommunizéieren.
Wierder: Patrick Fox
De Patrick Fox ass Web UI Technologie Regisseur bei Razorfish zu Austin. Dësen Artikel ass ursprénglech an der Ausgab 271 vum Net Magazin erschien.
Liked dëst? Liest dës!
- Den Designer Guide fir digital Accessibilitéit
- Déi bescht gratis Skript Schrëften
- Gratis Graffiti Schrëftauswiel
