Ir directamente al contenido de esta página

codexexempla.org

Tablas accesibles

Tabla de contenidos

  1. Introducción
  2. Una tabla simple
  3. Una tabla compleja
  4. Una tabla más compleja

Introducción

La introducción a la pauta 5 de las WCAG 1.0 (Create tables that transform gracefully) (inglés), comienza con la siguiente afirmación:

Tables should be used to mark up truly tabular information («data tables»). Content developers should avoid using them to lay out pages («layout tables»).

[Las tablas deben emplearse para marcar auténtica información tabular («tablas de datos»). Los desarrolladores de contenidos deberían evitar emplearlas para maquetar páginas («tablas de presentación»).]

Hay dos cosas sobre las que nunca discuto: una, que Deborah Kara Unger (inglés) es la mujer más hermosa del mundo; dos, que las tablas no se deben emplear para maquetar. Pero esto no quiere decir que deban ser desterradas de las páginas web, sino que, como todos los elementos, deben emplearse para el fin para el que fueron creadas, es decir, presentar datos organizados sobre las relaciones que se establecen entre ellos.

Desde el punto de vista de la accesibilidad, las tablas de datos cuentan con una serie de exigencias debidas, principalmente, a que muchas de las discapacidades en relación con la red son visuales.

Los usuarios ciegos acceden a las páginas a través de lectores de pantalla —un tipo de aplicación que sintetiza una voz que va leyendo el documento— o a través de una interfaz braille —una consola con cilindros móviles que sobresalen o se ocultan para formar el alfabeto, en dirección derecha-izquierda como un teletipo—. En ambos casos, lo que el usuario obtiene es una lectura lineal de los contenidos: las celdas se leen en el orden de lectura del idioma del documento —izquierda-derecha o derecha-izquierda—, y de arriba abajo. Es decir, el usuario escucharía las celdas de la primera fila, después las de la segunda, después la de la tercera y así sucesivamente.

La principal desventaja de esta lectura es que, por lo general, los encabezados de las celdas que dan sentido a los contenidos suelen aparecer al comienzo de la tabla. El usuario de un lector ha podido escuchar los encabezados al comienzo de la lectura, pero es muy probable que unas pocas filas más abajo no recuerde qué encabezado correspondía a qué celda.

La solución está en vincular explícitamente cada celda con sus correspondiente encabezado, para que, en caso de necesidad, el usuario pueda escuchar o leer en braille los datos asociados.

Desde el punto de vista técnico, se trata de emplear los elementos y atributos apropiados para añadir contenido semántico a las tablas. Pero mejor que dar una lista, vamos a trabajar sobre unos cuantos ejemplos.

Una tabla simple

Primero, veamos lo que dicen las Pautas del W3C sobre el particular, en su punto 5.1 (inglés), de prioridad 1:

For data tables, identify row and column headers.

[Para tablas de datos, identifique los encabezados de fila y columna.]

Ahora, vamos a echar un ojo a una tabla generada con Dreamweaver 8:


    <table width="100%" border="0" cellspacing="0">
        <tr>
            <td colspan="2" class="Estilo2"><div align="center"><strong>Velocidad orbital media [kms/s]: Tierra y Venus</strong></div></td>
        </tr>
        <tr>
            <td class="Estilo3"><div align="center">Tierra</div></td>
            <td class="Estilo3"><div align="center">Venus</div></td>
        </tr>
        <tr>
            <td class="Estilo4">30,287</td>
            <td class="Estilo4">35,021</td>
        </tr>
    </table>
            

Los editores de código visuales son especialmente útiles a la hora de crear tablas, sobre todo cuando son complejas —veremos luego un caso duro de codificar «a mano»—, pero hay que mantener el código que generan bajo control.

Aunque el código de la tabla es casi válido —sólo presenta un error de validación de salida—, carece de elementos semánticos para los contenidos importantes.

Antes de continuar, me gustaría señalar un error común con respecto a las tablas, y el código de una página en general, y es que muchos desarrolladores que se «actualizan» a CSS creen que basta con presentar la tabla eliminando los atributos de presentación para que esta sea accesible. Craso error.

La misma tabla anterior, depurada y válida, podría ser así:


    <table>
        <tr>
            <td class="titulo" colspan="2">Velocidad orbital media [<abbr title="kilómetros por segundo">kms/s</abbr>]: Tierra y Venus</td>
        </tr>
        <tr>
            <td class="planeta">Tierra</td>
            <td class="planeta">Venus</td>
        </tr>
        <tr>
            <td>30,287</td>
            <td>35,021</td>
        </tr>
    </table>
            

Como se puede comprobar, la tabla ahora es válida, pero no hemos mejorado su accesibilidad lo más mínimo. Para ello, deberíamos marcarla de manera similar a ésta:


    <table summary="Comparativa de velocidades orbitales medias: la Tierra y Venus.">
        <caption>Velocidad orbital media [<abbr title="kilómetros por segundo">kms/s</abbr>]: Tierra y Venus</caption>
        <thead>
            <tr>
                <th>Tierra</th>
                <th>Venus</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>30,287</td>
                <td>35,021</td>
            </tr>
        </tbody>
    </table>
            

