Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

192
Visualizações
"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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda