¿Cómo puedo mostrar/leer la información descrita por hacer clic para acceder a la accesibilidad?

Tengo un enlace de ayuda que alterna mi <p id="hlp"> elemento. Entre estos elementos hay un área de casilla de verificación. Necesito hacer que la información de ayuda esté disponible (leer p) al hacer clic en el enlace, no en el foco.

<form name="name">
  <fieldset>
  <legend>legend</legend>
  <a class="help" title="help-button" href="#" aria-describedby="hlp" >Help</a>
  <div class="check">
     <label class="radio">10</label><input type="radio" name="p-v">
     <label class="radio">20</label><input type="radio" name="p-v">
     <label class="radio">Input</label><input type="radio" name="p-v">
  </div>
  <div class="expln">
     <p id="hlp" aria-hidden="false">Help info: Lorem ipsum blah blah blah</p>
  </div>
</fieldset>
</form>

¿Cómo puedo hacer eso?

preguntado el 27 de julio de 12 a las 21:07

1 Respuestas

La propiedad aria-describedby identifica los elementos que describen el objeto, por lo que, de acuerdo con su pregunta, la información de ayuda en realidad no representa el enlace de ayuda cuando dice que debería estar disponible solo al hacer clic y no en el foco, lo que básicamente hace es controlar otro región que es activada por este enlace y es descrita por el contenido del mismo.

Entonces, idealmente, deberías estar haciendo algo como esto:

<a class="help" title="help-button" href="#" role="button" aria-controls="hlp">Help</a>
<div class="expln" id="hlp" tabindex="-1" role="region" aria-label="Help Info" aria-expanded="true" style="display: block; ">
   <p>Help info: Lorem ipsum blah blah blah</p>
</div>

Entonces, un lector de pantalla como JAWS ahora leerá el contenido de la región solo cuando se haga clic en el botón.

Y he marcado el enlace como role="button" ya que el enfoque del navegador no cambia y la ubicación de la página sigue siendo la misma.

Ver también:

Respondido 28 Jul 12, 06:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.