Les aplicacions de pàgina única suposen un repte important d’accessibilitat a l’hora de comunicar els canvis de visualització. Sense una actualització de la pàgina, els lectors de pantalla no recullen aquests canvis importants en la interfície d’usuari, cosa que deixa confusos i desconeixents els usuaris amb discapacitat visual.
Una solució és crear un missatge basat en el títol de la pàgina i aprofitar una regió en viu ARIA per anunciar explícitament, mitjançant un missatge útil, que s'ha carregat una nova vista. Primer, creeu una funció que s’anomena quan s’actualitza viewContent. AngularJS proporciona un esdeveniment $ viewContentLoaded amb aquest propòsit. Al codi del controlador, escolteu l’esdeveniment i truqueu a una funció (a CoffeeScript):
app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ a '$ viewContentLoaded', announce_view_loaded
A la funció announce_view_loaded, actualitzeu el títol de la pàgina i anuncieu el missatge. Tot i que els marcs d’una sola pàgina no actualitzen automàticament els títols de les pàgines, mantenir el títol de pàgina sincronitzat amb la visualització actual millora la comprensió de la vista pels usuaris.
Una manera de fer-ho és utilitzar un atribut de dades en algun lloc de la vista per emmagatzemar el títol de la vista:
document.title = $ ('[data-viewtitle]'). data 'viewtitle'
Ara creeu un missatge amb el títol actualitzat de la pàgina i anuncieu-lo:
$ .announce (document.title + ', vista carregada')
$ .announce () és una funció jQuery que utilitza una única regió en viu no visible per anunciar contingut. Aquest enfocament ajuda a simplificar el codi i els esforços de depuració en comparació amb l’ús ad hoc de les regions actives. Tot i això, hi ha algunes pràctiques recomanades per recordar.
En primer lloc, creeu una única regió en directe de ‘locutor’ a la vostra pàgina per anunciar contingut mitjançant aria-live = "educat | assertiu". No utilitzeu cap altra regió activa, incloses les funcions de regió activa (per exemple, role = "alert | temporitzador | registre"). Un exemple de regió en viu:
div aria-live = "polite" id = "announcer"> (s'anunciarà el text afegit o actualitzat aquí) / div>
En segon lloc, esborreu el contingut de la regió en directe poc després d’actualitzar-lo. Això evita que els usuaris topin amb missatges antics.
Finalment, com amb qualsevol tècnica d’accessibilitat, utilitzeu amb criteri $ .announce (). Només s’ha d’utilitzar per comunicar actualitzacions significatives de la interfície d’usuari.
Paraules: Patrick Fox
Patrick Fox és director de tecnologia d’interfície d’usuari web a Razorfish a Austin. Aquest article va aparèixer originalment al número 271 de la revista net.
T'ha agradat això? Llegiu-los!
- La guia del dissenyador d’accessibilitat digital
- Els millors tipus de lletra de script gratuïts
- Selecció gratuïta de fonts de grafits
