status

Cuándo utilizarlo

Para mensajes orientativos no urgentes: «Guardado», «12 resultados», «Artículo añadido al carrito», «Conectando…». role="status" equivale a aria-live="polite" más un aria-atomic="true" implícito — el lector de pantalla espera a que finalice la locución actual y luego lee el cambio.

La mayoría de los mensajes de éxito en el envío de formularios, recuentos de resultados de búsqueda, finalizaciones de carga y notificaciones de tipo toast pertenecen aquí. Se reserva role="alert" para interrupciones genuinas.

El elemento nativo <output> lleva role="status" de forma automática — útil para resultados de tipo calculadora asociados a entradas de <form>. Para notificaciones de toast y de estado fuera del contexto de un formulario, <div role="status"> es el patrón habitual.

Como ocurre con todas las regiones activas, el elemento de estado DEBE estar en el DOM antes de que se inserte el mensaje. Se debe renderizar <div role="status"></div> vacío y luego actualizar su contenido de texto. Añadir el elemento desde cero con contenido ya incluido no es fiable.

Compensaciones de las regiones activas

• aria-live="off" — sin anuncio. Comportamiento predeterminado para el contenido regular.
• aria-live="polite" (≡ role="status") — anunciado en la próxima pausa. Comportamiento predeterminado para mensajes de estado.
• aria-live="assertive" (≡ role="alert") — interrumpe el habla actual. Debe usarse únicamente para mensajes urgentes.

WCAG 4.1.3 (Mensajes de estado, AA) exige que los mensajes de estado se expongan mediante una región activa para que las tecnologías de asistencia puedan anunciarlos sin forzar un cambio de foco.

Errores frecuentes

• El elemento de estado se crea al vuelo con texto ya dentro. Muchos lectores de pantalla se pierden el anuncio.
• Actualizar el estado con contenido con marcado (<span> y <strong>). Algunos lectores de pantalla leen el marcado literalmente; el contenido de estado debe mantenerse en texto plano.
• Múltiples actualizaciones disparadas rápidamente — los mensajes posteriores sobreescriben los anteriores sin que se anuncie ninguno.
• Usar role="status" para errores genuinamente urgentes (debe usarse role="alert").
• Estado oculto visualmente sin considerar aria-atomic cuando su texto contiene partes estables y partes cambiantes. El aria-atomic="true" predeterminado en status lee toda la región cada vez, lo que puede resultar ruidoso.

Ejemplo

<!-- Renderizar vacío al cargar la página -->
<div role="status" id="cartStatus"></div>

<script>
  // Cuando el carrito se actualiza:
  document.getElementById('cartStatus').textContent =
    'Añadido al carrito. 3 artículos, $42.00 en total.';
</script>

<!-- Equivalente nativo -->
<form>
  <label>a <input type="number" id="a"></label>
  <label>b <input type="number" id="b"></label>
  <output for="a b" id="sum">0</output>
</form>