0
204
Views"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):
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").
<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?
1 answers
Answer question0
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.