1174 sujets

Accessibilité du Web

Attribut "alt" et redondance

J'ouvre ce sujet pour faire suite à une discussion amorcée dans ce topic :
http://forum.alsacreations.com/topic.php?fid=4&tid=1162

Dans l'exemple suivant (photos de voyage), doit-on répéter le titre de la photo dans l'attribut alt="" ou peut-on l'omettre puisque déjà décrit en <h5> ?


<div class="diapo">
 <h5>Arrivée à Mirabel</h5>
 <img src="images/mirabel.jpg" width="400" height="300" alt="" />
 <p>Photo : Stephan Johnson</p>
</div>

Modifié le 02 Jan 2005 - 16:32
A mon avis oui, peut-être pas le titre mais la description de l'image:
alt="Stephan arrive à l'aéroport de Mirabel".

alt
title
Bonjour,

Dans ton exemple de code, une synthèse vocale ne signalera même pas l'existence d'une photo.
L'internaute entendra donc :
"Titre de niveau 5 Arrivée à Mirabel Photo : Stephan Johnson"
ce qui ne me semble pas évident à comprendre.

Je rejoins donc l'avis d'Igor Smiley cligne
Modifié le 02 Jan 2005 - 16:40
Pour moi, quand une image est significative, non seulement elle devrait disposer des deux attributs alt et title, mais il faudrait également faire attention à parfois différencier le contenu de ces deux attributs.

Prenons l'exemple d'une peinture. Son attribut alt devrait au minimum indiquer qu'il s'agit d'une peinture mais l'attribut title devrait au minimum reprendre le nom de la peinture.
Après, on peut s'interroger sur l'intérêt ou nom d'indiquer la même indication complète (ex: Peinture "les tournesols" de Van Gogh) ou séparée (ex: "peinture de tournesol" et "'les tournesols' de Van Gogh'), mais c'est un problème secondaire qui relève plus de la fluidité du texte pour le lecteur.
Juste histoire d'en ajouter une tite couche,
J'en ai parler dans un autre échange, pour mon site en construction, j'utilise les listes de définition :


    <!-- Affichage des graphismes -->

    <a name="frontImage" id="frontImage"></a>
    <div class="frontImage">
      <dl>
      <dt>Peinture chinoise</dt>
      <dd><img src="IMG/deco/plan_puru001.jpg" alt="Pu Ru" title="Pu Ru 1887-1963" /></dd>
      <dd>Pu Ru 1887-1963</dd>
      </dl>
      
      <dl>
      <dt>Peinture chinoise</dt>
      <dd><img src="IMG/deco/plan_puru002.jpg" alt="Pu Ru" title="Pu Ru 1887-1963" /></dd>
      <dd>Pu Ru 1887-1963</dd>
      </dl>
      
      <dl>
      <dt>Peinture chinoise</dt>
      <dd><img src="IMG/deco/plan_puru003.jpg" alt="Pu Ru" title="Pu Ru 1887-1963" /></dd>
      <dd>Pu Ru 1887-1963</dd>
      </dl>
      
      <dl>
      <dt>Peinture chinoise</dt>
      <dd><img src="IMG/deco/plan_puru004.jpg" alt="Pu Ru" title="Pu Ru 1887-1963" /></dd>
      <dd>Pu Ru 1887-1963</dd>
      </dl>

      <p>Ces peintures proviennent du site <a href="http://www.chinapage.com" >Chinapage</a></p>
    </div><!-- fin de frontImage -->


En fait, le "alt", le "title" + le "dt" et le "dd" m'offrent plus d'option pour l'affichage de commentaires. Là, l'exemple n'est pas très flagrant (en contruction), mais en fait, je vais pouvoir différencier les textes qui sont pour l'instant à l'identique afin d'offrir une meilleure description sans tomber dans la longue description pour autant, puisqu'il ne s'agit là que de décoration.

