Bon ús de les taules
Maquetació de pàgines web
L'ús de les taules ha de limitar-se a la presentació de dades. L'ús de les taules com mecanisme de maquetació està desaconsellat i existeixen altres mètodes de posicionament CSS per a aquesta missió, que aconseguirà que el nostre web s'adapti a qualsevol mena de dispositiu, com ara els mòbils, des dels quals cada vegada naveguen més usuaris.
En el cas de Genweb la maquetació s'ha de fer amb les plantilles que oferim, que funcionen sobre el Framework Bootstrap i la seva funcionalitat grid, que ens permet crear una graella de fins a 12 elements que es recol·loquen automàticament, de manera que sempre visualitzem correctament els continguts, independentment de la mida de la pantalla. És el que s'anomena Responsive Design.
Les plantilles que ens creen aquesta graella són:
- Columnes 2
- Columnes 3
- Columnes 4
- Columnes 2/3 vs 1/3
- Columnes 3/4 vs 1/4
Criteri de l'estàndard WCAG 2.1 relacionat:
Recursos:
Etiquetatge de les taules de dades
Pel que fa a l'ús de les taules per presentar dades, si no estan ben estructurades (per exemple, sense encapçalats) dificulten la lectura a usuaris que no poden visualitzar la informació de forma global.
Utilitzeu la taula més senzilla possible: una taula senzilla només té una fila de capçalera i/o una columna de capçalera a la taula. Una capçalera especifica el tipus d'informació de la fila/columna. No hi ha cel·les combinades dins d'una taula simple. Pot ser preferible fer servir més d'una taula simple, en lloc d'utilitzar una taula complexa.
El primer pas per crear una taula de dades accessible és definir les capçaleres de fila i columna. L'etiqueta <td> s'utilitza per a les cel·les de dades de la taula i l'etiqueta <th> per a les cel·les de capçalera de la taula. Utilitzant l'adequat les etiquetes per indicar el propòsit i el significat de les cel·les de la vostra taula, facilitarà a les tecnologies d'assistència la transmissió d'aquesta informació a l'usuari.
Una vegada hem creat les capçaleres, hem d'associar les cel·les de dades amb les capçaleres corresponents. Hi ha dues maneres de fer-ho:
- Amb l'atribut scope: aquest atribut indica al navegador i al lector de pantalla que tot el que hi ha sota la columna està relacionat amb la capçalera de la part superior, i tot el que hi ha a la dreta de la capçalera de la fila està relacionat amb aquesta capçalera. Especificant els atributs "col" o "row" a més de l'atribut "scope", lliguem aquesta columna o fila a la capçalera correcta. Un lector de pantalla ara té les instruccions que necessita per presentar la taula correctament.
- Una altra manera d'aconseguir-ho és utilitzar les capçaleres i atributs d'identificació. Aquest mètode no es recomana per taules senzilles, però pot ser útil en taules complexes. D'acord amb WCAG, això permet als lectors de pantalla pronunciar les capçaleres associades a cada cel·la de dades quan les relacions són massa complexes per ser identificades només amb l'element “th”, o l'element "th" amb l'atribut "scope". Les capçaleres i el mètode d'identificació només s'ha d'utilitzar quan hi ha cel·les fusionades connectades a més d'una fila o una capçalera de columna.
A més les taules haurien de tenir algun tipus d'etiqueta identificativa, sigui un títol o un subtítol. Per indicar-ho farem servir l'etiqueta HTML <caption>
Exemple de taula senzilla etiquetada amb els corresponents atributs "scope", "col" i "row":
Codi:
<table class="table"><caption><strong>Estalvis pel viatge d'estiu</strong></caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Anna</th>
<th scope="col">Clara</th>
<th scope="col">Laia</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Gener</th>
<td>200</td>
<td>100</td>
<td>400</td>
</tr>
<tr>
<th scope="row">Febrer</th>
<td>300</td>
<td>200</td>
<td>100</td>
</tr>
</tbody>
</table>
Visualització:
| Anna | Clara | Laia | |
|---|---|---|---|
| Gener | 200 | 100 | 400 |
| Febrer | 300 | 200 | 100 |
Com crear taules de dades accessibles a Genweb
Només cal fer servir les plantilles predefinides, que ja incorporen els atributs corresponents, una vegada afegida la plantilla la modificarem amb els botons de l'editor Tiny:
Comparteix: