Hoy voy a reparar las normas básicas para cumplir la accesibilidad de una tabla web. En concreto, voy a repasar los distintos epígrafes de la norma 1.3.1 Información y relaciones y 1.3.2 Secuencia significativa que afectan directamente a las tablas. Como en post anteriores, revisaré qué desea cubrir, cómo se valida y podré algunos ejemplos del testing de estas normas.
Comenzamos.
Índice de contenidos
1.3.1 Información y relaciones para accesibilidad de una tabla web
Como en esta norma se desglosan distintos puntos a tener en cuenta para validar la accesibilidad de una tabla web, voy a revisar los puntos uno a uno para asimilarlos mejor:
F) Etiquetas table, tr, th y td
En primer lugar, es necesario usar las etiquetas <table> (para la tabla), <tr> (para la fila de la tabla), <th> (celda de cabecera) y <td> (celda normal) de forma adecuada para su comprensión. Si no se utilizan de forma correcta estas etiquetas de marcado (aunque visualmente pueda ser lo mismo), a nivel de lector de pantalla la situación cambia bastante y se pierde información para el usuario.
G) Identificar los encabezados con th y las celdas de datos con td
En concreto, el siguiente apartado hace hincapié en la importancia de que en las tablas de datos (las únicas que se deberían utilizar) siempre se especifique las celdas de encabezados (th) y las de datos (td). ¿Por qué? Lo veremos en la siguiente norma.
H) Asociación adecuada de celdas y encabezados
A continuación, se deben asociar de forma correcta el contenido de cabeceras y celdas, para que sea interpretable por todos. ¿Cuándo? Pues en todo momento, pero en especial para que, por ejemplo, los lectores de pantalla lean de forma entendible el contenido de las mismas para personas con nula o poca visibilidad. Sino, no podrán entender el contenido de las mismas.
I) Caption para los titulos de las tablas
Cuando la tabla de datos disponga de un título (que en general siempre debería ser identificada de forma alguna) se debe identificar mediante la etiqueta <caption>. En todo momento, ese título debe identificar de forma clara a la tabla.
Ejemplo: Tabla con el listado de libros disponibles para alquilar en esa biblioteca.
J) Utilización del sumary
Es recomendable, que las tablas tenga una breve explicación de cómo está organizada la tabla y cómo se debe usar. Para ello, debes utilizar el atributo «summary» para contener ese contenido. En este sentido, esta información aporta valor a todos los usuarios de la misma.
Ejemplo de summay: Esta tabla contiene las columnas, nombre, ISBN, número de ejemplares, ubicación y las acciones de «coger y devolver» para poder hacer las gestiones correspondientes. En esas celdas existe un botón accionable que realiza la acción y cambia el estado de forma continuada.
K) Ni caption, ni summary debe estar duplicado
En este punto, se recalca que el contenido de las etiquetas caption y summary no debe coincidir. Aunque, en este sentido, se debe tener en cuenta que por su propia definición y si se hace un uso adecuado nunca puede coincidir. Sin embargo, en algunas ocasiones no se realiza un uso adecuado.
L) No utilizar etiquetas de datos en las tablas de maquetación
Otro punto importante para validar la accesibilidad de una tabla web es que si utilizamos una tabla para maquetación (aunque nunca se debe utilizar) es en ningún caso utilizar en ellas etiquetas o atributos específicos para tablas de datos, como son: <th>,<caption>, summary, scope, header.
¿Cómo se valida?
Después de eso, vamos a ver cómo validar los puntos anteriores. En este sentido, te debes apoyar en varias herramientas. En primer lugar, comenzaremos con la herramienta WAVE (Web Accesibility Evaluation tool). ¿Cómo se utiliza? Debes comprobar que al seleccionar «Details Structural elements», se identifican los elementos como «data table«. A continuación, revisarás que las celdas se identifican como «table header cell» para los encabezados.
Después de eso, vamos a validar la asociación de las celdas. Para ello, inspeccionando el código con la herramienta de navegador, vamos a verificar los atributos «scope», o «WAI-ARIA» como son: «rowheader» o «columheader». Igualmente, así mismo consultaremos que el atributo summary esté incluido y su contenido sea el adecuado.
Por otro lado, para testear la etiqueta <caption>, se debe emplear la herramienta Web Developer Toolbar. Con ella, seleccionando «Outline >> Outline table captions» observaremos el título y que identifica correctamente a la tabla de datos. De igual forma, se comparará el summary y el caption para comprobar que no este duplicado.
Y por último, en el caso de que existe una tabla para realizar una maquetación, se debe inspeccionar el código y asegurarnos que no estén presentes los atributos y etiquetas de datos.
1.3.2 Secuencia significativa para validar la accesibilidad de una tabla web
Dentro de esta norma, en el punto B, se trata una referencia a las tablas. En concreto, se indica que en las tablas de maquetación deben tener el sentido cuando se leen de forma lineal con una herramienta de apoyo. En otras palabras, la codificación del HTML de la tabla debe ser correcta y el contenido del mismo debe estar ubicado en el lugar adecuado, para que el lector lo pueda interpretar de forma correcta la información.
Además, se debe partir del punto del cual, se debe evitar por todos los medios maquetar la información con tablas.
¿Cómo se valida?
Del mismo modo, para la validación de la accesibilidad de una tabla web, con esta norma se debe usar la herramienta NVDA o similar. Nos debemos situar sobre la tabla, y esta leerá el contenido de la misma de izquierda a derecha y desde arriba hacia abajo. En todo momento, se debe asegurar que el orden tenga sentido para la lectura.
Referencias
Agradecimientos a Melanie Caballero, que como auditora de accesibilidad, me ha ayudado a comprender la mayoría de las pautas de accesibilidad. Para más información, tienes su web: https://mel-caballero.github.io/
Conclusión: Es fácil lograr la accesibilidad de una tabla web
Son pocos los puntos a tener en cuenta, a priori, para validar la accesibilidad de una tabla. Pero, recuerda que además, se debe aplicar todas las normas que puedan afectar si se le añaden otros elementos, por ejemplo: iconos decorativos, iconos informativos, etc. Para ello, debes hacer un análisis exhaustivo de los puntos impactados, te muestro algunos ejemplos de testing no funcional en la etiqueta accesibilidad de mi blog.
¿Qué te ha parecido este post? ¿Has podido aprender algo más sobre el testing de accesibilidad? Déjame un comentario y hablamos sobre ello. O también, puedes suscribirte al boletín de novedades (no envío spam).
Quizás te puede interesar
