Image de contenu ou de fond ?

Bonjour tout le monde,

Aujourd'hui, j'ai eu une discussion avec mon collègue de travail et nous n'étions pas tout à fait d'accord sur la mise en page d'une série de d'éléments. Pour mieux comprendre ce que j'essaie de vous expliquer, je vous propose de lire le code ci-dessous :

<dl>
	<dt>La carte fidélité de tartempion</dt>	
	<dd class="picto"><img src="images/picto_carte_fidelite.jpg" alt="illustration de la carte fidélité tartempion" /></dd>
	<dd class="resume">résumé du service de la carte fidélité de tartempion. Lorem ipsum ipalate... Rooo, il est cool ce vieux poème Latin du philosophe Bolo bolo</dd>
</dl>

.picto{
	float:left;width:50px;
}
.resume{
	margin:0 0 0 50px;
}

Et ci-dessous le code que mon collègie aurait à peu près soumis :

<dl>
	<dt>La carte fidélité de tartempion</dt>
	<dd>résumé du service de la carte fidélité de tartempion. Lorem ipsum ipalate... Rooo, il est cool ce vieux poème Latin du philosophe Bolo bolo</dd>
</dl>

dd{
	padding: 0 0 0 50px;
	background-image:url("../images/picto_carte_fidelite.jpg");
	background-postion:top left;
	background-repeat:no-repeat;
}

A noter que j'ai fait ce code de tête. Il se peut que j'aies fait une petite erreur...

Aussi j'aimerai avoir votre avis.

Bonne soirée à tous
Modifié par niuxe (26 Nov 2010 - 20:40)

C'est une image qui à a voir avec le contenu donc tu as raison.

Salut,

Au vu des exemples, je dirais plutôt que c'est ton collègue qui a raison, et tu donnes même la réponse dans ton exemple en débutant ton alternative par "illustration".

Les questions à se poser sont : est-ce que cette image permet de comprendre le texte ? Est-ce qu'elle comporte des infos non reprises dans le texte ?

Autrement dit : avec ou sans image, l'information qui doit être transmise est-elle identique ?

Dans le premier exemple, si l'image ne pouvait être restituée, cela donnerait :
La carte de fidélité de tartempion illustration de la carte de fidélité tartempion résumé du service de la carte de fidélité de tartempion...

Non seulement l'alternative n'apporte rien mais en plus elle parasite quelque peu.

Donc si l'image est décorative : alt vide ou mieux CSS ; si l'image est porteuse de sens l'alternative doit le restituer.

bzh a écrit :
C'est une image qui à a voir avec le contenu donc tu as raison.

Je suis du même avis que toi. Pour moi cette image n'est pas décorative dans le sens de fioriture graphique (images de la charte graphique -> filet ombré, fond d'un conteneur, etc.). Pour moi cette image est porteuse de contenu. Lorsque l'internaute lit la page, en un coup d'oeil, il voit les pictogrammes proposant une série de services. A noter que cette image est référençable. Or en affichant cette dernière via le CSS, elle ne l'est pas.

boulaneige a écrit :

Salut,

Au vu des exemples, je dirais plutôt que c'est ton collègue qui a raison, et tu donnes même la réponse dans ton exemple en débutant ton alternative par "illustration".

Les questions à se poser sont : est-ce que cette image permet de comprendre le texte ? Est-ce qu'elle comporte des infos non reprises dans le texte ?

Autrement dit : avec ou sans image, l'information qui doit être transmise est-elle identique ?

Dans le premier exemple, si l'image ne pouvait être restituée, cela donnerait :
La carte de fidélité de tartempion illustration de la carte de fidélité tartempion résumé du service de la carte de fidélité de tartempion...

Non seulement l'alternative n'apporte rien mais en plus elle parasite quelque peu.

Donc si l'image est décorative : alt vide ou mieux CSS ; si l'image est porteuse de sens l'alternative doit le restituer.

