5568 sujets

Sémantique web et HTML

Bonjour à tous,

Dans le cadre d'un projet sur lequel je travaille, je dois réaliser, entre autres, un gestionnaire de planning pour différentes activités. Chacune de ces activités se voit associer une couleur au sein du système.

Ma question concerne l'affichage de cette couleur dans les pages de configuration en respectant à la fois la stricte séparation de l'affichage et des données ainsi que la cohérence sémantique (pour l'accessibilité).

J'ai pour l'heure opté pour un tag image dans lequel je modifie la couleur en utilisant un attribut "style" inline. (cf. exemple ci-après)

<img src="" alt="" title="#fff9b8" class="square" style="background-color: rgb(255, 249, 184);" />


Bien qu'à l'habitude, je n'utilise pas de style "inline", la couleur a ici une valeur informative et pas d'affichage. Mon raisonnement sur ce point se tient-il selon vous ?

D'autre-part, si cette solution est visuellement satisfaisante, je me pose la question suivante vis-à-vis des personnes mal-voyantes ou atteintes de cessité :

Dans la mesure où ces personnes n'ont de toute façon aucune possibilité de "voir" le carré de couleur, mon choix se dégrade-t-il correctement en l'absence d'afficheur graphique ? Mon choix de mettre le code couleur hexadecimal dans l'attribut titre est-il pertinent ?

J'ai songé à des solutions alternatives (utiliser un div, générer un carré de couleur en PHP, etc.) chacune ayant ses avantages et ses inconvénients.

Mais vous, qu'en pensez-vous ?
Modifié par BarbouK (04 Jul 2009 - 20:05)
BarbouK a écrit :
Mon raisonnement sur ce point se tient-il selon vous ?

La couleur n'est pas vraiment une information en soit, elle véhicule une information.


BarbouK a écrit :
Mon choix de mettre le code couleur hexadecimal dans l'attribut titre est-il pertinent ?

Tu sais calculer de tête une valeur héxa toi ?
D'une part, le title sur une image ne sert pas à donner une information alternative, mais une information complémentaire. C'est alt qui se charge de donner une information alternative (notamment pour les utilisateurs de lecteur d'écran). Il serait préférable de donner une information compréhensible (le nom de la couleur, ou mieux ce quelle signifie).
Bonjour,

Quand je lis des choses comme «HTML et sémantique», déjà j'ai peur. La notion de sémantique en HTML étant utilisé pour parler de tout et de n'importe quoi (du truc qui n'a rien à voir jusqu'au fantasme de codeur un peu space), la plupart des questions sur le «sémantiquement correct» donnent des discussions où on ne sait généralement pas de quoi on parle.

Quand je lis «HTML et philo», je me tape la tête contre les murs pour à peu près les mêmes raisons. Ça promet de beaux dialogues de sourds sans lien avec des préoccupations concrètes. Smiley cligne

Revenons donc aux préoccupations concrètes. Ici il s'agit de s'assurer qu'une information est accessible. Cette information est «tel contenu est rattaché à telle activité». Dans le design actuel, l'activité est indiquée par une couleur.

Du coup, c'est très simple:
- si je ne peux pas voir ou distinguer les couleurs (cécessité, malvoyance, daltonisme, contraste de couleurs trop discrets...), alors je n'ai pas accès à l'information;
- si l'information est indiquée d'une autre manière (et là, pas de secret: ça sera avec un texte), alors je peux avoir accès à l'information.

La marche à suivre est donc: indiquer l'information autrement que par la couleur. Via un texte ou un pictogramme (avec texte alternatif), par exemple. À moins que l'information soit vraiment accessoire?
BarbouK a écrit :
mon choix se dégrade-t-il correctement en l'absence d'afficheur graphique ?

Non. Pour deux raisons:
- L'information donnée dans un title est une information accessoire qui dans la majorité des cas ne sera pas perçue par l'utilisateur.
- Un code hexadécimal n'est pas une information exploitable. Un nom de couleur (en toutes lettres) serait lisible, mais ce n'est pas l'information. L'information, c'est le nom de l'activité correspondant au code couleur.

BarbouK a écrit :
Mon choix de mettre le code couleur hexadecimal dans l'attribut titre est-il pertinent ?

Non.
Modifié par Florent V. (03 Jul 2009 - 18:01)
Merci pour vos réponses rapides et honnêtes,

Effectivement, et en suivant vos argumentations, il me semble tout à fait logique de considérer la "couleur" comme une information "accessoire".

Si on utilise un écran monochrome (pourquoi pas, après tout Smiley cligne ), il va de soi qu'on ne peut plus différencier "rapidement" les activités dans le planning par leur couleur.

Je ne l'ai effectivement pas précisé dans mon post, mais le nom de l'activité apparaît évidemment lui aussi, et c'est ce qui permet d'ailleurs de réellement les différencier (deux activités pourraient après tout avoir la même couleur ou des couleurs très proches).

La couleur sert donc juste à effectuer un premier tri visuel et rapide des activités au sein du planning. Ce premier tri n'est pas indispensable, mais il est pratique.

a écrit :
Tu sais calculer de tête une valeur héxa toi ?


Je suis d'accord sur ce point : un utilisateur a peu de chances de connaître la signification d'un codage RGB représenté en hexadécimal. Cependant, je n'irais pas jusqu'à dire qu'il s'agit d'une information "inexploitable" : on peut tout à fait imaginer par exemple fournir en documentation un panel de couleurs associé à leur représentation hexadécimale RGB.

Certes, c'est lourd, et quite à faire ça, autant proposer directement dans l'interface de configuration différentes couleurs bien définies et masquer la représentation sous-jacente. C'est d'ailleurs ce qui est déjà en place.

Un balisage comme suit est-il plus adéquat selon vous ?

<span class="colorbox" style="background-color: rgb(255, 249, 184);" ></span>


Dans le cas d'un lecteur d'écran, je suppose que le span, vide de contenu, sera simplement ignoré à la lecture. Dites-moi si je me trompe, je n'en ai jamais utilisé ou même vu de loin.

Les non-voyants n'auront donc pas accès à l'information de couleur, mais comme celle-ci leur serait de toute façon inutile, je pense qu'on peut considérer acceptable de s'en passer dans un tel cas.

D'autre part, on n'affiche plus la valeur hexadécimale correspondante, puisqu'on l'a effectivement jugée "inexploitable" en l'état.

Est-ce mieux ? Moins bien ? Aussi illogique qu'avant ?

a écrit :
Quand je lis «HTML et philo», je me tape la tête contre les murs pour à peu près les mêmes raisons. Ça promet de beaux dialogues de sourds sans lien avec des préoccupations concrètes. cligne

Je me doutais que mon association de la sémantique et de la philosophie aurait un effet, mais j'étais loin de me douter qu'elle irait jusque là ! J'espère que tes murs ne sont pas trop durs Smiley eek

Blague à part, le terme de "sémantique" me paraît bien utilisé dans mon cas, je me trompe ?
Après tout, une partie de ma question était : "Quel signifié utiliser pour représenter cette information ?"

Dans tous les cas, je ne vais pas insister là dessus Smiley cligne

Encore merci pour vos réponses (et pour avoir lu en entier ce pavé).
a écrit :
<span class="colorbox" style="background-color: rgb(255, 249, 184);" ></span>
La couleur n'est pas l'information, c'est simplement l'aspect visuel que tu lui associes. Cette association n'est pas objective, tu peux parfaitement la changer. En revanche, le nom de l'activité, lui, n'est pas altérable sans modifier l'info. C'est la bête et banale distinction entre fond et forme.

Bref, si tu veux conserver l'info, il te faut de texte. La couleur n'est absolument pas pertinente, elle traduit uniquement l'appartenance de l'activité à un groupe, chose que gèrent très bien les classes HTML.
Administrateur
Bonjour,

l'information ne doit pas être uniquement apportée par de la couleur. Elle doit donc être également apportée par autre chose et ce de façon pertinente.
Pour les non-voyants, une solution serait:
<img alt="NOM DE L'ACTIVITÉ" src="chemin/nom.jpg" width="200" height="100" />

Pour ceux qui confondent les couleurs ou ne peuvent les afficher, faudrait voir ta page ... mais vu que tu écris:
BarbouK a écrit :
Je ne l'ai effectivement pas précisé dans mon post, mais le nom de l'activité apparaît évidemment lui aussi, et c'est ce qui permet d'ailleurs de réellement les différencier (deux activités pourraient après tout avoir la même couleur ou des couleurs très proches).

ça devrait être bon sans alternative textuelle sinon il y aura deux fois le même texte ...


Pour ce qui est du titre de lien (title), ça ne se met pas sur une image (c'est un bug d'IE ça) et c'est pour apporter une info supplémentaire à ce qui ne serait pas déjà dans l'intitulé du lien. Le titre de lien doit apporter l'info de l'intitulé ET l'info supplémentaire.
Cas typique: Jaws le plus connu des lecteurs d'écran est configuré par défaut pour lire le plus long des deux, alors s'il lit "00ff00" c'est incompréhensible (la population en général et les codes hexadécimaux ça fait deux mais même les nerds aveugles et la couleur hexa ou pas ça fait toujours deux)
Modifié par Felipe (03 Jul 2009 - 21:45)
marcv a écrit :
<span class="colorbox" style="background-color: rgb(255, 249, 184);" ></span>
La couleur n'est pas l'information, c'est simplement l'aspect visuel que tu lui associes. Cette association n'est pas objective, tu peux parfaitement la changer. En revanche, le nom de l'activité, lui, n'est pas altérable sans modifier l'info. C'est la bête et banale distinction entre fond et forme.

Bref, si tu veux conserver l'info, il te faut de texte. La couleur n'est absolument pas pertinente, elle traduit uniquement l'appartenance de l'activité à un groupe, chose que gèrent très bien les classes HTML.

Comme je l'ai dit dans le dernier post, les activités sont bien distinguées par leur "Nom" (ou "titre" comme on décide de l'appeler). La couleur, on peut effectivement (et heureusement) la changer à loisir, au même titre que la description par exemple, dont on peut tout aussi bien se passer (je n'ai vu jusque là aucun client prenant la peine de saisir la description).

À la lecture de ta réponse, je pense que je n'ai pas indiqué avec clarté que le code présenté était uniquement celui d'un petit carré (ou rectangle, ou autre, etc.) de couleur, éventuellement situé dans un élément plus important qui lui représente bien l'activité (entre autres grâce à son "Nom"). "Carré" qui sera donc "ignoré" (à juste titre) par les divers procédés de lecture "non-graphiques" de la page.

Felipe a écrit :
Pour ceux qui confondent les couleurs ou ne peuvent les afficher, faudrait voir ta page


Dans mon cas l'utilisateur est responsable du choix de la couleur, donc s'il choisit un assortiment de couleur que lui-même ou une personne utilisant le système ne peut tolérer, ce n'est hélas pas de mon ressort. Je ne fais qu'apporter une fonctionnalité en m'efforçant de la rendre désactivable et non-contraignante.

J'ai voulu limiter au maximum la quantité de code parasite en citation, au détriment du contexte hélas. J'aurais du préciser certaines choses d'entrée de jeu. J'y songerai tout de suite la prochaine fois Smiley cligne

En tout cas, merci à tous pour vos réponses et vos idées.