Lo que he hecho ha sido añadir contenido semántico:

Gracias a esto, el lector de pantalla no leerá «Velocidad orbital media [kms/s]: Tierra y Venus. Tierra Venus 30,287 35,021», sino «Velocidad orbital media [kms/s]: Tierra y Venus. Tierra 30,287 Venus 35,021». No parece una diferencia dramática, pero cuando se trara de diez filas y cinco columnas, puede ser la única manera de comprender su contenido.

Una tabla compleja

Como veíamos arriba en la pauta, se deben especificar los encabezados tanto de las filas como de las columnas. Esto se aplica a tablas de dos niveles de th. Al igual que antes, podemos tener una versión válida, y una además accesible:


    <table summary="Comparativa de datos: la Tierra y Venus.">
        <caption>Comparativa: Tierra y Venus</caption>
        <thead>
            <tr>
                <td></td>
                <th scope="col">Velocidad orbital media [<abbr title="kilómetros por segundo">kms/s</abbr>]</th>
                <th scope="col">Inclinación [<abbr title="grados">&deg;</abbr>]</th>
                <th scope="col">Número de satélites</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Tierra</th>
                <td>30,287</td>
                <td>23,45</td>
                <td>1</td>
            </tr>
            <tr>
                <th scope="row">Venus</th>
                <td>35,021</td>
                <td>2,64</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>
            

El proceso de hacer la tabla accesible es el mismo que antes, pero con un par de detalles añadidos:

Nuestra tabla de dos niveles ya está lista.

Una tabla más compleja

En general, sería bueno dividir las tablas más complejas en una serie de tablas simples, pero hay casos en los que no es posible. Así, podemos encontrarnos con tablas con encabezados y subencabezados, como la de este ejemplo.

Con respecto a estas tablas, lo que el punto 5.2 de las WCAG 1.0 nos dice es:

For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. [Priority 1]

For example, in HTML, use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the "axis", "scope", and "headers" attributes, to describe more complex relationships among data.

[Para tablas de datos que tengan dos o más niveles lógicos de encabezados de fila o columna, emplee el marcado para asociar las celdas de datos y las celdas de encabezados. (Prioridad 1)

Por ejemplo, en HTML, emplee thead, tfoot y tbody para agrupar filas, col y colgroup para agrupar columnas, y los atributos axis, scope y headers para describir las relaciones complejas entre datos.]

Bien, con estas indicaciones, podemos hacer accesible la tabla del ejemplo inmediatamente anterior:


    <table summary="Comparativa de datos: la Tierra y Venus.">
        <caption>Comparativa: Tierra y Venus</caption>
        <colgroup></colgroup>
        <colgroup><col /><col /></colgroup>
        <colgroup><col /><col /></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <thead>
            <tr>
                <td rowspan="2"></td>
                <th colspan="2" id="th_distancia">Distancia media al Sol</th>
                <th colspan="2" id="th_periodo">Periodo orbital [días]</th>
                <th rowspan="2" scope="col">Velocidad orbital media [<abbr title="kilómetros por segundo">kms/s</abbr>]</th>
                <th rowspan="2" scope="col">Inclinación [<abbr title="grados">&deg;</abbr>]</th>
                <th rowspan="2" scope="col">Número de satélites</th>
            </tr>
            <tr>
                <th abbr="unidades astronómicas" id="th_ua">UA</th>
                <th abbr="kilómetros" id="th_kms">Kms</th>
                <th id="th_sideral">Sideral</th>
                <th id="th_sinodico">Sinódico</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" id="th_tierra">Tierra</th>
                <td headers="th_tierra th_distancia th_ua">1</td>
                <td headers="th_tierra th_distancia th_kms">149.675.000</td>
                <td headers="th_tierra th_periodo th_sideral">365,256</td>
                <td headers="th_tierra th_periodo th_sinodico"><abbr title="no aplicable">n/a</abbr></td>
                <td>30,287</td>
                <td>23,45</td>
                <td>1</td>
            </tr>
            <tr>
                <th scope="row" id="th_venus">Venus</th>
                <td headers="th_venus th_distancia th_ua">0,72333199</td>
                <td headers="th_venus th_distancia th_kms">108.208.930</td>
                <td headers="th_venus th_periodo th_sideral">224,701</td>
                <td headers="th_venus th_periodo th_sinodico">583,92</td>
                <td>35,021</td>
                <td>2,64</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>
            

Como se ve, la complejidad del código aumenta proporcionalmente a la complejidad de la tabla:

Por último, sólo quiero indicar unos detalles:

Y, con esto, se cierra esta introducción a las tablas accesibles.

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2014 Mapa del sitio | XHTML | CSS | AA