jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas de HTML y accesibilidad

Gratis Generador de snippet ARIA Notify

Genere llamadas ariaNotify() para anuncios programaticos de lectores de pantalla con fallback aria-live.

Cargando herramienta...

Qué es Generador de snippet ARIA Notify?

La API ARIA Notify (Chrome 141+) proporciona una forma programática de anunciar cambios de contenido dinámico a la tecnología de asistencia. En lugar de crear y gestionar regiones aria-live manualmente, llama a ariaNotify('mensaje', { priority, duration, silent }). La API maneja la cola de anuncios, la priorización y la finalización basada en Promise. Esto reemplaza el patrón común de alternar textContent de regiones aria-live para activar anuncios de lectores de pantalla.

Respuesta rápida

Use ariaNotify('mensaje', { priority, duration }) para anunciar contenido a lectores de pantalla de forma programática. Devuelve una Promise que se resuelve cuando el anuncio se completa. Chrome 141+. Respaldo: use regiones aria-live para navegadores antiguos.

Last updated: 2026-06-03

Limitaciones

  • La API ARIA Notify es solo Chrome 141+. Firefox y Safari aún no la soportan. Se requiere un respaldo a regiones aria-live tradicionales para accesibilidad entre navegadores.
  • ariaNotify() requiere activación del usuario para anuncios de prioridad important: la llamada debe estar dentro de un gesto de usuario (clic, pulsación de tecla) o la prioridad se reduce a normal.
  • Múltiples notificaciones rápidas pueden fusionarse o descartarse por el navegador. La API está diseñada para anuncios dinámicos ocasionales, no para actualizaciones en tiempo real en streaming.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija el mensaje de notificación y el nivel de prioridad (normal, important o none).
  2. Establezca la duración en milisegundos o 0 para limpieza manual.
  3. Llame a ariaNotify() en el punto de activación apropiado (envío de formulario, finalización asíncrona, etc.).
  4. Incluya un respaldo a regiones aria-live para navegadores que no soporten la API.

Para qué puedes usarla

  • Anunciar resultados de envío de formulario a usuarios de lectores de pantalla después de que se complete una guardia AJAX.
  • Notificar a los usuarios de nuevo contenido cargado mediante scroll infinito o actualizaciones en vivo.
  • Alertar a usuarios de tecnología de asistencia cuando un temporizador expira o una tarea en segundo plano se completa.

Casos de uso

Ejemplos prácticos

Ejemplo

Retroalimentación de envío de formulario

Un formulario se envía mediante fetch(). Después de la respuesta, ariaNotify('Formulario guardado exitosamente', { priority: 'normal' }) anuncia el resultado a los lectores de pantalla. El usuario no necesita navegar a un mensaje de estado: el anuncio llega a ellos.

Ejemplo

Anuncio de actualización de contenido en vivo

Un panel de control carga nuevos datos cada 30 segundos. Después de cada actualización, ariaNotify('Panel actualizado con 5 elementos nuevos', { priority: 'none', silent: true }) proporciona una notificación de fondo que no interrumpe la salida actual del lector de pantalla.

Errores comunes

  • Llamar a ariaNotify() con demasiada frecuencia: las notificaciones rápidas pueden abrumar a los usuarios de lectores de pantalla. Ponga en cola las importantes y aplique debounce a las actualizaciones no críticas.
  • Usar ariaNotify() para acciones activadas por el usuario que ya tienen retroalimentación nativa: los clics en botones y envíos de formulario a menudo tienen retroalimentación incorporada del lector de pantalla.
  • Olvidar incluir un respaldo para navegadores antiguos: la API es solo Chrome 141+, así que mantenga una región aria-live como respaldo para usuarios de Firefox y Safari.

Verificación

  1. Active un lector de pantalla (VoiceOver, NVDA o ChromeVox) y active la llamada ariaNotify. Confirme que el mensaje se anuncie correctamente.
  2. Pruebe con un navegador no compatible (Firefox) para verificar que el respaldo de región aria-live anuncie el mensaje.

FAQ

Preguntas sobre Generador de snippet ARIA Notify

¿En qué se diferencia ariaNotify de las regiones aria-live?

ariaNotify() es una API programática: la llama directamente en JavaScript cuando desea anunciar algo. Las regiones aria-live son elementos DOM que anuncian cada vez que su contenido de texto cambia. ariaNotify() maneja la cola, prioridad y temporización automáticamente. Las regiones aria-live requieren manipulación manual del DOM y pueden ser frágiles: anuncios duplicados, actualizaciones perdidas y problemas de temporización son comunes.

¿Qué significan los niveles de prioridad?

Los anuncios normal esperan a que la salida actual del lector de pantalla termine antes de reproducirse. Los anuncios important interrumpen la salida actual inmediatamente. Las notificaciones none (silent) no interrumpen pero están disponibles para que el usuario las revise después. Use important con moderación, solo para alertas críticas como errores o advertencias urgentes.

¿Cuándo se resuelve la Promise de ariaNotify?

La Promise se resuelve cuando la tecnología de asistencia ha terminado de anunciar el mensaje. Si no hay un lector de pantalla activo, se resuelve inmediatamente. Esto le permite encadenar anuncios o realizar acciones después de que el usuario haya escuchado el mensaje. await ariaNotify('Guardado') asegura que el siguiente anuncio no se superponga.

Herramientas relacionadas

Más herramientas de html y accesibilidad

Prueba también

Prueba también

Herramientas de CSS y diseño

Generador de carruseles CSS

Genera el marcado de un carrusel CSS nativo con scroll-snap, botones de desplazamiento, marcadores y una estructura de lista accesible. No requiere JavaScript.

Abrir herramienta