Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

jueves, 1 de noviembre de 2007

Como diseñar una tabla accesible

Para quienes se hayan sensibilizado con la lectura de Por qué diseñar con tablas es estúpido? seguramente leerán diseño+tablas y se acomodarán con expectativa frente al monitor.
Pero la lectura deja en claro (o debe de dejar) que siempre y cuando se pretenda mostrar contenido tabulado el uso de las tablas en la Web es la opción.
Pero, asimismo, las tablas deberán ser accesibles. Y para que una tabla sea accesible debe tener un correcto marcado en HTML.
Desde accessify.com rescato Accesible Table Builder, una herramienta que en 4 pasos genera una tabla accesible.

This table builder was created by Struan King based on an earlier version of the tool that used to be on Accessify but whose source code got was lost during a transition from ASP to PHP. Struan kindlt rebuilt from scratch because he'd missed it (like an old friend!) for which we're truly grateful. Struan also took on board advice given by Roger Johansson in creating the tool (so thanks to that man too!). If you like this tool, why not see what else he's been up to?


Código generado por la aplicación:

<table class="tableStyle greyScheme"
summary="correcto marcado de una tabla">
<caption>Mi tabla accesible</caption>
<tbody>
<tr class="odd">
<th class="firstColumn" scope="row"></th>
<td>-</td>
<td>-</td>
</tr>
<tr class="even">
<th class="firstColumn" scope="row"></th>
<td>-</td>
<td>-</td>
</tr>
<tr class="odd">
<th class="firstColumn" scope="row"></th>
<td>-</td>
<td>-</td>
</tr>
<tr class="even">
<th class="firstColumn" scope="row"></th>
<td>-</td>
<td>-</td>
</tr>
<tr class="odd">
<th class="firstColumn" scope="row"></th>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>

Aunque no he podido generar las etiquetas:

<thead>-</thead>
<tfoot>-</tfoot>

Las cuales van inmediatamente antes de
<tbody>

Me parece aceptable el marcado conseguido.
Para mostrar la tabla mediante CSS, la herramienta genera también el código correspondiente.
Ahí va el tema Grey, que fue el que elegí:


/*
=Start table structure
*/
#Summary, #Caption {
width: 28em;
}

.tableStyle {
width: 90%;
margin: 1em 0 1em 5%;
border: solid #666;
border-width: 1px 0 0 1px;
border-collapse: collapse;
}

.tableStyle th, .tableStyle td {
border: solid 1px #666;
border-width: 0 1px 1px 0;
padding: 0.2em;
}
/*
=End table structure
*/

/*
=Start grey colour scheme
*/
.greyScheme, .greyScheme th, .greyScheme td {
border-color: #666;
}

.greyScheme .even {
background-color: #E3F6FE;
}

.greyScheme th, .greyScheme thead td {
background-color: #B1B1B1;
}

.greyScheme th.firstColumn {
background-color: #D1D1D1;
}
/*
=End grey colour scheme
*/

Para gustos los colores y los códigos ofrecidos son modificables y si nunca habías visto una tabla accesible es bueno que sepas que hay dos formas de hacer las cosas: como las has hecho siempre y por otro lado, como debieran hacerse.

:-)
Share:

Publicidad

Estadísticas

A cotidiano, me siguen