Saltar al contenido


Tablas accesibles

Hacer una tabla accesible es sencillo, depende de la complejidad de la información que queremos mostrar. Basta con tener cuenta los siguientes puntos.

Identifica la tabla

Di que es lo que muestras en la tabla, una frase sencilla. En el ejemplo 1: Visitantes de rrrr.com por países

Explica lo que muestras

Tal y como se dice en Técnicas HTML para las Pautas de Accesibilidad al Contenido de la Web 1.0, los resúmenes son especialmente útiles para los lectores no videntes. Si la tabla tiene datos anidados, celdas que ocupan varias filas o columnas, no olvides incluir alguna explicación de la estructura de la tabla. Un par de ejemplos:

  • Visitantes que hemos tenido en rrrr.com clasificados por países y meses.
  • Visitantes de rrrr.com de cada país y dentro de cada país si hablan español o no. La primera columna muestra los meses y las restantes columnas corresponden a los países, dentro de cada país hay dos subcolumnas, una para los usuarios que hablan español y otra para los que no lo hablan. Cada fila muestra los datos de un mes.
Visitantes de rrrr.com por países
Mes España México Estados Unidos
Enero 10 20 30
Febrero 11 22 33

Código que he usado en la tabla anterior.

<table summary="Visitantes que hemos tenido en rrrr.com clasificados por países y meses.">
<caption>Visitantes de rrrr.com por países</caption>
...

Etiqueta correctamente cada celda

Básicamente usa TH para los encabezados tanto de filas como de columnas y TD para los datos. Como lo hagas depende de los datos que quieres representar en la tabla y de la importancia que le des a cada dato. La misma información puede mostrarse de muchas formas, mira estos ejemplos de distintas tablas con la misma información.

Ejemplo 1.

Visitantes de rrrr.com por países
Mes España México Estados Unidos
Enero 10 20 30
Febrero 11 22 33

Ejemplo 2.

Visitantes de rrrr.com por países
Mes España México Estados Unidos
Enero 10 20 30
Febrero 11 22 33

Si un encabezado tiene un contenido largo se debe usar el atributo ABBR para indicar una abreviatura que reduzca las repeticiones y el tiempo de lectura. Por ejemplo, Estados Unidos tiene la abreviatura EEUU.

<th abbr="EEUU">Estados Unidos</th>

Marca los grupos de filas

Utiliza THEAD, TBODY y TFOOT para identificar las distintas partes de una tabla, cabecera, cuerpo y pie. Aunque en una tabla sencilla no sean muy necesarios, en tablas más complejas y largas permiten que al imprimirse la cabecera y el píe se repitan en cada página en el caso de ocupar más de una página. La siguiente tabla te muestra como se usan.

Visitantes de rrrr.com por países
Mes España México Estados Unidos
Totales 21 42 63
Enero 10 20 30
Febrero 11 22 33

Código resumido.

<table summary="Visitantes que hemos tenido en rrrr.com clasificados por países y meses. También se proporcionan los totales de cada país.">
<caption>Visitantes de rrrr.com por países</caption>
<thead>
...
</thead>
<tfoot>
...
</tfoot>
<tbody>
...
</tbody>
</table>

Existen otros elementos muy interesantes, COLGROUPS y COL, que aquí no vamos a comentar pero que te recomiendo que los veas por sus posibilidades de uso en tablas más complejas.

Relaciona la información

Si queremos que una tabla proporcione una información accesible a cualquier usuario hay que asociar los datos con sus correspondientes encabezados, para ello podemos usar tres atributos SCOPE, HEADERS y AXIS.

SCOPE es el más adecuado para tablas sencillas ya que permite asociar a un encabezado un conjunto de filas o columnas. Cuando alguna celda de datos TD, pueda tener la función de encabezado, es posible usar este atributo. En el siguiente ejemplo se ha asociado cada país a su columna de datos y el mes con la fila de datos que le corresponde usando respectivamente scope="col" y scope="row".

Visitantes de rrrr.com por países
Mes España México Estados Unidos
Enero 10 20 30
Febrero 11 22 33

Para tablas más complejas se recomienda el uso de HEADERS y AXIS. Estos dos atributos nos permiten asociar las cabeceras con sus datos. AXIS se utiliza para establecer categorías de datos, es muy útil cuando usando la tabla que viene a continuación el usuario quiere obtener la respuesta preguntas concretas. ¿Cuántos de los usuarios que nos visitaron el mes de enero de EE.UU. hablan español? El atributo AXIS no lo vamos a tratar en este artículo pero si quieres ver su uso la gente de HTML con clase lo explica muy bien en el apartado categorización de celdas.

Visitantes de rrrr.com por países
Mes España México Estados Unidos
Hablan español No hablan español Hablan español No hablan español Hablan español No hablan español
Enero 10 0 15 5 5 25
Febrero 11 0 20 2 3 30

La misma información se podía representar en otra tabla sin usar HEADERS pero usando SCOPE.

Visitantes de rrrr.com por países
Mes España México Estados Unidos
Hablan español No hablan español Hablan español No hablan español Hablan español No hablan español
Enero 10 0 15 5 5 25
Febrero 11 0 20 2 3 30

Tablas sencillas

Como último punto quiero destacar lo más importante, hacer las tablas lo más sencillas que sea posible. Si es necesario separar la información en varias tablas.

Tres enlaces fundamentales:


© innovacionweb.com | Algunos derechos reservados. Licencia Creative commons
Saber y conocer