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

189
Vistas
"aria-describedby" no se lee por completo a menos que haya un "aria-labeledby"

Estoy tratando de hacer que la voz en voiceover lea solo el aria-describedby , pero lo lee de esta manera ("Soy un botón" no se lee):

ingrese la descripción de la imagen aquí

Mientras que si hay un elemento con id aria-describedby="modal-label" definido. el elemento con id aria-labelledby="modal-desc" se lee completamente (se lee "Soy un botón").

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

 <div id="modal" role="dialog" aria-labelledby="modal-label" aria-describedby="modal-desc" tabIndex={0} className="modal" > {*/ {children} */} <div> {/* If no exists this div, modal-desc is not read completely */} <div id="modal-label">this is the title</div> <div id="modal-desc"> <div>this is a descripcion</div> <div> <div> <button>I am a button</button> </div> </div> </div> </div> </div>

¿Cómo puedo hacer que el aria-describedby se lea completamente cuando no hay ningún elemento con la modal-label id cuando se abre el modal?

este es mi código en vivo

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

0

Su HTML generado debería parecerse a algo como esto:

 <div id="modal" class="modal" role="dialog" aria-labelledby="modal-label" aria-describedby="modal-desc" tabindex="-1"> <!-- {children} --> <div role="document"> <div id="modal-label">this is the title</div> <div> <div id="modal-desc">this is a description</div> <div> <div> <button>I am a button</button> </div> </div> </div> </div> </div>

Vale la pena señalar que cuando tanto aria-describedby como aria-labelledby están presentes, aria-labelledby parece tener prioridad en el cálculo del nombre accesible .

Además, su ejemplo original tenía el elemento ariadescribedby que contenía un botón, lo que puede causar problemas.

Nota: El contenido descrito por aria solo debe ser una cadena de texto. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby

Dependiendo de su lector de pantalla y/o navegador, puede obtener un comportamiento diferente, pero aria-labelledby normalmente se leerá primero, y luego aria-decribedby puede o no leerse después, según la implementación.

aria-decribedby también puede o no leerse en foco, dependiendo de la implementación.

También debe prestar especial atención a las limitaciones que tiene la voz en off para admitir aria-describedby , ya que esto podría impedirle obtener el comportamiento exacto que está buscando.

Al final del día, aria-describedby puede no terminar siendo la herramienta adecuada, si se trata de información importante que todos deben comprender para dar sentido al contenido.

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