Un autre point intéressant, un habillage particulier des balises "dl" "dt" et "dd" permet un encadrement des images (que je n'utilise pas encore ici).

- Pour en savoir plus : http://www.pompage.net/pompe/listesdefinitions/

Votre avis ?
> alt="Stephan arrive à l'aéroport de Mirabel".

Argh, non.

Le alt n'est pas une description de l'image mais bien un contenu alternatif.
Le but n'est pas de dire que xxx descend de l'avion, ce n'est probablement pas le rôle de l'image (sauf roman photo). Le rôle de la photo est ici uniquement illustratif, il n'y a aucune raison de mettre un alt (par contre ça pourrait aller pour le title).

Ca va lui faire une belle jambe à celui qui écoutera le site de savoir que Stephan arrive à l'aéroport. Effectivement, ça peut être intéressant, mais il s'agit alors d'une description de l'image, pas d'une information sous un autre média. L'image n'était pas informative mais illustrative. Si l'illustration n'a aucun sens en texte elle n'a aucun sens en texte, c'est comme ça et ça veut dire un alt vide.

> Son attribut alt devrait au minimum indiquer qu'il s'agit d'une peinture

Encore moins. Là tu parles d'une description, pas d'une alternative. Pour ça il y a un attribut longdesc (qui décrit l'image au lieu de donner l'information portée par l'image).

marquer "peinture de ..." dans le alt d'une image n'est à priori jamais pertinent. Je ne vois qu'un seul cas où ça l'est, ça serait un quizz où on demande si X est un peintre ou un sculteur et que pour toute réponse on insère l'image. Là (et uniquement là), le fait que ce soit une peinture *est* l'information convoyée.


Vos images sont peut être le but de vos pages mais dans les exemples que vous donnez, ce sont bien des illustration et pas des images porteuses de sens ou d'information. Illustration ne veut pas forcément dire "présentation" ou "annexe", ça veut juste dire que le but n'est pas de passer une information, il n'y a donc (probablement) pas d'alternative valable.
ganf a écrit :
> alt="Stephan arrive à l'aéroport de Mirabel".

Argh, non.

Le alt n'est pas une description de l'image mais bien un contenu alternatif.
Le but n'est pas de dire que xxx descend de l'avion, ce n'est probablement pas le rôle de l'image (sauf roman photo). Le rôle de la photo est ici uniquement illustratif, il n'y a aucune raison de mettre un alt (par contre ça pourrait aller pour le title).


Je comprend l'argument, mais ne suis pas pour autant d'accord, de ce que je comprend de la spécification, et je suis d'accord avec toi sur le contenu alternatif, mais je le comprend comme une description de ce qui est classiquement illustré par l'image:
http://www.la-grange.net/w3c/html4.01/struct/objects.html#adef-alt a écrit :
Cet attribut spécifie un texte de remplacement pour les agents utilisateurs qui sont incapables d'afficher les images, les formulaires ou les applets [...]


Peut-être serait-il aussi plus pertinent d'indiquer:
alt="Photo de Stéphan à sa descente de l'avion à Mirabel"


Pour l'attribut longdesc il s'agit d'indiquer une source décrivant l'objet incorporé comme une photo, toujours de ce comprend:
http://www.la-grange.net/w3c/html4.01/struct/objects.html#adef-longdesc-IMG a écrit :
longdesc = uri [CT]
Cet attribut spécifie un lien vers une description longue de l'image. Cette description devrait compléter la description brève fournie par l'attribut alt[...]
Bonjour,

Le problème de l'attribut alt vient certainement de sa mauvaise interprétation par IE... pour bien des webmasters, c'est l'attribut qui permet l'affichage d'une info-bulle au passage de la souris Smiley fache
La majorité des non-voyants utilise Windows, la plupart des synthèses vocales se basent sur IE et utilisent le contenu de alt par défaut Smiley decu
De plus l'utilisation d'une synthèse n'est déjà pas facile pour naviguer, elle l'est encore plus pour parcourir et comprendre l'aide fournie (même moi, en voyant, j'ai du mal !)

Un exemple...
Lors d'une démonstration, un non-voyant nous présente un site.
Il nous explique que contrairement à la plupart des sites, pour celui-ci il sait que le logo représente un groupe d'enfants souriants devant leur école parce que la description se trouve dans la balise alt (il précise d'ailleurs que c'est ce que nous devons voir quand la souris...)

Alors, des compromis encore une fois ???
Quel comportement aurait le balisage suivant en synthèse vocale ?

<div class="diapo">
 <h5>Le comptoir de Corsair</h5>
 <img src="images/corsair.jpg" width="400" height="300" alt="Photo de Claire et Pierre devant le comptoir de Corsair" title="3 juillet 2004" />
 <p>Photo : Stephan Johnson</p>
</div>
Bonjour,
Stephan a écrit :
Quel comportement aurait le balisage suivant en synthèse vocale ?

<div class="diapo">
 <h5>Le comptoir de Corsair</h5>
 <img src="images/corsair.jpg" width="400" height="300" alt="Photo de Claire et Pierre devant le comptoir de Corsair" title="3 juillet 2004" />
 <p>Photo : Stephan Johnson</p>
</div>


La synthèse dira (avec la configuration par défaut) :

Titre de niveau 5 Le comptoir de Corsair Graphique Photo de Claire et Pierre devant le comptoir de Corsair Photo : Stephan Johnson

Seule l'intonation de la voix permet de distinguer les différentes parties les unes des autres... pas évident au début, mais on s'y fait.
@Stephan : par défaut, oui. On peut les activer mais si j'ai bien compris peu le font. Et globalement, est ce que c'est bien une info à lire dans le flux normal ?
Ne le lire que sur demande me parait être effectivement la bonne méthode. Si tu en as besoin en permanence ça mériterait d'être sous forme de légende/titre HTML et pas dans l'image.
En fait, mis à part les non-voyants webmasters, je crois qu'il y a vraiment très très peu d'utilisateurs qui choisissent cette configuration.

Alain (qui a fait la présentation dont j'ai parlé) fait une utilisation intensive de son ordinateur et d'Internet (études universitaires et thèse sur le thème de l'accessibilité des sites bancaires pour son doctorat), il maîtrise donc plutôt bien Jaws.
J'ai passé une matinée avec lui pour découvrir un peu ce logiciel.
Je lui ai demandé pourquoi il n'utilisait pas l'attribut titre... tout simplement parce que après avoir essayé, il n'avait pas constaté de différence Smiley ohwell

Pour info, deux extraits de l'aide de Jaws :
a écrit :

L'attribut "Alt" contient un court descriptif des images. JAWS lit donc ce texte lorsqu'il est disponible.
L'attribut "Titre" est également utilisé pour fournir des informations complémentaires sur une image. JAWS lit le titre dans le cas où le texte alt n'est pas disponible.
L'attribut "Longdesc" est un attribut qui fournit une description circonstanciée des images dans une page séparée. Si JAWS annonce qu'il existe une description longue, appuyez sur ENTRÉE pour ouvrir la page contenant cette description dans une nouvelle fenêtre.

a écrit :

Verbosité graphique
Cette série de boutons radio vous permet de fixer la façon dont vous désirez que les graphiques soit annoncés dans les documents HTML. Les options suivantes sont disponibles :
- Aucun graphique : les graphiques ne sont pas annoncés.
- Graphique étiquetés : les graphiques ayant des étiquettes dans les documents HTML sont annoncés. JAWS annonce « graphique » puis fait la lecture de l'étiquette. Cette option est sélectionnée par défaut.
- Tous les graphiques : tous les graphiques sont annoncés.

Je dois dire que l'aide de Jaws n'est pas plus claire que celle de la majorité des logiciels... et vraiment rébarbative à suivre avec une synthèse vocale Smiley eek
Monique, je partage bien ton avis pour avoir connu des aveugles qui m'ont un peu montré comment fonctionnait la synthèse vocale...
Je relis vos messages différents sur la valeur de la balise alt et ses subtilités, et j'aurais envie de préciser que bien qu'un aveugle ne puisse apprécier avec ses yeux, il est capable de s'en faire une représentation (surtout s'il n'est pas aveugle de naissance) et apprécie qu'on lui décrive ce que nous voyants avons comme illustration.
Alors effectivement, on serait en droit d'attendre une description de cette fameuse descente d'avion, sans doute plus détaillée que le simple "descente d'avion", mais certainement pas un vide (bon ben là y a une image mais comme vous pouvez pas la voir, on passe...) Smiley confus
Allez, je vais me répéter, mais qu'on se le dise, les aveugles vont au cinéma, au théâtre, au musée... les sourds écoutent de la musique... eh oui ... chocolat pour tout le monde Smiley cligne
cktoon a écrit :

les sourds écoutent de la musique... eh oui ... chocolat pour tout le monde Smiley cligne

Et oui ! Et puis sur la piste de dance, la musique à fond la caisse, ils sont les seuls à se comprendre...
Stephan a écrit :

Et oui ! Et puis sur la piste de dance, la musique à fond la caisse, ils sont les seuls à se comprendre...

Perspicace remarque Smiley lol
a écrit :
Alors effectivement, on serait en droit d'attendre une description de cette fameuse descente d'avion, sans doute plus détaillée que le simple "descente d'avion", mais certainement pas un vide (bon ben là y a une image mais comme vous pouvez pas la voir, on passe...)


Je crois que là dessus on est d'accord. Ce qui est en question c'est plus dissocier ce qui est dans le flux du texte/contenu (le texte alternatif) et ce qui constitue la description (le logdesc), ainsi que mettre le bon au bon endroit.
J'insiste aussi parce que ces attributs ne servent pas qu'aux fameux aveugles et donc que je ne me vois pas les prendre comme unique repère. Pour d'autres (notamment les machines), la séparation entre les deux est importante.
Il ne me gêne pas de dire qu'il peut y avoir une description longue et un contenu alternatif vide (une image qui n'a aucun rôle dans le contenu mais qui peut tout de même être décrite au titre d'illustration).
Sujet clos
Aller à