Guía Práctica de Comprobación de Accesibilidad: Tablas de Datos

Instituto Nacional
de Tecnologías
de la Comunicación
Guía Práctica de
Comprobación de
Accesibilidad:
TABLAS DE DATOS
Centro de Referencia en Accesibilidad
y Estándares Web
Diciembre 2008
Instituto Nacional
de Tecnologías
de la Comunicación
Copyright © 2008 Instituto Nacional de Tecnologías de la comunicación (INTECO)
El presente documento está bajo la licencia Creative Commons Reconocimiento-No comercial-Compartir Igual versión
2.5 España.
Usted es libre de:
copiar, distribuir y comunicar públicamente la obra
hacer obras derivadas
Bajo las condiciones siguientes:
Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador
(pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).
No comercial. No puede utilizar esta obra para fines comerciales.
Compartir bajo la misma licencia. Si altera o transforma esta obra, o genera una obra derivada, sólo puede
distribuir la obra generada bajo una licencia idéntica a ésta.
Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de esta obra.
Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor
Nada en esta licencia menoscaba o restringe los derechos morales del autor.
Esto es un resumen legible por humanos del texto legal (la licencia completa) disponible
http://creativecommons.org/licenses/by-nc-sa/2.5/es/
en
El presente documento cumple con las condiciones de accesibilidad del formato PDF (Portable Document Format).
Se trata de un documento estructurado y etiquetado, provisto de alternativas a todo elemento no textual, marcado de
idioma y orden de lectura adecuado.
Para ampliar información sobre la construcción de documentos PDF accesibles puede consultar la guía disponible en la
sección Accesibilidad > Formación > Manuales y Guías de la página http://www.inteco.es.
Centro de Referencia en Accesibilidad y Estándares Web
2
Instituto Nacional
de Tecnologías
de la Comunicación
ÍNDICE
1.
OBJETIVO DE LA GUÍA
4
2.
RELACIÓN ENTRE DATOS
5
3.
VALIDACIÓN DE TABLAS DE DATOS
7
3.1.
Encabezados
7
3.1.1.
Identificación de encabezados
7
3.1.2.
Asociación de encabezados
3.2.
3.3.
4.
14
Resúmenes
22
3.2.1.
Tablas sencillas
23
3.2.2.
Tablas complejas
26
Agrupación de Información
28
3.3.1.
Grupos estructurales
29
3.3.2.
Unión de filas y columnas
31
3.3.3.
Categorización
32
CONCLUSIONES
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
35
3
Instituto Nacional
de Tecnologías
de la Comunicación
1.
OBJETIVO DE LA GUÍA
Entre las medidas a adoptar para la consecución de un sitio Web accesible, se ha de tener
en cuenta la presentación al usuario de información en formato tabular. Los usuarios que no
puedan acceder a esta información visualmente (discapacitados visuales, usuarios de
navegadores de texto, etc.) han de disponer de toda la información que esta aporta,
incluyendo una visión general a modo de resumen de la información que proporciona y la
relación entre todos sus datos.
A pesar de que el texto se considera accesible para prácticamente todos los usuarios, las
tablas de datos contienen información relacional basada en la colocación de las celdas de
datos en filas y columnas.
El objeto de la presente guía práctica es la de proporcionar información sobre los aspectos
que intervienen en la comprobación de accesibilidad del contenido Web basado en tablas
de datos. Se pretende ofrecer una visión general de la Accesibilidad para esta tipología de
contenidos así como una metodología práctica que permita comprobar la adecuación de los
mismos conforme a las normativas y recomendaciones vigentes.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
4
Instituto Nacional
de Tecnologías
de la Comunicación
2.
RELACIÓN ENTRE DATOS
Las tablas sirven para mostrar información tabular y no para dotar de presentación a los
contenidos. Por tanto se ha de evitar el uso de tablas para maquetar.
Las tablas de datos estructuran la información en filas y columnas describiendo una relación
entre cada celda de datos con otras celdas en su misma fila y/o columna.
Esta información, que de forma visual se aprecia fácilmente, se debe transmitir también a los
usuarios que deseen acceder a la tabla de forma no visual.
Por ello, a la hora de construir una tabla de datos se deben identificar adecuadamente las
celdas de cada fila y/o columna.
Para construir una tabla de datos se precisa de ciertos elementos HTML básicos:
•
El elemento TABLE identifica toda la tabla y contiene el resto de elementos.
•
El elemento TR actúa como contenedor para una fila de celdas.
•
El elemento TH define una celda que contiene información de encabezado.
•
El elemento TD define una celda que contiene datos.
Estas celdas deben agruparse adecuadamente con el uso de elementos como THEAD, TBODY
y TFOOT, así como asociar los datos mediante el uso de atributos como scope, id y
headers.
Asimismo se debe proporcionar una descripción adecuada de los datos de la tabla mediante
títulos introducidos a través del elemento CAPTION y resúmenes mediante el atributo
summary de la tabla.
Ejemplo de código:
<table summary="Medallero Olímpico de EEUU, Rusia y China">
<caption>Medallero Olímpico</caption>
<colgroup />
<colgroup>
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<td></td>
<th id="header1">Medallas de oro</th>
<th id="header2">Medallas de plata</th>
<th id="header3">Medallas de bronce</th>
</tr>
</thead>
<tfoot>
<tr>
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
5
Instituto Nacional
de Tecnologías
de la Comunicación
<td colspan="4">(*) Medallas pendientes de revisión
por un comité antidopaje</td>
</tr>
</tfoot>
<tbody>
<tr>
<th id="header4">EEUU</th>
<td headers="header4 header1">22</td>
<td headers="header4 header2">26</td>
<td headers="header4 header3">18</td>
</tr>
<tr>
<th id="header5">Rusia</th>
<td headers="header5 header1">18</td>
<td headers="header5 header2">24</td>
<td headers="header5 header3">20</td>
</tr>
<tr>
<th id="header6">China</th>
<td headers="header6 header1">15</td>
<td headers="header6 header2">19</td>
<td headers="header6 header3">19 (*)</td>
</tr>
</tbody>
</table>
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
6
Instituto Nacional
de Tecnologías
de la Comunicación
3.
VALIDACIÓN DE TABLAS DE DATOS
A continuación se explicarán los métodos y herramientas necesarios para la validación de
tablas de datos.
3.1. Encabezados
Esta tipología de celdas son las que informan de la estructura general de la tabla,
categorizando la información de los datos en su misma fila o columna. Por ello, se deben
identificar adecuadamente para facilitar la comprensión de la información que se presenta
en la tabla de datos.
Para comprobar la accesibilidad de estos elementos se debe comprobar que:
•
Se identifican adecuadamente los encabezados de fila y columna mediante el
elemento TH.
•
Se asocian debidamente con sus celdas de datos mediante los atributos scope o id
y headers.
3.1.1.
Identificación de encabezados
No identificar los encabezados dificulta la comprensión de los datos de la tabla. Esto es
debido a que se pierde la información de relación y estructuración de cada celda de datos de
la tabla.
Las barras de herramientas usadas para la evaluación manual (barra de herramientas Web
Accessibility Toolbar de Internet Explorer, Web Developer Toolbar y Firefox Accessibility
Extension de Mozilla Firefox) contienen opciones para detectar las celdas de encabezados.
URL de Descarga Web Accessibility Toolbar:
http://www.visionaustralia.org.au/info.aspx?page=614
URL de Descarga Web Developer Toolbar:
https://addons.mozilla.org/en-US/firefox/addon/60
URL de Descarga Firefox Accessibility Extension:
https://addons.mozilla.org/es-ES/firefox/addon/1891
Así, en la barra de herramientas Web Accessibility Toolbar, se pueden mostrar las celdas de
encabezados con la opción Structure – Show Table Headers.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
7
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 1.Mostrar Encabezados de Tablas en Web Accessibility Toolbar
Si no existen encabezados en las tablas de datos de la página Web a comprobar, se
mostrará un mensaje de alerta advirtiendo de tal hecho.
Figura 2. Mensaje de alerta sobre tablas de datos sin encabezados en Web Accessibility
Toolbar
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
8
Instituto Nacional
de Tecnologías
de la Comunicación
De forma similar, la barra de herramientas Web Developer Toolbar permite resaltar las
celdas de una tabla de datos Outline - Outline Tables – Table Cells.
Figura 3. Resaltar celdas en las tablas de datos en Web Developer Toolbar
La opción Outline > Show Element Names When Outlining muestra el nombre de los
elementos resaltados, permitiendo detectar con mayor facilidad las celdas de encabezado.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
9
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 4.Ejemplo de encabezados resaltados en las tablas de datos
También se puede emplear con el mismo fin la barra de herramientas Firefox Accessibility
Extension mediante la opción Navigation – Data Tables.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
10
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 5. Opción de visualización de información de las tablas de Datos en Firefox
Accessibility Extension
Esta opción abre un cuadro de diálogo que permite recorrer las tablas del documento y sus
celdas para ver sus características.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
11
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 6. Información de tipo de celda en Firefox Accessibility Extension
Método abreviado de los encabezados
Cuando el texto del encabezado es demasiado extenso se debe emplear el atributo abbr del
elemento TH. De este modo los agentes de usuario visuales mostrarán el texto completo, sin
embargo los agentes no visuales emplearán el método abreviado para verbalizar los
encabezados relacionados con cada celda de datos. Así se logra simplificar el acceso a los
contenidos a los usuarios que accedan de ese modo.
Ejemplo de código:
[…]
<tr>
<td></td>
<th abbr="oro" scope="col">Medallas de oro</th>
<th abbr="plata" scope="col">Medallas de plata</th>
<th abbr="bronce" scope="col">Medallas de bronce</th>
</tr>
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
12
Instituto Nacional
de Tecnologías
de la Comunicación
[…]
Para comprobar la existencia y corrección de estos atributos se pueden mostrar empleando
la barra de herramientas Web Developer Toolbar, seleccionando la opción Information –
Display Table Information.
Figura 7. Mostrar Información de la Tabla en Web Developer Toolbar
Mediante dicha opción se muestran los valores del atributo abbr en los encabezados de la
tabla que los posea.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
13
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 8. Información de una tabla de datos con métodos abreviados.
3.1.2.
Asociación de encabezados
Las celdas de encabezado categorizan la información que se muestra en las celdas de
datos de su misma fila o columna. Para transmitir esta relación se deben emplear
mecanismos que permiten asociar lógicamente los encabezados a las celdas de datos de la
tabla.
La transmisión de dicha asociación se puede transmitir mediante distintos mecanismos:
scope o id y headers.
Asociación mediante el atributo scope
Un método para llevar a cabo la asociación entre las celdas de una tabla es por medio del
atributo scope. Este atributo se emplea en los encabezados e indica el ámbito de dicho
encabezado, ya sea fila, columna o un grupo de filas o columnas.
Las tablas sencillas que posean un único nivel de encabezados, es decir, una única columna
o una única fila de los mismos pueden asociarse empleando únicamente este atributo.
Ejemplo de código:
[…]
<tr>
<td></td>
<th scope="col">Medallas de oro</th>
<th scope="col">Medallas de plata</th>
<th scope="col">Medallas de bronce</th>
</tr>
[…]
Para comprobar la asociación mediante este atributo se puede emplear la barra de
herramientas Web Accessibility Toolbar, seleccionando la opción Structure – Simple Data
Table.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
14
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 9. Estructura de Tabla de Datos Simple en Web Accessibility Toolbar
A través de esta opción se muestra la información de asociación de las celdas de la tabla.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
15
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 10. Estructura de la Tabla de Datos con atributo scope
De forma análoga se puede emplear la barra de herramientas Web Developer Toolbar,
seleccionando la opción Information – Display Table Information.
Mediante dicha opción se muestra la información de asociación de la tabla en los
encabezados mediante el atributo scope.
Figura 11. Tabla de datos mostrando la información del atributo scope.
De forma similar se puede obtener esta información mediante la barra de herramientas
Firefox Accessibility Extension mediante la opción Navigation – Data Tables.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
16
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 12. Información de asociación de encabezados en Firefox Accessibility Extension
Asociación mediante los atributos id y headers
Otro método de asociación consiste en emplear los atributos id y headers. Esta asociación
consiste en identificar cada celda de encabezado mediante el atributo id y posteriormente
indicar en cada celda de datos los identificadores de los encabezados relacionados
mediante el atributo headers.
Las tablas de datos complejas, es decir, aquellas que posean más de una única fila o
columna de celdas de encabezamiento, deben emplear este mecanismo para asociar sus
celdas de datos con sus respectivos encabezados.
Ejemplo de código:
[…]
<tr>
<td></td>
<th id="header1">Comidas</th>
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
17
Instituto Nacional
de Tecnologías
de la Comunicación
<th id="header2">Hotel</th>
<th id="header3">Transportes</th>
</tr>
<tr>
<th id="header4">San Jose</th>
<td colspan="3"></td>
</tr>
<tr>
<th
<td
<td
<td
headers="header4" id="header5">25-ago-97</th>
headers="header4 header5 header1">37,74</td>
headers="header4 header5 header2">112,00</td>
headers="header4 header5 header3">45,00</td>
</tr>
[…]
Para comprobar esta asociación se puede emplear la barra de herramientas Web
Accessibility Toolbar, seleccionando la opción Structure – Complex Data Table.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
18
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 13. Estructura de Tabla de Datos Compleja en Web Accessibility Toolbar
Esta opción muestra la información de asociación de las celdas de encabezado (atributo id)
y celdas de datos (atributo headers).
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
19
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 14. Estructura de la Tabla de Datos con los atributos id y headers
En la imagen anterior puede comprobarse como existen encabezados marcados pero no
está identificado de forma correcta la asociación de los mismos: faltan los atributos scope
y/o headers en las tablas.
De forma análoga se puede utilizar la barra de herramientas Web Developer Toolbar,
seleccionando la opción Information – Display Table Information.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
20
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 15. Tabla de datos mostrando la información de los atributos headers
De forma similar se puede obtener esta información mediante la barra de herramientas
Firefox Accessibility Extension mediante la opción Navigation – Data Tables.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
21
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 16. Información de asociación de encabezados en Firefox Accessibility Extension
3.2. Resúmenes
Las tablas de datos pueden proporcionar una gran cantidad de información. Por ello se debe
aportar una descripción de los contenidos de las mismas que informe al usuario de los datos
que se presentan.
La comprobación de la existencia y adecuación de estos resúmenes depende del tipo de
tabla:
•
Tablas de datos simples: precisan de un resumen o un título, cualquiera de los dos,
introducidos mediante el atributo summary del elemento TABLE o mediante el
elemento CAPTION respectivamente.
•
Tablas de datos complejas: es obligatorio el uso de un resumen y recomendable la
inclusión de un título que esté a disposición de todos los usuarios.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
22
Instituto Nacional
de Tecnologías
de la Comunicación
3.2.1.
Tablas sencillas
Las tablas sencillas son aquellas que únicamente poseen un nivel de encabezados, es decir,
una única fila o una única columna de celdas de encabezado.
Figura 17. Ejemplo de tabla de datos sencilla
En este tipo de tabla únicamente es necesaria la existencia de un título descriptivo para la
tabla o un resumen adecuado, uno de los dos es suficiente. El título se debe incluir mediante
el elemento CAPTION y el resumen empleando el atributo summary del elemento TABLE.
Para comprobar la existencia de título y el resumen se puede emplear la barra de
herramientas Web Accessibility Toolbar, seleccionando la opción Structure – Simple Data
Table.
Figura 18. Tabla de datos sencilla mostrando el título y el resumen de la misma.
De forma análoga se puede utilizar la barra de herramientas Web Developer Toolbar para
ver el título de la tabla, seleccionando la opción Outline –Outline Tables – Table Captions.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
23
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 19. Resaltar título de la tabla en Web Developer Toolbar.
Está opción resalta únicamente el elemento CAPTION de la tabla de datos.
Figura 20. Tabla de datos sencilla mostrando el título de la misma.
Además la opción Information – Display Table Information muestra el resumen (atributo
summary).
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
24
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 21. Tabla de datos sencilla mostrando el resumen de la misma.
Esta información también se puede obtener mediante la barra de herramientas Firefox
Accessibility Extension mediante la opción Navigation – Data Tables.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
25
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 22. Información de título y resumen de las tablas de datos en Firefox Accessibility
Extension
3.2.2.
Tablas complejas
Las tablas complejas son aquellas que poseen más de un nivel de encabezados, es decir,
una fila y una columna o varias filas y/o columnas de celdas de encabezado.
Figura 23. Ejemplo de tabla de datos compleja
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
26
Instituto Nacional
de Tecnologías
de la Comunicación
En este tipo de tabla es necesaria la existencia de un resumen descriptivo de la información
contenida en la tabla, y además, es muy recomendable la existencia de un resumen de los
datos que contiene.
Ejemplo de código:
<table summary="Medallero Olímpico de EEUU, Rusia y China">
<caption>Medallero Olímpico</caption>
[…]
Para comprobar la existencia de título se puede emplear la barra de herramientas Web
Accessibility Toolbar, seleccionando la opción Structure – Simple Data Table.
Figura 24. Tabla de datos compleja mostrando el título y el resumen de la misma.
De forma análoga se puede utilizar la barra de herramientas Web Developer Toolbar,
seleccionando la opción Outline – Outline Tables – Table Captions para mostrar el título de
la tabla (elemento CAPTION) y la opción Information – Display Table Information para mostrar
el resumen (atributo summary).
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
27
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 25. Tabla de datos compleja mostrando el título y el resumen de la misma.
Al igual que para tablas sencillas esta información también se puede obtener mediante la
barra de herramientas Firefox Accessibility Extension mediante la opción Navigation – Data
Tables.
3.3. Agrupación de Información
Las múltiples celdas que conforman una tabla de datos deben estar agrupadas debidamente
teniendo en cuenta la estructura general de la tabla y su funcionalidad. De ese modo se
deben tener en cuenta grupos estructurales como la cabecera, el cuerpo y el pie de la tabla
(THEAD, TBODY y TFOOT respectivamente), la unión de filas y columnas por medio de los
atributos rowspan y colspan y los ejes de categorías por medio del atributo axis.
La agrupación de información se puede realizar de diferentes formas:
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
28
Instituto Nacional
de Tecnologías
de la Comunicación
•
Grupos estructurales
•
Unión de filas y columnas
•
Categorización:
3.3.1.
o
De columnas
o
Por ejes
Grupos estructurales
Las celdas de una tabla de datos se pueden agrupar en tres bloques estructurales: THEAD,
TFOOT y TBODY.
El elemento THEAD se emplea para agrupar las celdas de encabezamiento superiores. Por
otra parte, el elemento TFOOT reúne las celdas que se ubican al pie de la tabla. Por último el
elemento TBODY agrupa las celdas del contenido de la tabla.
Ejemplo de código:
<table>
<thead>
<tr>
<th>Lugar</th>
[…]
</tr>
</thead>
<tfoot>
<tr>
[…]
</tr>
</tfoot>
<tbody>
<tr>
<td>León</td>
[…]
</tr>
[…]
</tbody>
</table>
Para estructurar adecuadamente una tabla de datos que posee estos apartados deben
identificarse cada uno de ellos en el orden correcto en el código fuente. El elemento THEAD
debe aparecer en primer lugar, seguido del TFOOT (si existe) y por último el elemento TBODY.
Para comprobar los bloques identificados mediante estos grupos estructurales se puede
emplear la barra de herramientas Web Developer Toolbar, seleccionando la opción Outline –
Outline Custom Elements… .
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
29
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 26. Resaltar elementos personalizados.
Figura 27. Selección de elementos a resaltar.
Esta opción resalta los elementos indicados (THEAD, TBODY y TFOOT).
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
30
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 28. Tabla de datos mostrando los diferentes grupos estructurales.
3.3.2.
Unión de filas y columnas
Las tablas de datos pueden contener celdas que hagan estén relacionadas con más de una
fila y/o columna contiguas. Cuando esto ocurre se emplean los atributos colspan y rowspan
de los elemento TH y TD para indicar que dicha celda ocupa varias columnas o filas
respectivamente.
Figura 29. Tabla de datos con los atributos rowspan y colspan
Para comprobar el uso de estos atributos se debe analizar directamente el código fuente de
forma manual.
Ejemplo de código:
[…]
<thead>
<tr>
<th
<th
</tr>
<tr>
<th
<th
<th
</tr>
</thead>
[…]
scope="col" rowspan="2">Países</th>
colspan="3">Tipos de medalla</th>
scope="col">Medallas de oro</th>
scope="col">Medallas de plata</th>
scope="col">Medallas de bronce</th>
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
31
Instituto Nacional
de Tecnologías
de la Comunicación
3.3.3.
Categorización
Las celdas de las tablas de datos se pueden agrupar según las categorías a las que hagan
referencia. Esta categorización se puede realizar por columnas o por ejes.
Categorización de columnas
Algunas tablas de datos poseen múltiples columnas que hacen referencia a una misma
temática. Estas columnas se pueden agrupar y de ese modo categorizarlas.
Para realizar esta categorización se utilizan los elementos COLGROUP y COL. Estos han de
incluirse antes del conjunto de celdas de encabezado y de datos de la tabla. Cada elemento
COLGROUP indica un grupo de una o varias columnas asociadas. En caso de ser varias
columnas, en su interior se indicarán tantos elementos COL como columnas estén asociadas,
o bien se empleará el atributo span con el número de columnas.
Ejemplo de código:
<table border="1" summary="Páginas de códigos soportadas por las
diferentes versiones de MS Windows.">
<caption>Páginas de Códigos Soportadas por Microsoft
Windows</caption>
<colgroup />
<colgroup />
<colgroup>
<col />
<col />
</colgroup>
<colgroup span="3"/>
<thead>
[…]
</table>
El código anterior crea dos grupos iniciales de una sola columna, seguido de un grupo
formado por dos columnas y termina asociando las tres últimas en un cuarto grupo.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
32
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 30. Tabla con columnas agrupadas por categorías.
Categorización por ejes
Asimismo las celdas de datos se pueden categorizar empleando ejes. Para ello se debe
utilizar en cada celda de datos que se desee categorizar el atributo axis.
Todas las celdas que posean el mismo valor en dicho atributo pertenecerán al mismo eje, es
decir, tendrán la misma categoría.
Para comprobar las celdas que pertenecen a un mismo eje se puede emplear la barra de
herramientas Web Developer Toolbar, seleccionando la opción Information – Display Table
Information.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
33
Instituto Nacional
de Tecnologías
de la Comunicación
Figura 31. Tabla de datos con ejes de categorías
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
34
Instituto Nacional
de Tecnologías
de la Comunicación
4.
CONCLUSIONES
Para comprobar la accesibilidad del contenido Web basado en tablas de datos se han de
seguir las siguientes pautas generales:
•
Comprobar que la identificación de encabezados es adecuada.
•
Revisar los métodos abreviados de los encabezados.
•
Comprobar que la asociación entre celdas de encabezado y celdas de datos es
adecuada.
•
Verificar la información de resumen que se incluye en la tabla en función de la
complejidad de la misma.
•
Comprobar que los grupos estructurales de la tabla están debidamente
identificados.
•
Verificar que los datos relacionados están agrupados adecuadamente por categorías.
Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS
Centro de Referencia en Accesibilidad y Estándares Web
35