Estoy tratando de hacer una tabla expandible accesible (tomando esto como inspiración: https://fuschia-stretch.glitch.me/ , consulte "Ver fuente"), pero el lector de pantalla NVDA no lee la cantidad de columnas en Fire Fox, pero los lee en Chrome. Aquí hay unos ejemplos:
// It seems like it is this block that is causing it to not count in Fire Fox, but it counts in Chrome, what can the reason be? Or how to solve this? tr { display: flex; flex-flow: row wrap; }gracias por toda la ayuda
La propiedad de display de CSS para los elementos de la tabla nunca debe cambiarse desde el valor predeterminado.
<table> tiene display:table<tr> tiene display:table-row<td> tiene display:table-cellSi cambia el valor predeterminado, un lector de pantalla ya no sabe que el elemento es parte de una tabla. Tienes suerte de que funcione en Chrome.
Incluso hay una nota sobre esto en el ejemplo que publicaste. El primer punto dice:
- Los roles de la tabla ARIA se adjuntan a todos los elementos nativos. Sin esto, algunos lectores de pantalla (VO) no leerían la tabla correctamente, debido al uso de display: flex .
Sin embargo, el ejemplo parece solucionarlo al especificar específicamente el atributo de role para la tabla, las filas y las celdas.
Escucho filas/columnas en Firefox pero dice 2 filas y 1 columna mientras que Chrome (correctamente) dice 4 filas y 5 columnas. (Hay una quinta columna oculta que no puede ver visiblemente, pero el lector de pantalla la "ve".)
En el inspector de código para Firefox, si desactivo la display y los elementos CSS relacionados con flex* para los elementos de la tabla, entonces la tabla se lee correctamente.