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:
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>
