Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

161
Vistas
Is there a way to make screen reader announce only once when the element is rendered?

I have a timer that handled by js to decrease from 59 to 0 every seconds. I'm using aria-live to detect the changes. However, the screen reader keeps repeating everytime element is changed.

How could I make a screen reader announces the timer for the first time it was rendered only?

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

What I've done before is have a visually hidden container (<div> or <span>) that has aria-live and I only update that container every XX seconds. I also have a visual container that's updated every second to countdown from 59 to 0. This allows me to control how often the timer is announced.

Depending on your situation, you might want to update the live container every 15 seconds (at 60, when first displayed, at 45, 30, and 15). Then maybe at 10 and 5. Then perhaps every second below 5.

To create a visually hidden container, see What is sr-only in Bootstrap 3?. (You don't need Bootstrap. You can just copy the CSS definition and use it directly.)

about 4 years ago · Juan Pablo Isaza Denunciar

0

From your description in the comments, it sounds that you're building a popup banner or notification to inform a user when their session is about to expire. So, while it's definitely not ideal to have a screen reader announce the timer every second, you also can't only announce this once when it first appears. What if the user is typing when the notification appears and their keystrokes interrupt the notification? What if the user has momentarily stepped away from their computer and returned, but have missed the initial notification?

I agree with Graham's suggestion: use JavaScript to update the aria-live region every 5-10 seconds as the timer counts down. Alternatively, you could also use role="alert" to force the announcement, removing the role="alert" and adding it back every 5-10 seconds (WCAG recommends at least 20 seconds). Either way, the user must be informed that their session is going to expire and must be given the option to extend their session. This falls under WCAG 2.1 guideline 2.2.1: Timing Adjustable.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda