Tablas Accesibles

Oct 31 en General etiquetado por innovando

El diseño basado en tablas, es algo que además de anticuado es penalizado por W3C .

Dentro de las Pautas de Accesibilidad, el uso de tablas está en la Prioridad 2:

5.3 No utilice tablas para maquetar a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión alineada). [Prioridad 2]

5.4 Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para realizar efecto visual de formato. [Prioridad 2]

Esto no quiere decir que desterremos las tablas de nuestros diseños, sino que las usemos para lo que deben ser usadas: para mostrar contenido tabular. Ésto es: tablas de resultados de estudios, listados de productos, etc.

Asímismo, hay que hacerlas accesibles añadiendo etiquetas que muchas veces son olvidadas.

Incorporando título mediante la etiqueta

. El título de una tabla describirá la tabla de manera clara.

Si no te interesa usar

, la etiqueta

tiene un atributo que se llama title

Añadir un resumen en el atributo summary de la tabla, dónde puedes explicar cuál es la relación entre los datos de las celdas. Es muy útil para invidentes.

Agrupar las celdas y columnas usando por ejemplo scope conlos valores “row”, “col”, “rowgroup” o “colgroup”.

Las tablas se pueden mejorar visualmente mediante CSS, dando resultados muy vistosos. Para ello las etiquetas a las que deberéis dar formato son:

,

,

Enlaces de interés en los que me he basado y que estaría bien que vierais:

Guía de Referencia rápida del W3C: Tablas: Aquí encontraréis todas los atributos que puede tener una tabla.

Técnicas HTML para las Pautas de Accesibilidad de los Contenidos Web 1.0: Artículo donde W3C explica las técnicas para las tablas accesibles.

Navegando por los apartados de Foro Creativo he encontrado este artículo sobre el uso de DIVs en lugar de tablas. Más adelante explicaré mi método también:

Maquetando con DIV’s

Actualización:

He preparado un ejemplo sobre este artículo.

, ,

No hay comentarios, escribe el primero.

Comentar