Ce sont les mêmes arguments qu'il m'a dit. (A noter qu'il est expert accessiweb) C'est la raison pour laquelle, je me suis dit qu'il est intéressant d'écrire un post sur Alsa.

Aussi, je pense que mon alternative textuelle a peut être été mal rédigée (erf dans le feu de l'action d'une charette... )

Après réflexion, il aurait été surement pllus judicieux de rédiger l'alternative comme ceci : Pictogramme de la carte fidélité Machin truc
Modifié par niuxe (27 Nov 2010 - 01:15)

boulaneige a écrit :

Les questions à se poser sont : est-ce que cette image permet de comprendre le texte ? Est-ce qu'elle comporte des infos non reprises dans le texte ?

La question à se poser est : est ce que l'image fait partie du contenu ? Et la réponse est oui.

Si le texte alternatif de l'image est redondant avec ce qui se trouve autour, je trouve tout à fait logique de la laisser dans le contenu avec un alt vide (encore que j'ai un gros doute la dessus, je l'aurai surement rempli comme ceci "Carte de fidélité tartempion"). D'autre part, comme le signale niuxe, l'image d'une carte fidélité véhicule une information importante d'elle même et ce même si elle n'apporte rien à la compréhension du texte.

J'ai l'impression qu'il y a eu comme une déformation du principe de base en : est ce que l'image va rajouter du sens ? (Voir pour d'autres, est ce que je peut mettre mon image en le background pour économiser une requête HTTP ?). Ce qui à mon avis est une logique désastreuse pour la conception d'un site internet ; on va devoir sans cesse se demander si l'image doit s'insérer dans le code html ou dans la css selon ce qu'elle va apporter en plus à la page ? Un coup sur 2, on va mettre l'image dans le code ou dans la css... drôle d'idée

a écrit :
Pour moi cette image est porteuse de contenu. Lorsque l'internaute lit la page, en un coup d'oeil, il voit les pictogrammes proposant une série de services.

On est d'accord pour dire que visuellement l'image a un rôle. Maintenant, si l'image ne peut pas être restituée, c'est l'alternative textuelle qui doit remplir ce rôle. Et c'est là qu'intervient le contexte.
En reprenant l'architecture de ton exemple : Titre, image, explications.
Si les explications reprennent toutes les infos visibles sur la carte, l'alternative ne pourra être que redondante.
Si les explications ne reprennent pas toutes les infos visibles sur la carte, alors l'alternative devra les mentionner.

a écrit :
Après réflexion, il aurait été surement pllus judicieux de rédiger l'alternative comme ceci : Pictogramme de la carte fidélité Machin truc

Hum... toujours en me basant sur les exemples fournis je sanctionne le critère 1.3 relatif à la pertinence de l'alternative car elle n'apporte rien à l'utilisateur, si ce n'est que là normalement, y'a un picto...

a écrit :
La question à se poser est : est ce que l'image fait partie du contenu ? Et la réponse est oui.

Une image fait forcément parti d'un contenu, c'est le contexte qui va déterminer son rôle et son sens.

Si une image véhicule une information importante, alors c'est cette information que doit restituer l'alternative... sauf si cette information est déjà présente dans le contexte.

a écrit :
J'ai l'impression qu'il y a eu comme une déformation du principe de base en : est ce que l'image va rajouter du sens

Le but est justement de ni rajouter ni enlever du sens/information.

boulaneige a écrit :

Une image fait forcément parti d'un contenu, c'est le contexte qui va déterminer son rôle et son sens.

Si une image véhicule une information importante, alors c'est cette information que doit restituer l'alternative... sauf si cette information est déjà présente dans le contexte.

Une image ne fait pas forcément partie du contenu ; les images qui composent le design n'en font pas partie. On parle du code html, j'espère qu'on est bien sur les même ondes.

Quoi qu'il en soit voici ma conclusion personnelle :
- image porteuse de sens en background-image = pire des solutions
- image porteuse de sens dans le contenu avec alt vide = évite la redondance mais donne un désavantage côté SEO
- image porteuse de sens dans le contenu avec alt rempli = inverse du point précédent

Sur ce cas précis, il y a redondance entre le titre et l'image mais est ce que ça va être le cas pour toute les images qui suivent ce cas de figure ? Pas certain du tout. De plus, je ne pense pas que la redondance soit grave ni que ce soit une optimisation sérieuse en termes d'accessibilité que de traquer ce genre de chose (note que la redondance se fait aussi visuellement).

D'autre part ne pas oublier qu'il n y a pas que 2 façon d'afficher une page - le lecteur d'écran et le navigateur en mode écran - mais tout un tas de façon d'afficher et de lire une page. L'image et son alternative peuvent servir différemment selon les supports.

Maintenant qu'une personne utilisant un lecteur d'écran trouve ça pénible d'avoir 2 fois de suite la même chose, je peux comprendre mais un site internet ne se limite pas à cette unique contrainte.
Modifié par bzh (27 Nov 2010 - 14:40)

- Image de contenu: oui.
- Alt vide ou alt redondant: je penche pour l'alt vide, surtout si derrière il y a un système de gestion de contenus (ou de fiches produit dans un site e-commerce) avec des utilisateurs pas spécialement formés au choix d'une alternative pertinente pour une image.

Et sinon, le coup du DL,

Florent V. a écrit :
Et sinon, le coup du DL

Raaah, moi je le trouve très bien ce <dl> !

Salut,

Florent V. a écrit :
- Image de contenu: oui.
- Alt vide ou alt redondant: je penche pour l'alt vide

Si c'est une image de contenu, si "contenu = info utile", alors le alt ne doit pas être vide.

Dans le cas exposé par niuxe, l'image n'apporte rien. Elle peut donc être intégrée soit en arrière-plan via CSS (cette solution peut manquer de souplesse si un contributeur est amené à changer le visuel) soit dans le code source avec un alt vide.

Sinon, pour le dl, pourquoi pas ?

Ericf a écrit :
Si c'est une image de contenu, si "contenu = info utile", alors le alt ne doit pas être vide.

Je ne valide pas cette deuxième condition.
"Info utile -> contenu" me semble vrai.
"Contenu -> info utile", non.

J'estime par exemple qu'une illustration accompagnant un article, lorsque cette illustration est propre à l'article, fait partie du contenu. On souhaite que l'illustration soit reprise dans des contextes où la feuille de styles principale n'est pas appliquée (je pense notamment à un fil de syndication ou à une feuille de styles pour l'impression). On est donc à fond dans du «contenu HTML» (parler de «contenu» tout court, c'est faire de la théorie casse-gueule, on se retrouve à mêler de l'histoire de l'art à tout ça si on ne fait pas gaffe).
Par contre cette illustration peut être difficilement transposable en texte. Ou bien la transposition est possible, mais la restitution en texte au sein (ou au début ou à la fin) du contenu de l'article serait excessive, voire nuirait à la clarté du propos. Dans ce cas, le choix d'une alternative vide me semble pertinent.

(Globalement d'accord avec ce que tu dis du cas exposé par niuxe.)

Ericf a écrit :
Sinon, pour le dl, pourquoi pas ?

Vieille lubie. DL est défini bizarrement en HTML4, certains (dont moi) poussent pour un usage restreint aux listes de définition (par exemple pour des glossaires) pour éviter des détournements extrêmes où la sémantique est inversée (le DT est utilisé pour décrire les DD suivants, alors que ce sont les DD qui décrivent le DT). Mais HTML5 transforme DT+DD en mécanisme généraliste pour réaliser des groupes [terme + valeurs(s)], donc c'est un combat d'arrière-garde.

Salut,

niuxe a écrit :
j'ai eu une discussion avec mon collègue de travail

Le collègue de travail se reconnaîtra.

Ericf a écrit :
Dans le cas exposé par niuxe, l'image n'apporte rien. Elle peut donc être intégrée soit en arrière-plan via CSS (cette solution peut manquer de souplesse si un contributeur est amené à changer le visuel) soit dans le code source avec un alt vide.

Je suis du même avis qu'Éric et ton collègue de travail. J'en ai même parlé aujourd'hui à quelques uns de mes confrères experts Accessiweb et leur avis est unanime : il s'agit d'images décoratives ; et, parmi les arguments avancés, il y a les suivants :
* tester avec un navigateur textuel comme Lynx (c'est là qu'on se rend mieux compte du caractère redondant des alternatives textuelles proposées),
* ou désactiver les CSS pour mieux se demander ce qu'on fait des images en question.
Autrement dit, si je supprime ces images, la compréhension du contenu textuel n'est pas remise en cause. Il s'agit donc bien d'images décoratives, à pourvoir d'un attribut alt vide ou à gérer en CSS.

Et l'eau tout le monde,

Désolé si je vous écris tardivement à ce sujet, j'étais très affairé dans la semaine.

Au départ, lorsque j'ai codé cette partie là, je n'avais pas pensé à la redondance de l'alternative. Par contre, je pensais au référencement potentiel. Aussi comme bzh et Florent ont souligné, c'est bien une image de contenu. D'ailleurs Florent tu as pensé à la même chose que moi :

a écrit :

[...]J'estime par exemple qu'une illustration accompagnant un article, lorsque cette illustration est propre à l'article, fait partie du contenu. [...]

En ce qui concerne le dl, j'aurais pu éviter cela en faisant :

    <ul>
        <li>
            <hn></hn>
            <p></p>
            <p></p>
        </li>
        <!-- etc. -->
    </ul>

Je trouve ça un peu lourd et si on regarde bien, le dl se prête bien à la situation. Il y a le titre du/des service(s), une image illustrant l'article et l'article.

Bon code à tous
Modifié par niuxe (03 Dec 2010 - 21:29)

Bonjour,

Victor BRITO a écrit :

Je suis du même avis qu'Éric et ton collègue de travail. J'en ai même parlé aujourd'hui à quelques uns de mes confrères experts Accessiweb et leur avis est unanime : il s'agit d'images décoratives

Une image décorative est selon moi une image superficielle qui n'est pas du tout utile à l'utilisateur. Dans le contexte qui nous occupe, il s'agit du visuel d'une carte de fidélité. Le visuel de la carte peut s'avérer très utile pour un utilisateur afin qu'il voit bien de quelle carte il est question et pour qu'il puisse la reconnaître correctement lorsqu'il voudra se la procurer ou l'utiliser. C'est à ce moment que l'image devient une image de contenu. En désactivant les CSS, l'utilisateur a toujours accès au visuel de la carte.

C'est bien de penser aux personnes mal ou non-voyantes, mais il ne faut pas oublier la masse des gens capables de voir les images, et le visuel de la carte de fidélité peut être utile pour elle.

Pour éviter la redondance, un simple alt vide suffit.