Guía Práctica de Comprobación de Accesibilidad: TABLAS DE DATOS

Transcripción

1 Guía Práctica de Comprobación de Accesibilidad: TABLAS DE DATOS Centro de Referencia en Accesibilidad y Estándares Web Diciembre 2008

2 Copyright 2008 Instituto Nacional 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 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 2

3 ÍNDICE 1. OBJETIVO DE LA GUÍA 4 2. RELACIÓN ENTRE DATOS 5 3. VALIDACIÓN DE TABLAS DE DATOS Encabezados Identificación de encabezados Asociación de encabezados Resúmenes Tablas sencillas Tablas complejas Agrupación de Información Grupos estructurales Unión de filas y columnas Categorización CONCLUSIONES 35 Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS 3

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

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

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

7 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 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 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: URL de Descarga Web Developer Toolbar: URL de Descarga Firefox Accessibility Extension: 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 7

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

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

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

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

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

13 [ ] 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 13

14 Figura 8. Información de una tabla de datos con métodos abreviados 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 14

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

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

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

18 </tr> <tr> </tr> <tr> </tr> [ ] <th id="header2">hotel</th> <th id="header3">transportes</th> <th id="header4">san Jose</th> <td colspan="3"></td> <th headers="header4" id="header5" >25-ago-97</th> <td headers="header4 header5 header1">37,74</td> <td headers="header4 header5 header2">112,00</td> <td headers="header4 header5 header3">45,00</td> 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 18

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

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

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

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

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

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

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

26 Figura 22. Información de título y resumen de las tablas de datos en Firefox Accessibility Extension 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 26

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

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

29 Grupos estructurales Unión de filas y columnas Categorización: 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 29

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

31 Figura 28. Tabla de datos mostrando los diferentes grupos estructurales 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 scope="col" rowspan="2">países</th> <th colspan="3">tipos de medalla</th> </tr> <tr> <th scope="col">medallas de oro</th> <th scope="col">medallas de plata</th> <th scope="col">medallas de bronce</th> </tr> </thead> [ ] Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS 31

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

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

34 Figura 31. Tabla de datos con ejes de categorías Guía Práctica de Comprobación de Accesibilidad TABLAS DE DATOS 34

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