4.8: Regiones Vivas
- Page ID
- 152636
Las regiones en vivo se utilizan para presentar cambios en el contenido web que ocurren después de que se haya cargado una página web. Los usos típicos incluyen la presentación de noticias, comentarios y mensajes de error, o salida de chat en vivo a lectores de pantalla, que de otra manera no sabrían sobre este contenido cambiando o siendo agregado a una página web ya renderizada. Las regiones en vivo también se pueden usar para anunciar comentarios y mensajes de error cuando se carga una página, por lo que los usuarios de lectores de pantalla no necesitan buscar a través de una página web para encontrar comentarios. Se lee automáticamente cuando una página termina de cargarse.
Tipos de regiones vivas
Se puede crear una región viva típica agregando aria-live="polite” a cualquier elemento en el que se actualice el contenido después de que se haya cargado una página web. El valor “cortés” indica la prioridad del contenido que se está actualizando. En este caso, un lector de pantalla esperará una interrupción en su salida de audio antes de anunciar el cambio ocurrido. También puedes usar aria-live="assertive” para interrumpir lo que sea que esté leyendo el lector de pantalla y, en su lugar, leer el contenido cambiado antes de continuar. Por lo general, debe evitarse lo “asertivo”. Úselo únicamente en los casos en que se esté actualizando información crítica, como un mensaje de error o retroalimentación crítica.
Normalmente, aria-live no se usaría para presentar comentarios o mensajes de error, aunque es posible. En su lugar se utilizaría role="alert”, introducido anteriormente. El uso de role="alert” crea una región en vivo asertiva que interrumpe a un lector de pantalla para presentar su contenido. Se pueden usar dentro del contenido renderizado para presentar mensajes sin recargar la página, o pueden usarse después de que se cargue una página, para presentar el mensaje antes de que se lea cualquier otro contenido de la página.
Además del role="alert” de uso común, existen otros roles menos utilizados que también actúan como regiones vivas. Estos son:
- role=” registro”
- role=” marquesina”
- role=” temporizador”
- role=” status”
Aquí está la lista completa de atributos de región en vivo:
- aria-live: educado, asertivo, apagado
- aria-relevante: adiciones, remociones, texto, todos
- aria-atomic: verdadero, falso
- aria-busy: verdadero, falso
- role=” alerta”
- role=” registro”
- role=” marquesina”
- role=” temporizador”
- role=” status”
Cuidado al usar regiones vivas
Hay algunos casos en los que usar una región en vivo (aria-live) para leer contenido cambiante puede crear una barrera. Tomemos, por ejemplo, un carrusel que presenta una serie de paneles que giran a una frecuencia determinada. Puede ser útil configurar un carrusel como región en vivo, de modo que a medida que cada panel se desliza hacia la vista, un lector de pantalla lee el contenido. Sin embargo, este comportamiento podría presentar una barrera, interfiriendo con el lector de pantalla cuando está enfocado en otra parte, leyendo otro contenido de la página. Si se usa una región viva con un carrusel, solo debe estar activa cuando el carrusel tiene foco. Si bien normalmente una región activa se crea como un atributo estático WAI-ARIA, en este caso, debe agregarse dinámicamente al enfocarse y eliminarse dinámicamente al desenfocar.
Para los carruseles, también es importante considerar la velocidad a la que giran los paneles, asegurando que los lectores de pantalla tengan tiempo suficiente para leer el contenido del panel antes de girar al siguiente. Este momento puede ser difícil de predecir. Depende de la cantidad de contenido de cada panel, que puede variar significativamente, y de la velocidad a la que los usuarios tengan su tasa de lectura establecida en su lector de pantalla. Una solución a este problema puede ser hacer que el carrusel gire manualmente cuando tenga enfoque para que los usuarios puedan pasar al siguiente panel solo cuando estén listos.
Otro caso en el que las regiones vivas pueden ser problemáticas es con temporizadores. Los temporizadores que cuentan por segundos esencialmente pueden hacer que el resto del contenido de una página sea inutilizable para un usuario lector de pantalla. Como el lector de pantalla anuncia cada segundo, interrumpe la lectura del otro contenido en una página. Los temporizadores que incrementan cada minuto, por ejemplo, no tendrían este problema.
Otros lugares donde las regiones vivas pueden ser problemáticas son con noticias muy activas o feeds de Twitter. Aunque las regiones en vivo pueden ser útiles para este tipo de actualización de contenido, si hay un flujo constante de actualizaciones o las actualizaciones ocurren con frecuencia, los usuarios de lectores de pantalla pueden tener dificultades para comprender el contenido de otra página con las frecuentes interrupciones.
Prueba esto: Para experimentar el agravamiento de una región en vivo en constante actualización, abre ChromeVox y enfoca el temporizador a continuación. En este caso, el temporizador está en un iframe, por lo que simplemente puede establecer el enfoque fuera del iframe para evitar que se lea. Si el temporizador estuviera incrustado en el contenido de la propia página, no tendrías esta opción, y el resto de la página quedaría inutilizable con un lector de pantalla. La única opción sería salir de la página.