Español
Menú del sitio

live-region-announcements

Las regiones activas deberían poder anunciar mensajes de estado

manualWCAG 4.1.3 (AA)confianza: mediumgravedad: moderaterobust

Marca una región activa oculta a la tecnología de asistencia o que se ha quedado ocupada (busy) y, con el hook de regiones activas, una añadida ya con su texto o mostrada y rellenada a la vez, para revisión manual.

Ámbito de aplicación. Las regiones activas que dibuja la página: elementos cuyo aria-live es polite o assertive o, sin aria-live, cuyo rol es status, log o alert, y los elementos <output>. aria-live="off" desactiva cualquiera de ellos. Se deja fuera una región activa oculta con display: none, visibility: hidden o [hidden]: una región que espera a mostrarse es la página en reposo. Se incluye una región activa detrás de un <dialog> modal abierto, que el navegador hace inerte, aunque otras reglas dejan fuera ese contenido. Con el hook de regiones activas (liveRegionHookScript), también las regiones activas que vio recibir su texto de una forma que habitualmente no se anuncia, sigan o no en la página.

Resultado esperado. WCAG 4.1.3: un mensaje de estado puede presentarse al usuario mediante la tecnología de asistencia sin recibir el foco, que es lo que hace una región activa cuando su contenido cambia mientras la tecnología de asistencia puede alcanzarla.

  • Una región activa dibujada dentro de aria-hidden="true" o inert, o con ellos, o detrás de un <dialog> modal abierto: cantTell (LIVE_REGION_HIDDEN). Está fuera del árbol de accesibilidad, así que nada de lo que reciba puede anunciarse (detrás del diálogo, mientras el diálogo está abierto).
  • Una región activa con aria-busy="true" cuando se analizó la página: cantTell (LIVE_REGION_BUSY). La tecnología de asistencia puede retener sus cambios hasta que se retire aria-busy.
  • Registrada por el hook, una región activa añadida a la página con su texto ya dentro, salvo role="alert": cantTell (LIVE_REGION_INSERTED_WITH_CONTENT). Los lectores de pantalla habitualmente anuncian los cambios de una región que ya conocen, no el contenido de una región nueva.
  • Registrada por el hook, una región activa que estaba oculta y se mostró y recibió su texto en la misma tarea: cantTell (LIVE_REGION_SHOWN_AND_FILLED). No estaba en el árbol de accesibilidad cuando llegó el texto.
  • En otro caso: pass.

Comprueba si la página usa la región para mensajes de estado, y que está en la página, mostrada y alcanzable, antes de que cambie su texto.

Qué informa un hallazgo.

  • politeness: la de la región, polite o assertive.
  • hiddenBy: con LIVE_REGION_HIDDEN, aria-hidden, inert, o modal para una región detrás de un <dialog> modal abierto. Una región detrás del diálogo es modal sea lo que sea lo que también la oculte (inert o aria-hidden en ella o por encima, con o sin includeHiddenElements): mientras el diálogo está abierto, es la causa que surte efecto.
  • text: en los dos hallazgos del hook, el texto que recibió la región (hasta 300 caracteres).
  • removed: en los dos hallazgos del hook, true cuando la región ya no estaba en la página cuando se analizó; la ocurrencia está entonces en el elemento del documento, y region la describe (tag, role, id).

Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.

Ejemplos

pass
<div role="status"></div>

Una región de estado vacía, en la página y alcanzable antes de que llegue ningún mensaje.

can't tell
<div aria-hidden="true"><div role="status"></div></div>

La región está oculta a la tecnología de asistencia, así que nada de lo que reciba puede anunciarse. Una persona comprueba si la página la usa para mensajes de estado.

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

LIVE_REGION_BUSY

  1. Localizar la región viva que indica el informe; tenía aria-busy="true" cuando se analizó la página.
  2. Provocar la acción que actualiza la región, inspeccionarla luego en las herramientas para desarrolladores y ver si aria-busy pasa a false o se quita al terminar la actualización.
  3. Repetir la acción con un lector de pantalla en marcha y escuchar el mensaje.
  4. Si no se oye nada de esta región, comprobar si la página anuncia el mismo mensaje de otra forma, por ejemplo desde otra zona de estado que el lector de pantalla lee. Solo cuenta si se oye el mensaje completo sin mover el foco.

Se cumple. El lector de pantalla anuncia el mensaje sin que se mueva el foco, porque aria-busy se quita al terminar la actualización o porque la página anuncia el mismo mensaje de otra forma.

No se cumple. aria-busy sigue en true, el lector de pantalla retiene u omite el mensaje y la página no lo anuncia de ninguna otra forma, lo que incumple WCAG 4.1.3.

LIVE_REGION_HIDDEN

  1. Localizar la región viva que indica el informe y anotar qué la oculta, según dice el informe: aria-hidden="true" o inert en ella o en un ancestro, o un diálogo modal abierto delante de ella.
  2. Comprobar si había un diálogo modal abierto cuando se analizó la página; si es así, anotar si la página escribe en la región mientras está abierto, y luego cerrarlo y ver si la región sigue oculta.
  3. Con un lector de pantalla en marcha, provocar la acción que actualiza la región (enviar un formulario, añadir al carrito, hacer una búsqueda).
  4. Escuchar el mensaje. Si no se oye nada, comprobar en el panel de accesibilidad de las herramientas de desarrollo si esta región, u otra zona de estado con el mismo mensaje, está en el árbol cuando cambia el texto.

Se cumple. El lector de pantalla anuncia el mensaje sin que se mueva el foco, porque la región no está oculta cuando cambia su texto (o nunca se usa para mensajes), o porque otra zona de estado no oculta lleva el mismo mensaje.

No se cumple. La región sigue oculta por aria-hidden, inert o un diálogo modal abierto cuando llega el mensaje y nada más lo anuncia, así que el lector de pantalla no dice nada, lo que incumple WCAG 4.1.3.

LIVE_REGION_INSERTED_WITH_CONTENT

  1. Localizar el mensaje que cita el informe y la acción que lo muestra (el informe da el texto y la región).
  2. Iniciar un lector de pantalla y realizar esa acción.
  3. Escuchar el mensaje sin mover el foco hasta él.
  4. Si no se lee, comprobar en las herramientas para desarrolladores si la página añade la región ya rellena; primero debería haber en la página una región vacía, y el texto escribirse en ella después.

Se cumple. El lector de pantalla anuncia el mensaje cuando aparece, sin que el foco se mueva.

No se cumple. El mensaje aparece en pantalla pero el lector de pantalla no lo anuncia, porque la región se añadió con el texto ya dentro, lo que incumple WCAG 4.1.3 (ARIA22).

LIVE_REGION_SHOWN_AND_FILLED

  1. Localizar el mensaje que cita el informe y la acción que lo muestra.
  2. Iniciar un lector de pantalla y realizar esa acción.
  3. Escuchar el mensaje sin mover el foco hasta él.
  4. Si no se lee, comprobar en las herramientas para desarrolladores si la región está oculta hasta el momento en que se establece su texto; debería estar visible (o presente y vacía) antes de que llegue el texto.

Se cumple. El lector de pantalla anuncia el mensaje cuando aparece, sin que el foco se mueva.

No se cumple. El mensaje aparece pero el lector de pantalla no lo anuncia, porque la región se mostró y se rellenó en el mismo momento, lo que incumple WCAG 4.1.3 (ARIA22).

Ver código fuente