
Tablas más semánticas y accesibles
CAPTION y TITLE
La etiqueta caption proporciona información sobre el contenido de la tabla al igual que el atributo <table title="">
.
La única diferencia es que title
no se muestra en los navegadores de pantalla (a excepción de mostrarse como tooltip o mensaje emergente). Por contra caption
aparece como un texto centrado en la parte superior de la tabla.
Resulta innecesario usar ambos puesto que con uno de ellos ya aportamos la información sobre el contenido de la tabla.
SUMMARY
Podemos optar libremente por usar caption
o title
pero si es necesario (sobre todo por razones de accesibilidad) complementar la información con un resumen a través del atributo <table summary="">
Como resumen se debería de indicar la función informativa de la tabla, de una forma más ampliada que el caso de caption
. También se puede indicar de forma muy resumida las relaciones entre las celdas.
TH
La etiqueta th sirve para identificar los grupos de encabezamiento. Las cabeceras que sirven de referencia, tanto si se trata de una disposición en columna como en filas.
SCOPE y HEADERS
Su función consiste en relacionar las celdas de los encabezados con las celdas que contienen los datos.
- El atributo
scope
podemos usarlo especialmente en tablas sencillas y en los encabezamientosth
. - El atributo
headers
cumple la misma misión pero de una forma más especifica, por ello es mejor reservarlo para tablas complejas.
Más información detallada de estos atributos en scope y headers en tablas para mejorar la accesibilidad.
En conclusión, con el uso de caption, th, thead, tbody, tfoot, colgroup, col, scope, headers, axis mejoramos sustancialmente la accesibilidad de nuestras tablas.
Comments are closed for this post