Universidad de Alicante
Departamento de Lenguajes y Sistemas Informáticos

Accesibilidad Web

Buscador

Migas de pan

Estás en: Accesibilidad web > Guía breve > 9. Tablas

Consejo 9: Tablas: Facilite la lectura línea a línea. Resuma.

¿Cuál es el problema?

Una tabla de datos definida con la etiqueta <table> es muy fácil de entender si se puede ver toda ella en su conjunto, pero es muy difícil de entender si sólo se puede ver un dato aislado cada vez. Este problema lo sufren los usuarios que emplean navegadores no visuales, ya que ellos tienen que recorrer las tablas de formal lineal pero la naturaleza de una tabla es bidimensional, por lo que pierden la visión global de la tabla y pierden las referencias que permiten interpretar el contenido de cada celda de la tabla.

Para evitar este problema, se tienen que etiquetar correctamente las tablas para definir su título, se tiene que incluir un resumen que describa brevemente el contenido de la tabla, se tienen que definir los encabezamientos de las columnas y las filas y se tienen que emplear etiquetas y atributos especiales para asociar las celdas de encabezamiento y las celdas de datos para los encabezamientos más complejos.

El título

Una tabla debe tener un título que proporcione una descripción breve de la tabla. Para evitar que existan dudas, el título se tiene que definir dentro de la tabla. Para definir correctamente el título de una tabla, se tiene que emplear la etiqueta <caption>.

De acuerdo con la especificación de caption en HTML, la etiqueta <caption> es opcional y tiene que ser el primer elemento que contenga una tabla (justo después de la etiqueta <table>) y sólo puede haber un título en una tabla.

El resumen

El resumen permite definir una descripción larga de la tabla que complemente al título de la tabla. La descripción tiene que incluir una explicación sobre el contenido y sobre la estructura de la tabla (por ejemplo, debe explicar el propósito de la tabla, el número de filas y de columnas que contiene y una descripción de los encabezamientos). Además, también puede explicar la relación que guarda la tabla con el resto de la página.

En HTML, el resumen de una tabla se define con el atributo summary de la etiqueta <table>. Según la especificación de summary, los navegadores no visuales, como los lectores de pantalla o los basados en el uso de una linea braille, deben transmitir el contenido de este atributo a los usuarios.

Encabezamientos

Al recorrer una tabla de forma lineal, se pierde la visión global y es muy difícil identificar el significado de un dato. De forma aislada, el contenido de una celda puede no tener sentido si no se sabe en qué fila y en qué columna está situado. Para evitar esta situación, podemos usar los encabezamientos (o encabezados), que permiten asociar un dato con su encabezado.

Un encabezado de una tabla se define con la etiqueta <th>. Esta etiqueta es similar a la etiqueta <td> (se puede usar una en el lugar de la otra) y por tanto, ambas definen una celda de una tabla, pero <th> indica que la celda tiene una función especial y contiene un encabezado.

Con la etiqueta <th> se pueden definir tanto encabezados verticales como horizontales.

En el siguiente ejemplo se define una tabla sencilla formada por 4 filas y 7 columnas que muestra el precio medio en céntimos de euro de diferentes combustibles a lo largo del primer semestre de 2009; la primera fila de la tabla contiene los encabezados de columna y la primera columna contiene los encabezados de fila:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Página con una tabla sencilla</title>
<style type="text/css">
table {
  border: 2px solid #000;
  margin-left: auto;
  margin-right: auto;
}
            
th, td {
  border: 2px solid #999;
}
              
caption {
  caption-side: bottom;
}
</style>
</head>
<body>
<table summary="En el precio de los combustibles se aprecia un incremento sostenido a lo largo del primer semestre del año 2009">
<caption>Precio medio en céntimos de euro de los combustibles durante el primer semestre de 2009</caption>
  <tr>
    <th>Combustible</th>
    <th>Enero</th><th>Febrero</th><th>Marzo</th>
    <th>Abril</th><th>Mayo</th><th>Junio</th>
  </tr>
  <tr>
    <th>Gasolina 95</th>
    <td>92</td><td>93</td><td>95</td>
    <td>97</td><td>100</td><td>102</td>
  </tr>
  <tr>
    <th>Gasolina 98</th>
    <td>103</td><td>104</td><td>106</td>
    <td>108</td><td>110</td><td>113</td>
  </tr>
  <tr>
    <th>Diesel</th>
    <td>84</td><td>85</td><td>87</td>
    <td>85</td><td>87</td><td>90</td>
  </tr>
</table>
</body>
</html>

En la siguiente imagen podemos ver cómo se visualiza este código HTML en un navegador, el título que se ha definido con la etiqueta <caption> aparece en la parte inferior de la tabla, mientras que el resumen que se ha definido con el atributo summary no es visible y en principio no es accesible con una navegador normal como Mozilla Firefox:

Tabla sencilla visualizada en Mozilla Firefox

Sin embargo, podemos emplear el complemento Juicy Studio Accessibility Toolbar para revisar la estructura y contenido de una tabla y entonces sí que podemos visualizar el contenido del atributo summary, tal como podemos ver en la siguiente imagen:

Estructura y contenido de una tabla según el complemento Juicy Studio Accessibility Toolbar

Encabezamientos más complejos

Para tablas con encabezamientos más complejos, donde pueden existir varios niveles de encabezamiento, podemos emplear los atributos scope y headers para definir la relación que existe entre las celdas de encabezamiento y las celdas de datos.

En tablas sencillas ambos atributos se pueden emplear de forma equivalente, pero para tablas más complejas se tiene que emplear el atributo headers. En principio, el uso de los atributos scope y headers no afecta a la presentación visual de la tabla.

El atributo scope define el conjunto de celdas para las cuales la celda sobre la que se aplica proporciona información de encabezamiento. Puede tomar cuatro posibles valores:

El atributo headers permite definir una lista de celdas de la tabla que proporcionan información de encabezamiento para la celda actual. El valor de este atributo es una lista separada por espacios en blanco de los identificadores de las celdas de encabezamiento; las celdas de encabezamiento se identifican con el atributo id. Por tanto, el atributo headers permite definir encabezamientos más complejos que con el atributo scope.

Más información

Accessible Table Builder es una herramienta que ayuda a construir tablas accesibles. Es muy útil para la gente que desconoce el empleo de la etiqueta <th>, del atributo scope o de los atributos headers e id.

Algunas páginas con más información:

Estándares, licencia y contacto