Linéarisation de contenu

Les pages Web conçues un utilisant les tableaux HTML comme base de la mise en page ("table layout") posent de sérieux problèmes d'accessibilité car la logique de leur contenu est souvent mise à l'épreuve lors de la lecture "ligne par ligne".

Le problème

La distribution des contenus dans les cellules de(s) tableau(x) HTML peut aboutir à une lecture linéaire qui prive les phrases de la logique escomptée.

Illustrons le problème à l'aide d'un exemple.

Contenu non-linéarisé

Le tableau ci-dessous est simplissime : il n'a que 2 colonnes et 2 rangées. Pour mieux vous le visualiser, je fais exprès d'afficher les bords de ses cellules (les "vrais table layouts" sont des monstres d'imbrication de tableaux qui cachent leurs bords afin de ne pas gâcher l'effet visuel final).
La première colonne contient un message publicitaire, la deuxième colonne est sensée le renforcer par l'apposition d'une comparaison aux produits concurrents.

Dans un navigateur visuel qui, affichant le tableau entier, permet sa lecture non linéaire à l'écran, le message est lu conformément aux attentes, c'est-à-dire:

"Nous proposons des frigos super économiques",
"Les frigos de nos concurrents consomment beaucoup d'énergie".

Dans un navigateur non-visuel, qui interprète le code de pages Web "ligne par ligne", le message est lu de manière suivante:

"Nous proposons Les frigos de nos concurrents
des frigos super économiques consomment beaucoup d'énergie"

Comme vous pouvez le constater le message n'est plus le même... Pourtant, c'est bien ce message erroné que retiendraient les moteurs de recherche car leurs robots indexent les pages Web "ligne par ligne"...

Contenu linéarisé

Pour linéariser le tableau de notre exemple, il y a deux possibilités:

1) fusionner les cellules à l'intérieur de chaque colonne:

2) procéder à un chassé-croisé de contenu des cellules:

Dans les deux cas, le message sera alors lu correctement par tous les navigateurs.

Alternative : CSS layout

Toutefois ne perdons pas le cap ! La présence de ce tableau, est-elle vraiment justifiée ?

Voilà à quoi il correspond dans le code :


<table width="100%" cellpadding="5" border="1" summary="Exemple d'un tableau linéarisé">
<caption>Exemple 2 d'un tableau html avec le contenu linéarisé</caption>
<tbody>
<tr align="center">
<td width="50%">Nous proposons</td>
<td width="50%">des frigos super économiques</td>
</tr>
<tr align="center">
<td width="50%">Les frigos de nos concurrents</td>
<td width="50%">consomment beaucoup d'énergie</td>
</tr>
</tbody>
</table>


Nous pouvons obtenir la même chose en écrivant :


<div id="col1">Nous proposons<br />des frigos super économiques</div>
<div id="col2">Les frigos de nos concurrents<br />consomment beaucoup d'énergie</div>


...et définir la position de deux <div> à l'aide des id, dans une feuille de style.