<hier>WEBLOG</hier>

Lundi 24 août 2009 | link |

Site à calques^* ! (à la bonne soupe de div)

On lui dit : Ne fais pas de tableaux, c'est mal. Fais des div.

Donc il rentre chez lui, il prend tous ses td, tous ses tr, tous ses table, et il fait : div, div, div.

Il n'a pas réglé le problème, mais au moins il a fait plaisir au mec de l'accessibilité.
Mais c'est inutilisable.

Je suis régulièrement effrayée, agacée et désolée, de voir le nombre d'apprentis webmestres (ou plus qualifiés), qui appliquent ce précepte à la lettre, sans bien savoir pourquoi d'ailleurs...

Ça donne des codes du genre :

<div id="titre">
Bienvenue sur mon site
</div>

<div id="contenu">
 <div id="bonjour">
  Bonjour cher visiteur.
 </div>
 <div id="blabla">
 Merci de passer me voir.
 </div>
</div>

<div id="footer">
© Mon site à moi que j'ai.
</div>

Tout le code n'est qu'une succession de div, sans rien d'autre. Il y en a même qui poussent la virtuosité à simuler de vrais tableaux de données avec une succession de div class="table", div class="tr", div class="td" !

A croire que le langage html se réduit à la seule et unique balise div...

En quelques années, on est passé de la soupe de tags à la soupe de div.

Photo de Thanh - ParisWeb 2006

Et la sémantique, bordel ?!

Pour rappel, donc, la mise en forme d'un texte possède tout un tas de balises spécifiques porteuses de sens.

• Pour des titres de section, les balises ad hoc sont <h1></h1> ; <h2></h2>, <h3></h3> etc. ;
• Pour un paragraphe, c'est <p></p> ;
• Pour une liste à puces, c'est <ul></ul> ;
• Pour une liste numérotée, c'est <ol></ol> ;
• Pour un bloc de citations, c'est <blockquote></blockquote> ;
• ...

Avec toutes ces balises, on structure le texte correctement. C'est important, par exemple, pour les robots des moteurs de recherche qui indexent les pages et qui comprennent le sens de ces balises. Mais c'est aussi (et surtout) important pour tous les internautes qui n'utilisent pas d'interface graphique pour lire les pages. Les navigateurs textuels, les lecteurs d'écran utilisés par les mal voyants, ne restituent pas correctement un texte qui n'est pas balisé de façon convenable.
C'est un peu comme si vous lisiez un texte sans ponctuation.

Tenez, amusez-vous donc à relire ce dernier paragraphe dépourvu de toute ponctuation :

avec toutes ces balises on structure le texte correctement c'est important pour les robots des moteurs de recherche qui indexent les pages et qui comprennent le sens de ces balises mais c'est aussi et surtout important pour tous les internautes qui n'utilisent pas d'interface graphique pour lire les pages les navigateurs textuels les lecteurs d'écran qu'utilisent les mal voyants ne restituent pas correctement un texte qui n'est pas balisé de façon convenable c'est un peu comme si vous lisiez un texte sans ponctuation

Vous avez tenu jusqu'au bout ? Sans reprendre votre respiration ? Sans revenir en arrière pour retrouver le fil d'une idée  ?
Si oui, vous êtes très fort... Mais ce paragraphe ne fait que quelques lignes. Sur toute une page web, ce serait sûrement une autre histoire !

Ayez la bonne vision : devenez aveugle !

Lorsqu'on rédige une page web, on oublie dans un premier temps la CSS. On imagine qu'on est aveugle et qu'on "voit" sa page à l'aide d'une synthèse vocale.

Pour vous donner une idée, je vous invite à regarder, ou plus exactement à écouter, le début que la conférence "Accessibilité, des volontaires ?", donnée par Stéphane Deschamps et Aurélien Levy lors de ParisWeb 2008. Elle débute en effet par la démonstration de ce que donne la lecture d'une page web par ces interfaces (et si vous avez le temps, regardez la conférence en entier, c'est un régal).

Une bonne page web est une page qui est facilement lisible sans aucun attribut de style. Une page où les titres sont des titres, où les paragraphes sont des paragraphes, où les tableaux de données sont des tableaux de données !

Ce n'est que quand tout cela est fait que l'on rajoute ses div pour positionner ses blocs et mettre en oeuvre le graphisme, même si celui-ci a été pensé en amont.

J'en profite aussi pour vous rappeler que l'édition ParisWeb 2009, cycle de conférences dédié aux bonnes pratiques du web, c'est dans un peu plus d'un mois.

J'y serai. Et vous ?

^*Terme incorrect, mais "site à bloc", c'était moins joli ;-) - Remonter -

| Laisser un commentaire |

| Index | Avant | Archives |

---