Título de la noticia 5
12/12/2003
Descripción de la noticia 5
Personalización de la Live Region "Últimas noticias"
Para probar el ejemplo debéis activar un lector de pantalla. Al final de la página os indico la compatibilidad del ejemplo con NVDA y JAWS bajo Firefox, Chrome y Explorer.
Si no tenéis uno instalado podéis abrir la página con Chrome e instalar la extensión ChromeVox, muy útil para validar temas de WAI-ARIA.
Según los valores que seleccionéis en el siguiente formulario para los diferentes atributos de la live region "Últimas noticias", se modificará la manera en la cual ChromeVox (o tu lector de pantalla) te anuncie los cambios que se produzcan en dicha región. No es necesario recargar la página.
¿Qué hace cada uno de estos atributos y valores?
aria-live
Este atributo se añade a un elemento para indicar que es una "región viva", es decir, que su contenido se modifica y actualiza dinámicamente. En nuestro caso es la zona de "Últimas noticias", que se actualiza cada 10 segundo automáticamente, sin intervención del usuario.
Mediante el valor del atributo podemos indicar cuándo queremos que el lector de pantalla anuncie los cambios al usuario:
- aria-live="off": los cambios NO se anunciarán al usuario a no ser que el foco esté en esa región. Será adecuado usarlo cuando la actualización no es relevante, por ejemplo una rotación de imágenes en la cabecera.
- aria-live="polite": los cambios se anunciarán al usuario pero sin interrumpirle, anunciará el cambio cuando termine de escribir o termine de leer.
- aria-live="assertive": los cambios se anuncian de inmediato, independientemente de lo que el usuario esté haciendo. Teniendo en cuenta que la actualización puede desorientar a los usuarios o que estos no terminen la tarea que están realizando, solo debe utilizarse para mensajes y advertencias importantes, por ejemplo de validación en un formulario.
En el ejemplo, el valor por defecto del atributo aria-live es "assertive", modificad este valor para comprobar las diferencias.
aria-atomic
Con aria-atomic especificamos si queremos que se anuncie toda la región o solo las partes que han cambiado.
Si el valor del atributo es "true" el lector de pantalla anunciará la región como un todo, por el contrario, si es "false" (el valor por defecto) solo anunciará el nodo que ha cambiado.
En este ejemplo el valor es "true" por tanto nos anuncia la región. JAWS nos lee todas las noticias. ChromeVox sin embargo nos anuncia el título de la región: como está asociada al título "Últimas noticias" mediante el atributo aria-labelledby nos anuncia que se ha modificado "Últimas noticias".
Si lo que nos interesa es que nos lea solo el nodo añadido (la última noticia: título, fecha y descripción) podemos cambiar el valor a "false".
NVDA 2013 bajo Firefox 25 solo funciona con aria-atomic="false" en cuyo caso nos lee la noticia insertada. Pero con el valor igual a "true" no anuncia ni lee nada.
aria-relevant
Con este atributo indicamos qué tipo de actualización de la live region deseamos que se anuncie al usuario:
- aria-relevant="additions": anuncia los elementos que se añaden al DOM. En nuestro caso es importante anunciar las nuevas noticias que se añaden porque semánticamente son relevantes, pero si lo que se añade es meramente decorativo no tiene sentido anunciarlo.
- aria-relevant="removals": anuncia los elementos que se eliminan del DOM. Igual que en el caso anterior, es importante tener en cuenta si el elemento eliminado es relevante (por ejemplo un amigo que ya no está en línea) o solo decorativo.
- aria-relevant="text": anuncia las modificaciones de texto.
- aria-relevant="all": anunciará todo, es decir, los elementos añadidos, eliminados y las modificaciones de texto.
En nuestro ejemplo, el valor por defecto que he puesto es "additions", es decir, que solo lea la nueva noticia que se incluye. Podéis ir cambiando el valor para comprobar cómo podéis indicar también que os lea el nodo que se elimina (la última noticia de la lista). Desgraciadamente, aunque con ChromeVox funciona bien, no es así con otros lectores de pantalla que parecen reconocer solo "additions".
Recordad que la forma de anunciarlo dependerá también del valor atributo aria-atomic, es decir, si hemos definido que anuncie el nodo concreto (añadido, eliminado o modificado) o el elemento como un todo.
aria-busy
Por defecto su valor es "false". Este atributo se utiliza cuando muchas partes de un mismo elemento van a ser modificadas, entonces puedes poner el valor a "true" para que temporalmente no anuncie las modificaciones, y una vez que se hayan llevado a cabo, volver a ponerlo a "false" para que las anuncie.
En el ejemplo podéis modificar el valor para comprobar que las anuncia o no según esté a "true" o a "false", pero hay que tener en cuenta que esto habría que programarlo dinámicamente.
Soporte con los lectores de pantalla JAWS y NVDA
Funciona bastante bien con JAW15 corriendo en Firefox 25 y Explorer 10, sin embargo no funciona con JAWS15+Chrome.
También funciona con VoiceOver en Chrome y Safari.
Con NVDA 2013 solo va cuando corre bajo Firefox 25(pero no funciona bajo Chrome o Explorer) Con Firefox 25 solo funciona si aria-atomic es igual a "false", pero con el valor "true" no lee nada.