aria-atomic

Cuándo utilizarlo

En una región en vivo cuyas actualizaciones solo tienen sentido cuando se leen como una unidad completa. El ejemplo clásico es un estado de una sola línea como «3 resultados encontrados»: si la región en vivo tiene aria-atomic="false" (el valor predeterminado) y solo cambia el número, el lector de pantalla puede anunciar únicamente «3», sin contexto. Con aria-atomic="true", anuncia la oración completa.

Se debe establecer aria-atomic="false" (u omitirlo) cuando:

• La región es un registro o panel de chat donde cada nueva línea es autónoma: «Alice: hola», «Bob: qué tal». Anunciar todo el registro cada vez resultaría insoportable.
• Solo el contenido nuevo aporta la nueva información.

Se debe establecer aria-atomic="true" cuando:

• La región es una frase corta y estable cuyo significado depende de las palabras que la rodean: «Total del carrito: $42.18», «Página 3 de 12», «Filtros aplicados: 2».
• Un pequeño cambio en el DOM dentro de la región tiene poco significado por sí solo.

aria-atomic es independiente de aria-live y aria-busy. Trabajan juntos pero controlan aspectos diferentes.

Cómo mantenerlo sincronizado

Los valores válidos son "true" y "false". El valor predeterminado es "false".

Se debe establecer el atributo una sola vez en la región en vivo y no modificarlo: es una propiedad de cómo debe anunciarse la región, no un estado que cambia con el tiempo. Además, se hereda: aplicar aria-atomic="true" a un elemento padre hace que las regiones en vivo descendientes sean atómicas, salvo que se sobreescriba.

Si la estrategia de actualización consiste en «reemplazar todo el texto de la región», aria-atomic="true" produce el anuncio más natural. Si la estrategia es «agregar una nueva línea», generalmente se desea aria-atomic="false" para que solo se lea la línea añadida.

Errores frecuentes

• Dejar aria-atomic con su valor predeterminado en un estado estático de una sola línea y escuchar únicamente «5» en lugar de «5 resultados encontrados».
• Establecer aria-atomic="true" en un registro de chat: cada nuevo mensaje provoca que se vuelva a leer el registro completo.
• Actualizar solo un <span> dentro de una región atómica y sorprenderse de que también se anuncie el texto circundante. Eso es exactamente lo que significa atómica.
• Usar aria-atomic en una región que no tiene aria-live ni un rol implícito de región en vivo: no tiene ningún efecto.
• Establecer aria-atomic en un control con foco. Los atributos de región en vivo corresponden a contenedores de estado, no a elementos interactivos.

Ejemplo

<!-- Atómica: toda la oración es el mensaje -->
<p aria-live="polite" aria-atomic="true">
  Cart total: <span id="cart-total">$0.00</span>
</p>

<!-- No atómica: solo se anuncia la nueva línea -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Alice: hi there</li>
</ul>