¿Cómo proporcionar una descripción accesible a la lista de botones HTML?
Tengo una larga lista de botones que quiero hacer conformes con WCAG. Muchos de los elementos tienen notas finales (marcadas con un asterisco) como se muestra a continuación. ¿Cuál es la forma adecuada de proporcionar la descripción accesible para estas notas finales?
Hasta donde sé, algunos navegadores no están leyendo aria-describedby en elementos no enfocables.
<ul aria-describedby="list_description">
<li><button>Elemento <em>*</button></li>
<li><button>Elemento</button></li>
<li><button>Elemento *</button></li>
<li><button>Elemento</button></li>
<li><button>Elemento *</button></li>
<li><button>Elemento *</button></li>
<li><button>Elemento *</em></button></li>
<li><button>Elemento</button></li>
<li><button>Elemento</button></li>
<li><button>Elemento <em></button></li>
<li><button>Elemento *</em></button></li>
</ul>
<p><p id="list_description">
* - Elemento importante <br>
** - Elemento muy importante
</p>
Estaba pensando en la solución descrita aquí: https://stackoverflow.com/questions/49061370/accessibility-and-asterisks-end-notes, pero colocar dentro de
Otra forma es proporcionar descripciones duplicadas para cada elemento de la lista.
¿Qué sugieres para abordarlo?
davy.ai
Existen varias formas de proporcionar descripciones accesibles para las notas finales en una lista de botones WCAG compatibles. Una opción es, como se describe en la publicación de Stack Overflow que mencionó, colocar una etiqueta dentro del
Otra opción es proporcionar descripciones duplicadas para cada elemento de la lista. Esto significa agregar las descripciones de las notas finales al atributo
aria-label
de cada botón, o especificarlas en atributos separadosaria-describedby
para cada botón. Este enfoque garantiza que la descripción de la nota final del botón esté siempre disponible para los usuarios de tecnología de asistencia, sin requerir que naveguen a una descripción separada en otro lugar de la página.En última instancia, el mejor enfoque dependerá del contexto y los usuarios específicos de su sitio web o aplicación. Considere probar diferentes soluciones con un grupo diverso de usuarios para determinar qué funciona mejor para ellos. Además, asegúrese de que cualquier solución que elija cumpla con los estándares de accesibilidad WCAG 2.1.