Hay dos usos básicos de las tablas en la Web: como tablas de datos y como tablas de maquetación. La finalidad de las tablas de maquetación es para dar forma a la representación, las tablas de datos lo que hacen es presentar información por parrilla.
En este blog he introducido una tabla de maquetación con una sola celda y color de fondo diferente al color de fondo de la página, para mostrar al usuario que es línea de código lo que se encuentra en el interior. Un ejemplo se muestra en el Paso 5 de este blog y que se muestra a continuación.
| <!-- Ayuda a la Navegación --> <link href='http://blog-accesible.blogspot.com.es/' rel='principal' title='Página principal' /> |
La tabla de datos es la forma de presentar datos por pantalla en este blog, añadiendo un título en la parte superior. Un ejemplo se muestra en el Paso 9 de este blog y que se muestra a continuación.
| Frases que proporcionan los vínculos | El navegador muestra la lista de vínculos |
|---|---|
| Si quieres conocer mi currículum pincha aquí | mi currículum |
| Desde aquí puedes acceder a las fotos de mi familia | mi familia |
| Mis aficiones favoritas las encontrarás aquí | Mis aficiones |
El marcado HTML es el apropiado y colocado en su sitio para que los lectores de pantalla nevegen por la tabla. Los usuarios pueden ir de celda en celda y el lector les dirá la fila y comuna en que se están encontrando.
¿Cómo hacerlo?
Para que los usuarios pueden ir de celda en celda y el lector les diga la fila y comuna en que se están encontrando, se usa el el atributo “scope”, ya que esta tabla de datos es simple.
| <table border="1" cellpadding="10" summary="Esta tabla de datos es un ejemplo de inserción de tablas accesibles. Es una tabla sencilla de datos con el uso de la etiqueta scope"> <caption style="font-size: 120%; font-style: bold;">Ejemplos de vínculos con texto bien definidos</caption> <tbody> <tr> <th scope="col"> Frases que proporcionan los vínculos</th> <th scope="col"> El navegador muestra la lista de vínculos </th> </tr> <tr> <td>Si quieres conocer mi currículum pincha aquí</td> <td >mi currículum</td> </tr> <tr> <td>Desde aquí puedes acceder a las fotos de mi familia</td> <td>mi familia</td> </tr> <tr> <td>Mis aficiones favoritas las encontrarás aquí</td> <td>Mis aficiones</td> </tr> </tbody> </table> |
El scope="col” muestra a los lectores de pantallas y a los usuarios que todo lo que está debajo en la columna se refiere al encabezado a continuación de la etiqueta.
En esta tabla no hay encabezados de filas, en el caso de que hubiese se usa la misma etiqueta con row (scope="row") para indicar al lector de pantalla que todo lo que hay a la derecha del encabezado de la fila se refiere a diccho encabezado.
Se ha proporcionado un título a la tabla con la etiqueta caption además de un resumen con la etiqueta summary para incrementar la comprensión.
| <table border="1" cellpadding="10" summary="Esta tabla de datos es un
ejemplo de inserción de tablas accesibles. Es una tabla sencilla de
datos con el uso de la etiqueta scope"> <caption ">Ejemplos de vínculos con texto bien definidos</caption> .... </table> |