1. Du point de vue sémantique, les deux solutions se valent.
2. Du point de vue accessibilité, la 1 est bien, la 2 est problématique.
3. Du point de vue facilité à modifier l'habillage graphique du site sans toucher au code HTML, la 2.
Quant à la question de la séparation de la structure et de la mise en forme (je sens que quelqu'un va la sortir...), il faut la séparer en deux pour pouvoir y répondre :
- séparation structure et mise en forme afin d'éviter que l'utilisation d'un balisage de mise en forme ne détourne d'une structuration cohérente du document : voir mon point numéro 1 ci-dessus ;
- séparation structure et mise en forme afin de faciliter les modifications de style : voir mon point numéro 3 ci-dessus.
Voilà, je crois qu'on a fait le tour.
JyuniX a écrit :
Pourtant, cette méthode est utilisée je crois sur le site alsacreations.fr
La méthode utilisée sur Alsacréations.fr correspond effectivement à une technique jugée un temps comme « accessible », par opposition à l'absence de texte dans le code HTML ou l'utilisation d'images sans texte alternatif, ou encore par opposition aux techniques utilisant
display: none pour cacher le texte.
Cette technique est tombée assez récemment en disgrâce, et depuis pleure dans son coin sur son sort et l'inconstance du coeur des hommes.
Sinon, pour la question de l'accessibilité : à partir du moment où le texte est caché, l'accès à l'information repose sur la possibilité de voir l'image. Si les images de fond ou les couleurs de fond sont désactivées, si les images peinent à se charger depuis le serveur, etc., l'information ne sera pas disponible.
La solution la plus performante en termes d'accessibilité est donc la première (1).
(rire diabolesque...)