<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.

assiette de soupe de tags
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.

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 ?

Paris-web 2009 — 8–9–10 octobre — J’y serai !

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

Bonjour,

Voilà qui est très bien dit ! Juste regrettable qu'il soit encore et toujours nécessaire de la rappeler...

Quant à Paris-Web 2009, j'y serai ;-)

Amicalement,
Monique

Monique - 24-08-2009 - 20:26

Je ne sais pas qui c'est ce Stéphane Deschamps, mais il a l'air vraiment intéressant, comme mec, dis donc.

Stéphane Deschamps - 24-08-2009 - 21:01

@Monique : regrettable, oui, voire désespérant !

@s t e f : ouaip, mais il parle vite ! Un vrai bonheur de relever par écrit ce qu'il débite ;)

Pascale - 24-08-2009 - 21:04

@Stéphane Deschamps : C'est marrant, on m'a dit exactement l'inverse :).

@Pascale : Qui a provoqué ce coup de gueule qu'on le lapide :P ?

Neovov - 24-08-2009 - 22:21

@Neovov : :D S'il n'y en avait qu'un !! Mais c'est hélas un mal très répandu...

Pascale - 25-08-2009 - 09:27

ben paris web c'est sympa mais c'est trop cher.

jujuka - 25-08-2009 - 18:57

@jujuka : 130 euros pour la qualité des conférences, ce n'est pas cher comparé aux autres manifestations du même type... Mais il faut les sortir, c'est vrai.

En revanche les ateliers du samedi sont à 10 euros seulement !
Moins cher, on te paye pour venir !

Pascale - 25-08-2009 - 20:20

@jujuka : certes, c'est 130 euros, mais outre le fait que c'est beaucoup moins cher que toutes les manifestations de cette envergure, cet argent est utilisé notamment pour mettre toutes les vidéos des conférences en ligne.

Bref, paix et amour :)

Stéphane Deschamps - 28-08-2009 - 20:42

A propos de paix et d'amour, et pour en revenir au sujet initial du post, j'aime bien aussi les coups de gueule de Raphaël ;)
http://www.alsacreations.com/actu/lire/368-coup-de-gueule-arrtons-de-confondre-xhtml-et-css.html
http://www.alsacreations.com/actu/lire/353-coup-de-gueule-3-malefiques-tableaux.html

Pascale - 29-08-2009 - 11:50

Au fait : j'y suis !!!
http://twitpic.com/kt6kr

Pascale - 09-10-2009 - 10:22

Paris Web, j'y étais...
http://www.flickr.com/photos/sutekidane/3997928483/

Pascale - 11-10-2009 - 15:10

:-)

Bise.

Gaius - 21-10-2009 - 13:39

A toi aussi :)

Pascale - 21-10-2009 - 20:38

Me souvenant soudain des cours de français du secondaire, je réalise que la sémantique (donner du sens) est peut-être quelque chose de très difficile à maîtriser. Y'avait beaucoup de blabla, certes formé de mots, mais vide de sens, voire incompréhensible. Si ce sont les mêmes qui codent aujourd'hui, tout s'explique :-)

tetue - 31-10-2009 - 19:58

Sans doute Romy, sans doute...

Pascale - 31-10-2009 - 22:27

Bizarre ce truc sur Deschamps, je viens de voir rapidement sa bio sur Google (mon ami, mais est-ce si sûr?)et il était de Pompage et Evolt alors je suis largué, bah, une fois de plus... En tout cas un grand merci à CSS débutant, c'est trop bien, un vrai pied à l'étrier, important quand on débute. Bisous

Gauthier - 05-12-2009 - 22:39

Oups j'aurais dû lire jusqu'au bout...

Gauthier - 05-12-2009 - 22:43

Merci Gauthier ;)

Quant à Stephane : il est tjs à Pompage, ainsi qu'à OpenWeb.

Le petit extrait là haut est peut-être effectivement peu explicite quand on n'a pas assisté à la conférence d'où est sorti cet extrait.
Bien entendu, ce qu'il disait, c'est que virer les tableaux pour ne mettre que des div (sans autre balisage sémantique) ne règle pas les problèmes d'accessibilité.

Pascale - 07-12-2009 - 00:03

| Laisser un commentaire |

| Index | Avant | Archives |