Paso 13.- Tablas accesibles.
No es muy habitual encontrar tablas en las bitácoras. La única excepción probablemente sea las que se utilizan para insertar un calendario. En todo caso, para saber hacerlas correctamente voy a dar tres instrucciones que será preciso tener en cuenta.
Una aclaración previa. Voy a hablar de tablas de datos y no de tablas utilizadas para maquetar (que ya sabe que no están recomendadas y sólo se aceptan si, al alinear su contenido, éste es comprensible).
Nos puede ser útil el ejemplo de una hoja de calendario para las nociones que voy a explicar.
En primer lugar hay que dar un título o subtítulo real a nuestra tabla mediante la etiqueta <caption>.
En muchas ocasiones nos encontramos un supuesto título de la tabla pero que realmente no es más una celda más de la tabla. El código fuente que nos encontraríamos sería algo así:
La segunda cuestión a tener en cuenta es proporcionar un resumen para las tablas. Esta tarea se realiza mediante el atributo "summary" de la etiqueta <table>. El uso de este atributo proporciona información que es leída por los lectores de pantalla y navegadores por voz, de tal manera que al usuario le puede llegar información previa del contenido de nuestra tabla y de los datos relevantes que contiene. La forma de usarla, siguiendo con el ejemplo anterior, es:
La tercera cosa que debemos hace para que nuestra tabla sea accesible es utilizar encabezamientos apropiados. Esto se consigue utilizando la etiqueta <th>, en lugar de la etiqueta <td>, donde proceda. Lo primero que tenemos que tener claro es cuales son los encabezados en nuestra tabla. Siguiendo con el ejemplo que venimos usando, en el caso de una hora mensual de calendario está claro que los encabezados serán los nombres de los días de la semana, que están en la primera línea de datos. Extendemos algo más el código fuente que hemos venido usando y una tabla correctamente etiquetada nos quedaría así:
Para tablas más complejas habría que hacer otras cosas. Pero lo visto hasta aquí sirve para la mayoría de las tablas simples que solemos incluir en nuestras páginas Web.
Una aclaración previa. Voy a hablar de tablas de datos y no de tablas utilizadas para maquetar (que ya sabe que no están recomendadas y sólo se aceptan si, al alinear su contenido, éste es comprensible).
Nos puede ser útil el ejemplo de una hoja de calendario para las nociones que voy a explicar.
En primer lugar hay que dar un título o subtítulo real a nuestra tabla mediante la etiqueta <caption>.
En muchas ocasiones nos encontramos un supuesto título de la tabla pero que realmente no es más una celda más de la tabla. El código fuente que nos encontraríamos sería algo así:
Lo que debemos hacer es sustituir esa primara línea <tr> con el "falso" título por otra que contenga la etiqueta <caption> del siguiente modo:
<table border="1" width="30%">
<tr>
<td colspan="7" align="center">Junio 2005</td>
<tr>
<td align="center">Lu</td>
...
De esta forma los lectores de pantalla y ciertos navegadores sólo texto, como Lynx, mostrarán el título real de la tabla como lo que es, informando al usuario de que no es un dato más en la tabla.
<table border="1" width="30%">
<caption>Junio 2005</caption>
<tr>
<td align="center">Lu</td>
...
La segunda cuestión a tener en cuenta es proporcionar un resumen para las tablas. Esta tarea se realiza mediante el atributo "summary" de la etiqueta <table>. El uso de este atributo proporciona información que es leída por los lectores de pantalla y navegadores por voz, de tal manera que al usuario le puede llegar información previa del contenido de nuestra tabla y de los datos relevantes que contiene. La forma de usarla, siguiendo con el ejemplo anterior, es:
Es importante que el texto del atributo "summary" sea lo más breve y explicativo posible. No trates de informar al usuario, mediante este atributo, del formato de la tabla (por ejemplo, "esta tabla tiene seis líneas y siete columnas"). Esa información ya se la da el lector de pantalla. Infórmale del propósito de la misma, para que sirve, y sobre el contenido, al menos lo más destacado. En nuestro ejemplo, la tabla es un calendario mensual y en su contenido se puede encontrar el enlace a los "posts" diarios de nuestra bitácora.
<table border="1" width="30%" summary="Calendario mensual con vículos a los posts de cada día">
<caption>Junio 2005</caption>
<tr><td align="center">Lu</td>
...
La tercera cosa que debemos hace para que nuestra tabla sea accesible es utilizar encabezamientos apropiados. Esto se consigue utilizando la etiqueta <th>, en lugar de la etiqueta <td>, donde proceda. Lo primero que tenemos que tener claro es cuales son los encabezados en nuestra tabla. Siguiendo con el ejemplo que venimos usando, en el caso de una hora mensual de calendario está claro que los encabezados serán los nombres de los días de la semana, que están en la primera línea de datos. Extendemos algo más el código fuente que hemos venido usando y una tabla correctamente etiquetada nos quedaría así:
Hemos cambiando la etiqueta y también hemos quitado la alineación central que le dábamos, porque el formato de <th> ya centra el texto en la celda y si queremos proporcionarle alguna característica de estilo lo deberemos declarar en nuestra hoja de estilo. También hemos incluido el atributo "abbr", que en este caso sí procede ya que queremos que sea leído por los lectores de pantalla y navegadores por voz pero no necesitamos que se muestre visualmente.
<table border="1" width="30%" summary="Calendario mensual con vículos a los posts de cada día">
<caption>Junio 2005</caption>
<tr>
<th abbr="Lunes">Lu</th>
<th abbr="Martes">Ma</th>
<th abbr="Miércoles">Mi</th>
<th abbr="Jueves">Ju</th>
<th abbr="Viernes">Vi</th>
<th abbr="Sábado">Sa</th>
<th abbr="Domingo">Do</th>
</tr>
...
Para tablas más complejas habría que hacer otras cosas. Pero lo visto hasta aquí sirve para la mayoría de las tablas simples que solemos incluir en nuestras páginas Web.
<< Home