Tablas accesibles en HTML

WebProgramacion > Blog > Accesibilidad Web > Tablas accesibles en HTML
Autor: Dámaso Velázquez Álvarez

Cuando una persona con discapacidad visual accede a una página web, lo hace mediante un lector de pantalla, que es un software que le permite escuchar el contenido de la misma. Si esta página no está diseñada de manera accesible, el usuario puede encontrarse con una serie de problemas a la hora de acceder a su contenido.

En este artículo vamos a ver como crear una tabla de manera accesible. Las tablas que almacenan gran cantidad de datos, si no están diseñadas correctamente, pueden resultar inaccesibles, al escucharlas a través de un lector de pantalla.

En este ejemplo vamos a ver cómo asociar cada celda a su columna correspondiente (a través del atributo headers de cada elemento <td>)

De esta forma, un lector de pantalla leerá correctamente el contenido de la tabla especificando a qué columna corresponde cada dato leído.

Vamos a crear una tabla de ejemplo que contiene dos columnas, nombre y apellidos. La tabla contendrá cuatro filas con datos de ejemplo. El código de la tabla será el siguiente:

<table summary="En la siguiente tabla tenemos una lista de personas con su nombre y apellidos.
   Esta tabla es un ejemplo de tabla accesible.">
   <caption>Título de la tabla</caption>
   <tr>
      <th id="columna_nombre">Nombre</th>
      <th id="columna_apellidos">Apellidos</th>
   </tr>
   <tr>
      <td headers="columna_nombre">Nombre persona 1</td>
      <td headers="columna_apellidos">Apellidos persona 1</td>
   </tr>
   <tr>
      <td headers="columna_nombre">Nombre persona 2</td>
      <td headers="columna_apellidos">Apellidos persona 2</td>
   </tr>
   <tr>
      <td headers="columna_nombre">Nombre persona 3</td>
      <td headers="columna_apellidos">Apellidos persona 3</td>
   </tr>
   <tr>
      <td headers="columna_nombre">Nombre persona 4</td>
      <td headers="columna_apellidos">Apellidos persona 4</td>
   </tr>
</table>

Podría interesarte...

Imágenes accesibles en HTML
Código html que hay que utilizar para que una imagen sea accesible
Campos de texto accesibles
Ejemplo de campo de texto accesible con ASP.NET
Tablas con capas
Ejemplo para maquetar una tabla con capas y estilos CSS. Imprescindible si queremos que nuestra web sea accesible por ...
GridView accesible
Implementando un control GridView accesible

Enlaces recomendados

Fecha

1/6/2008