ARIA23Anunciar las novedades de un chat o un historial con role="log"

Por qué es importante

En un chat de atención al cliente, la persona escribe en un campo de texto. Las respuestas aparecen en otra zona de la pantalla. Si usa lector de pantalla y nadie se las anuncia, no sabe que le han contestado.

Con role="log", los mensajes nuevos se leen de forma educada: cuando el lector termina lo que está diciendo. El foco sigue en el campo de texto.

Cómo se hace

1. Ponga role="log" en el contenedor de los mensajes desde que se carga la página.
2. Añada cada mensaje nuevo al final, como un elemento más. No reescriba todo el contenedor, porque se volvería a leer entero.
3. Dé nombre a la zona con aria-label o aria-labelledby, por ejemplo «Conversación».
4. Indique en cada mensaje quién lo escribe: «Ana: Su pedido sale mañana».
5. Úselo solo para información que crece en orden. Para un mensaje que se sustituye por otro, use role="status".

Cómo comprobarlo

1. Localice las zonas que añaden información en orden: chat, historial, registro de actividad.
2. Compruebe en el código que su contenedor tiene role="log".
3. Active un lector de pantalla, deje el foco en otro sitio y provoque un mensaje nuevo. Debe leerse solo ese mensaje.

Ejemplo

Chat de atención al cliente en el que cada respuesta nueva se anuncia al llegar.

<div role="log" aria-label="Conversación con atención al cliente">
  <p><strong>Ana:</strong> Buenos días, ¿en qué puedo ayudarle?</p>
  <p><strong>Usted:</strong> Quiero cambiar la fecha de mi cita.</p>
  <!-- Los mensajes nuevos se añaden aquí, al final -->
</div>
<label for="mensaje">Su mensaje</label>
<input id="mensaje">