0
200
Visualizações¿Qué etiqueta de aria necesito en un botón HTML que cambia el contenido usando datos de JavaScript y JSON?
Tengo una página web que tiene algunos botones HTML. Al hacer clic en un botón, se cambiará el texto de las páginas y el contenido de la imagen a través de JavaScript. El contenido se carga desde un archivo JSON.
<div class="dot-buttons role="tablist" aria-label="crew list"> <button role="tab" class="dot-button" aria-selected="true">Douglas Hurley</button> <button role="tab" class="dot-button" aria-selected="false">Mark Shuttlewort</button> <button role="tab" class="dot-button" aria-selected="false">Victor Glover</button> <button role="tab" class="dot-button" aria-selected="false">Anousheh Ansari</button> </div>Lo que me confunde es cómo marcar la etiqueta ARIA para que el usuario entienda que hacer clic en el botón cambiará el contenido de las páginas.
Lo intenté:
aria-controls="Tab-1"Pero esto falló mi prueba de accesibilidad ya que los botones realmente no controlan otros elementos HTML. Los botones solo cambian el contenido dentro de los elementos.
¿Cómo puedo establecer etiquetas ARIA para los botones para que los usuarios entiendan que hacer clic en ellos cambiará el contenido?
1 Respostas
Responde à pergunta0
Su código de muestra utiliza el patrón de diseño de pestañas . ¿Es eso lo que quieres hacer? ¿Tiene algo en su página que se parece a esto:?
Si es así, entonces el código que tiene es suficiente. Cuando el usuario selecciona uno de los botones, supongo que cambia aria-selected de "falso" a "verdadero" (o viceversa). Cuando cambia el valor, el lector de pantalla anunciará el cambio de estado automáticamente. Ese es uno de los beneficios de usar los atributos de ARIA: tiene soporte integrado para notificar cambios a la tecnología de asistencia, como los lectores de pantalla.
Y dado que está usando role="tablist" , la combinación de que el usuario escuche que tiene una tablista y que un estado cambia de "no seleccionado" a "seleccionado" es una pista suficiente para el usuario de que algo en la página actualizado cuando se seleccionó el botón.
Y si este es el patrón en su página, podría tener aria-controls en su botón y se referiría a la ID del panel que muestra, pero aria-controls no le compra mucho del soporte de tecnología de asistencia. Creo que un lector de pantalla (JAWS) hace algo con él, pero la mayoría de los demás no, por lo que no es gran cosa si lo usa o no. Por supuesto, eso es una especie de catch-22. Si los lectores de pantalla no lo admiten, la gente no lo usará, y si la gente no lo usa, no hay ningún incentivo para que los lectores de pantalla lo admitan. En general, debe usar los atributos ARIA apropiados, ya sea que haya soporte para ellos o no, para estar listo cuando llegue el soporte. El patrón de diseño de pestañas mencionado anteriormente dice que debe usar aria-controls.