En curso lleva a: Índice estamos en: Pauta 9

En curso...

Imagen

Comunicación

Diseño

Accesibilidad

Nuevas Tecnologías

 

Aplicando las pautas

9.- Tablas Asegúrese que se puedan leer línea a línea. Resuma.

 

El principio básico es que no deben utilizarse las tablas para maquetar la página, es decir, para disponer los elementos que la constituyen (texto, gráficos, etc.) de una determinada manera, a menos que cuando se lea la página línea a línea tenga sentido; las tablas deben usarse para disponer datos que de otra manera se harían difíciles de interpretar. Para maquetar la página deben utilizarse las hojas de estilos en cascada (CSS). Pero el uso inadecuado de las tablas es muy común, ya sea porque el Webmaster no sabe o puede utilizar los estilos en cascada, ya porque desea forzar la presentación de la página pues no todos los navegadores soportan las CSS ni las interpretan de la misma manera.

La barrera que crean las tablas se debe a que los lectores de pantalla leen línea a línea y cuando la información contenida en una celda ocupa más de una línea la confusión puede llegar a ser total (veasé el ejemplo de malas prácticas), a menos que se sigan las pautas de accesibilidad indicando el tipo de elemento que contiene la celda y su relación con otros elementos (veasé el ejemplo de buenas prácticas).

 

Procedimiento para aplicar esta pauta.

Desde Frontpage: En desarrollo.

En HotMetal: En desarrollo.

En HomeSite:

En Dreamwever: En desarrollo.

En Amaya: En desarrollo.

 

Buenas prácticas

Las buenas prácticas consisten en declarar los encabezados de la tabla y utilizar abreviaturas para simplificar su comprensión para aquellos que utilizan sintetizadores de voz o lectores de pantalla.

Ejemplo de uso de tablas:

Tarifas de consulta
CANTIDAD España Extranjero
Hasta 50 referencias 1.000 Pesetas $10 Dólares U.S.A.
A partir de 51 referencias 100 Pesetas c/u $1 Dólar U.S.A. c/u

El código de este ejemplo es:

<table width="80%" border="1" cellspacing="0" cellpadding="4" align="center"
bordercolor="#0000FF" bordercolorlight="#00FFFF" bordercolordark="#000080"
summary="La tabla contiene las tarifas de consulta tanto para España como para el extranjero, dependiendo del número de referencias solicitado.">
<caption align="bottom"><span class="cap">Tarifas de consulta</span></caption>
<TR>
<TH Id="t1" bgcolor="#004080" abbr="Cant"><b class="blank">CANTIDAD</b></TH>
<TH Id="t2" bgcolor="#004080" abbr="Es"><b class="blank">España</b></TH>
<TH Id="t3" bgcolor="#004080" abbr="Ex"><b class="blank">Extranjero</b></TH>
</TR>
<TR>
<TD HEADERS="t1" bgcolor="#004080">
<B class="blank">
Hasta 50 referencias </B>
</TD>
<TD HEADERS="t2">
1.000 Pesetas </TD>
<TD HEADERS="t3">
$10 Dólares <acronym title="Americanos">U.S.A.</acronym>
</TD>
</TR>
<TR>
<TD HEADERS="t1" bgcolor="#004080">
<B class="blank">
A partir de 51 referencias </B>
</TD>
<TD HEADERS="t2">
100 Pesetas <abbr title="cada una">c/u</abbr>
</TD>
<TD HEADERS="t3">
$1 Dólar <acronym title="Americano">U.S.A.</acronym> <abbr title="cada una">c/u</abbr>
</TD>
</TR>
</TABLE>

Notese que se ha utilizado el elemento <caption> para subtitular la tabla, pero este elemento puede usarse para incluir una explicación más extensa sobre el contenido. Se utiliza el atributo "summary" para resumir el contenido de la tabla. Se han definido los encabezados y se relacionan convenientemente cada una de las celdas con el encabezado correspondiente.

La tabla se verá y leerá de la siguiente manera cuando se use un lector de pantalla o un navegador que lee línea a línea la tabla:

CANTIDAD España Extranjero
Hasta 50 referencias 1.000 Pesetas $10 Dólares U.S.A.
A partir de 51 referencias 100 Pesetas c/u $1 Dólar U.S.A. c/u

Fin del ejemplo

Malas prácticas

Las malas prácticas consisten en no utilizar el atributo "summary" ni el elemento <caption>, ni indicar los encabezados y abreviarlos cuando son largos.

Ejemplo:

CANTIDAD España Extranjero
Hasta 50 referencias 1.000 Pesetas ó 6€. $10 Dólares U.S.A. ó 6€
A partir de 51 referencias 100 Pesetas ó 0,60€ c/u $1 Dólar U.S.A. ó 0,60€ c/u

Fin del ejemplo

El código de este ejemplo es:


<table width="80%" border="1" cellspacing="0" cellpadding="4" align="center"
bordercolor="#0000FF" bordercolorlight="#00FFFF" bordercolordark="#000080">
<TR>
<TD bgcolor="#004080"><b class="blank">CANTIDAD</b></TD>
<TD bgcolor="#004080"><b class="blank">España</b></TD>
<TD bgcolor="#004080"><b class="blank">Extranjero</b></TD>
</TR>
<TR>
<TD bgcolor="#004080">
<B class="blank">
Hasta 50 referencias </B>
</TD>
<TD>
1.000 Pesetas </TD>
<TD>
$10 Dólares <acronym title="Americanos">U.S.A.</acronym>
</TD>
</TR>
<TR>
<TD bgcolor="#004080">
<B class="blank">
A partir de 51 referencias </B>
</TD>
<TD>
100 Pesetas <abbr title="cada una">c/u</abbr>
</TD>
<TD>
$1 Dólar <acronym title="Americano">U.S.A.</acronym> <abbr title="cada una">c/u</abbr>
</TD>
</TR>
</TABLE>

Esta tabla, aunque aparentemente igual a la anterior, carece del resumen de su contenido y de los identificadores de encabezados. Tampoco se ha subtitulado. Se verá representada y será leída de la siguiente manera por los lectores de pantalla:

CANTIDAD ESPAÑA EXTRANJERO
Hasta 50 1.000 pesetas $10 Dólares
referencias ó 6 € U.S.A. ó 6€
A partir de 51 100 pesetas ó $1 Dólar U.S.A. ó
referencias 0,60€ c/u 0,60€ c/u

Fin del ejemplo

Para verificar el trabajo

A-Prompt revisa y facilita la creación de encabezados y abreviaturas de encabezados, así como el resumen y subtítulo de la tabla. Bobby analiza y aconseja sobre los elementos que pueden faltar en una tabla. Para ver la página como se vería en un lector de pantalla o sin discargarse las imágenes, es útil el servicio Lynxme

Anterior Flecha que apunta hacia la izquierda. Índice Flecha que apunta a la derecha. Siguiente

Para hacer sus aportaciones, comentarios o sugerencias, envíe un mensaje a la autora: Emmanuelle Gutiérrez y Restrepo


Creada: 15 de diciembre de 2000