Paso 13: Tablas accesibles.

Cuando introducimos una tabla en nuestro blog, hemos de tener en cuenta que éstas puedan ser leidas correctamente por los lectores de pantalla. Para ello, hemos de tener en cuenta una serie de detalles:

• Con la etiqueta <caption> hemos de darle un título o subtitulo real a nuestra tabla.
• Con la etiqueta <summary> proporcionaremos un resumen de la tabla que será leida por los lectores de pantalla. 
• Con la etiqueta <th>  utilizaremos encabezados accesibles y añadiremos el atributo <abbr>para que sea leído únicamente con los navegadores de voz.
• Con la etiqueta <scope="col"> permitiremos que el lector de pantalla vaya leyendo columna por columna.
  

A continuación expongo un ejemplo de tabla donde he incluido estas cuatro etiquetas.

Cursos semanales

LU	MA	MI	JU	VI
Manualidades infantiles	Informática	Inglés para adultos	Pilates	Magia para niños

Para lograr que esta tabla sea accesible he realizado lo siguiente:

<summary><abbr><table border="1" cellpadding="10" summary="Ejemplo de tabla de datos accesible">
<caption style="font-size: 120%; font-style: bold;">Cursos semanales</caption><tbody>
<tr>
<th abbr="Lunes" scope="col">LU</th>
<th abbr="Martes" scope="col">MA</th>
<th abbr="Miércoles" scope="col">MI</th>
<th abbr="Jueves" scope="col">JU</th>
<th abbr="Viernes" scope="col">VI</th>
</tr>
<tr>
<td>Manualidades infantiles</td>
<td>Informática</td>
<td>Inglés para adultos</td>
<td>Pilates</td>
<td>Magia para niños</td>
</tr>
</tbody></table>
</abbr></summary>

Problemas surgidos 

• No tenía idea de como insertar una tabla en blogger puesto que no dispone de un editor para ello, por ello, la hice en word y la copié. Lógicamente esto fue un error grandísimo. 
• Sin tener idea aun de como hacerlo, pregunté en el foro sobre mi problema y gracias a la aportación de Matias logré solucionarlo.