Las aplicaciones de una sola página plantean un importante desafío de accesibilidad cuando se trata de comunicar cambios de vista. Sin una actualización de página, los lectores de pantalla no detectan estos importantes cambios en la interfaz de usuario, lo que deja a los usuarios con problemas de visión confundidos e inconscientes.
Una solución es crear un mensaje basado en el título de la página y aprovechar una región en vivo de ARIA para anunciar explícitamente, a través de un mensaje útil, que se ha cargado una nueva vista. Primero cree una función a la que se llame cuando se actualice viewContent. AngularJS proporciona un evento $ viewContentLoaded para este propósito. En el código del controlador, escuche el evento y llame a una función (en CoffeeScript):
app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’ ,noun_view_loaded
En la funciónnoun_view_loaded, actualice el título de la página y anuncie el mensaje. Si bien los marcos de una sola página no actualizan automáticamente los títulos de las páginas, mantener el título de la página sincronizado con la vista actual mejora la comprensión de la vista por parte de los usuarios.
Una forma de hacer esto es usar un atributo de datos en algún lugar de la vista para almacenar el título de la vista:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Ahora cree un mensaje usando el título de la página actualizado y anuncielo:
$ .announce (document.title + ’, ver cargado’)
$ .announce () es una función de jQuery que usa una única región en vivo no visible para anunciar contenido. Este enfoque ayuda a simplificar el código y los esfuerzos de depuración en comparación con el uso ad hoc de regiones activas. Sin embargo, hay algunas prácticas recomendadas para recordar.
Primero, cree una única región en vivo de 'locutor' en su página para anunciar contenido usando aria-live = "polite | asertivo". No utilice ninguna otra región activa, incluidos los roles de la región activa (por ejemplo, role = "alert | timer | log"). Un ejemplo de región en vivo:
div aria-live = "polite" id = "locutor"> (Se anunciará el texto agregado o actualizado aquí) / div>
En segundo lugar, borre el contenido de la región en vivo poco después de actualizar el contenido. Esto evita que los usuarios se topen con mensajes antiguos.
Finalmente, como con cualquier técnica de accesibilidad, use $ .announce () con prudencia. Solo debe usarse para comunicar actualizaciones importantes de la interfaz de usuario.
Palabras: Patrick Fox
Patrick Fox es director de tecnología de interfaz de usuario web en Razorfish en Austin. Este artículo apareció originalmente en el número 271 de la revista net.
¿Me gusto esto? ¡Lee esto!
- La guía del diseñador sobre accesibilidad digital
- Las mejores fuentes de script gratuitas
- Selección gratuita de fuentes de graffiti
