Tablas.

"Realícelas de manera que se puedan leer línea a línea. Incluya un resumen. Evite el uso de tablas para dar formato a las páginas".

Declare los encabezados de la tabla y utilice abreviaturas y acrónimos para facilitar la navegación de los lectores de pantalla.

Incluya un resumen del contenido de la misma mediante el atributo "summary".

Verifique que se pueden leer con un navegador sólo-texto que no utilice tablas y las interpreta alineando el texto de las celdas.

No utilice las tablas para maquetar su página.

Ejemplo:

Una tabla accesible:

 

Asistentes al acto.

ASISTENTES	Profesionales	Usuarios
Mujeres	80 m/p	20 m/u
Hombres	70 h/p	26 h/u

Código:

<table width="80%" border="1" cellspacing="0" cellpadding="4" align="center" bordercolor="#0000FF" bordercolorlight="#00FFFF" bordercolordark="#000080" summary="Tabla de distribución de los asistentes al acto distribuidos por sexo (hombres, mujeres) y por relación con el mismo (profesionales asistentes).">

<caption align="bottom"><b>Asistentes al acto.</b></caption>

<TR>
<TH Id="t1" bgcolor="#309090" abbr="Asist"><b>ASISTENTES</b></TH>
<TH Id="t2" bgcolor="#309090" abbr="Prof"><b>Profesionales</b></TH>
<TH Id="t3" bgcolor="#309090" abbr="Usus"><b>Usuarios</b></TH>
</TR>

<TR>
<TD HEADERS="t1" bgcolor="#309090"><B >Mujeres</B></TD>
<TD HEADERS="t2">80 <abbr title="mujeres profesionales">m/p</abbr></TD>
<TD HEADERS="t3">20 <abbr title="mujeres usuarias">m/u</abbr></TD>
</TR>

<TR>
<TD HEADERS="t1" bgcolor="#309090"><B>Hombres </B></TD>
<TD HEADERS="t2">70 <abbr title="hombres profesionales">h/p</abbr></TD>
<TD HEADERS="t3">26 <abbr title="hombres usuarios">h/u</abbr></TD>
</TR>

</TABLE>

En un navegador que alinee la tabla, la información aparecerá así:

ASISTENTES Profesionales Usuarios
Mujeres 80 m/p 20 m/u
Hombres 70 h/p 26 h/u

Una tabla no accesible:

 

Asistentes al acto.

ASISTENTES	Profesionales	Usuarios
Mujeres	80 mujeres profesionales	20 mujeres usuarias
Hombres	70 hombres profesionales	26 hombres usuarios

Código:

<table width="40%" border="1" cellspacing="0" cellpadding="4" align="center" bordercolor="#0000FF" bordercolorlight="#00FFFF" bordercolordark="#000080">
<caption align="bottom"><b>Asistentes al acto.</b></caption>

<TR>
<TD bgcolor="#309090"><b>ASISTENTES</b></TH>
<TD bgcolor="#309090"><b>Profesionales</b></TH>
<TD bgcolor="#309090"><b>Usuarios</b></TH>
</TR>

<TR>
<TD bgcolor="#309090"><B>Mujeres</B></TD>
<TD>80 mujeres profesionales</TD>
<TD>20 mujeres usuarias</TD>
</TR>

<TR>
<TD bgcolor="#309090"><B>Hombres </B></TD>
<TD>70 hombres profesionales</TD>
<TD>26 hombres usuarios</TD>
</TR>

</TABLE>

En un navegador que alinee la tabla, la información aparecerá así:

ASISTENTES Profesionales Usuarios
Mujeres 80 mujeres 20 mujeres
Hombres profesionales usuarias
70 hombres 26 hombres
profesionales usuarios

- -