Tengo un temporizador manejado por js para disminuir de 59 a 0 cada segundo. Estoy usando aria-live para detectar los cambios. Sin embargo, el lector de pantalla sigue repitiendo cada vez que se cambia el elemento.
¿Cómo podría hacer que un lector de pantalla anuncie el temporizador solo por primera vez?
Lo que he hecho antes es tener un contenedor oculto visualmente ( <div> o <span> ) que tiene aria-live y solo actualizo ese contenedor cada XX segundos. También tengo un contenedor visual que se actualiza cada segundo con una cuenta regresiva de 59 a 0. Esto me permite controlar la frecuencia con la que se anuncia el temporizador.
Dependiendo de su situación, es posible que desee actualizar el contenedor en vivo cada 15 segundos (a los 60, cuando se muestra por primera vez, a los 45, 30 y 15). Luego, tal vez a las 10 y 5. Luego, tal vez cada segundo por debajo de 5.
Para crear un contenedor visualmente oculto, consulte ¿Qué es sr-only en Bootstrap 3? . (No necesita Bootstrap. Simplemente puede copiar la definición de CSS y usarla directamente).
Según su descripción en los comentarios, parece que está creando un banner emergente o una notificación para informar a un usuario cuando su sesión está a punto de caducar. Entonces, aunque definitivamente no es ideal tener un lector de pantalla que anuncie el temporizador cada segundo, tampoco puede anunciarlo solo una vez cuando aparece por primera vez. ¿Qué sucede si el usuario está escribiendo cuando aparece la notificación y sus pulsaciones de teclas interrumpen la notificación? ¿Qué sucede si el usuario se alejó momentáneamente de su computadora y regresó, pero se perdió la notificación inicial?
Estoy de acuerdo con la sugerencia de Graham: use JavaScript para actualizar la región aria-live cada 5-10 segundos mientras el temporizador cuenta hacia atrás. Alternativamente, también podría usar role="alert" para forzar el anuncio, eliminando role="alert" y volviéndolo a agregar cada 5-10 segundos (las WCAG recomiendan al menos 20 segundos). De cualquier manera, se debe informar al usuario que su sesión va a caducar y se le debe dar la opción de extender su sesión. Esto cae bajo la directriz WCAG 2.1 2.2.1: Temporización ajustable .