Aller au contenu

alt des photos illustratives


goetsu

Sujets conseillés

Bonjour je poste ici aussi cette question que j'ai soumis en interne au groupe de travail accessiweb car après tout cela peut interessé tout le monde,

quelles alt mettriez vous a une images illustrative possédant une légende associé ex: une image avec une voiture rouge avec en dessous la légende voiture rouge. Alt="" pour éviter d'être redondant? alt="illustration représentant une", alt="voiture rouge".

Pour moi le mieux est peut être la deusieme car jaws dira bien

(ce que dit jaws quand il rencontre une image)IMAGE (le alt)illustration représentant une (puis la légende) voiture rouge. Alors que dans le premier cas jaws lira directement la légende (sans signaler la présence d'image) ce qui sorti de son contexte ne veux rien dire surtout si on a en as plusieurs à la suite (voiture rouge voiture bleu voiture verte). La dernière solution Jaws lire IMAGE (le alt)voiture rouge (la légende) voiture rouge.

Cela permet également de ne pas utiliser un longdesc lorsque la légende est longue, le alt étant lié explicitement à la légende qui le suit.

Je suis preneur d'avis

Aurélien

Lien vers le commentaire
Partager sur d’autres sites

> alt="illustration représentant une"

Oui, et si l'utilisateur n'est pas sous Jaws mais autre chose ? si il s'agit d'un moteur d'indexation ? si il s'agit d'un raccourci du navigateur qui présente les images sous forme de liste à partir des alt ? si ....

Tu détournes l'utilisation des balises et attributs pour coller au comportement d'une et d'une seule implémentation bien particulière. Je ne crois pas que ce soit une voie à suivre ni une voie pérenne.

> alt="voiture rouge"

Est ce que c'est réellement l'information portée par l'image ? est ce que c'est réellement un contenu alternatif ?

Est ce que ce n'est pas plutot ici une description de l'image ? En ce cas ce n'est pas le bon attribut, longdesc est le bon.

Et même au niveau pragmatique, est ce que quelqu'un qui ne voit pas aura envie de savoir qu'il s'agit d'une voiture rouge ? est ce qu'il n'aura pas plus envie de savoir que la marque, l'emplacement, le temps qu'il fait ... trop complexe de décider pour mettre ça en alternative dans le cas d'illustrations.

> Alt=""

AMHA, et de manière générique, c'est ce qui me semble le plus adapté. Maintenant si tu donnes un exemple concret de page et d'image (qu'on peut voir et lire) ça sera plus facile de répondre que dans ce cas théorique et générique un peu flou.

Lien vers le commentaire
Partager sur d’autres sites

A l'usage, l'important me semble surtout de bien préciser le fait qu'un texte est la légende d'une image, que celle-ci soit évacuée par un alt vide ou qu'elle soit rendue par un alt descriptif.

En effet, ce sont des indices visuels qui permettent aux lecteurs "voyants" de repérer la légende comme telle (position par rapport à l'illustration, typographie/alignement différents du reste du texte, etc...). A l'écoute, s'il n'y a aucune information identifiant ce texte comme étant une légende, le sens peut devenir peu évident.

Au mieux, AMHA, la légende doit utiliser une formule faisant référence à la présence de l'illsutration (L'image ci-dessus représente ...). Auquel cas, la présence d'un alt descriptif est tout à fait justifié si la légende elle-même n'est pas une simple répétition de celui-ci, bien-sûr.

Lien vers le commentaire
Partager sur d’autres sites

voilà la page en question

http://www.msd-france.com/content/corporat...rehistoire.html moi je trouve que pour une synthèse vocale dans le cas présent le alt vide est pas idéale sauf si comme l'indique laurent on précise en dessous dans le texte légende de l'image: dqdsqdd

Modifié par goetsu
Lien vers le commentaire
Partager sur d’autres sites

Maintenant si tu donnes un exemple concret de page et d'image (qu'on peut voir et lire) ça sera plus facile de répondre que dans ce cas théorique et générique un peu flou.

<{POST_SNAPBACK}>

On ne peut pas, AMHA, fixer une règle générique. C'est au cas par cas, contenu par contenu, et en testant dans un lecteur d'écran, qu'on peut déterminer ce qui donne le plus de sens à un document donné lorsqu'il est écouté. Trop de choses dépendent de la formulation propre à chaque contenu.

Lien vers le commentaire
Partager sur d’autres sites

Hum... Cet exemple n'est pas vraiment "simple" ;)

Effectivement, sur cette page, les légendes seules n'apportent aucune information pertinente à l'écoute de la page, et renseignent peu sur les images elles-mêmes (particulièrement la dernière image "MSD, laboratoire pharmaceutique fondé sur la recherche"). Mais des alt descriptifs n'apporteraient pas plus d'information "utile" pour enrichir le texte principal de la page.

Le problème de fond est que, dans la conception de cette page, les images nécessitent une longue analyse pour dégager une info. AMHA, on a affaire à un cas où des descriptions longues seraient plus appropriées (longdesc, lien D, etc). Mais ce n'est manifestement pas le propos de cette page (qui n'est pas un cours d'histoire industriel approfondi ;) ).

En l'état, la page me semble claire et très compréhensible grâce à son texte principal. L'absence de alt descriptifs n'est vraiment gênant que dans les lecteurs d'écran qui ne signalent pas la présence d'image avec alt="" (IBM HPR dans le réglage par défaut, par exemple). Dans ce cas, la lecture des légendes surprend. Ce serait un argument en faveur d'attributs alt renseignés...

Vraiment pas évident, j'avoue...

Lien vers le commentaire
Partager sur d’autres sites

A la réflexion: c'est un exemple vraiment intéressant:

- une page très bien conçue pour une consultation visuelle

- qui passe bien quand on l'écoute

- sauf le petit plus visuel que sont les images et leurs légendes...

En fait, il faudrait, dans un monde idéal où les lecteurs d'écran supporteraient le media speech (ou aural), faire une petite adaptation de contenu via CSS:

@media speech {
  p.legende, img.legende {
  display: none
  }
}

Dans l'immédiat, je serais presque tenté de supprimer les légendes "en dur", d'utiliser leurs intitulés comme contenu de l'attribut title, et de faire apparaître des légendes uniquement visuelles via un contenu généré CSS:

img.legende:after {
content: attr(title);
display: block;
}

<edit>Correction : attribut title et pas alt, puisqu'on veut faire disparaître ces images. On garderait des alt=""</edit>

Modifié par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites

Un petit rectificatif à propos de cette page : mon IE ayant par défaut le javascript désactivé... je n'avais pas vu à quel point les javascript de ce site étaient une horreur :gueule:

Après enregistrement de la page (avec ses images, ses css, ses scripts et tout) pour tester ma petite idée ci-dessus... l'affichage de la page locale m'a provoqué une superbe plantage généralisé d'Opera, d'IBM HPR et d'IE, avec applications gelées et impossible à tuer...

Je n'aime décidément pas le javascript :boude:

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

D'abord je confirme, le JavaScript pose problème... j'ai voulu utiliser l'extension JAWSAssist pour linéariser la page, par 2 fois Firefox s'est fermé :angry:

J'ai affiché la page dans Lynx.

Les légendes des images s'affichent après le texte "® Marque déposée de Merck & Co., Inc., Whitehouse Station, New Jersey, USA" et comme rien ne permet de savoir qu'il s'agit de légende d'image, ces textes ont vraiment l'air parachutés là sans qu'on sache pourquoi.

Seuls, ces textes ne signifient pas grand chose, surtout les 4 derniers.

Un contenu dans l'attribut alt me semble donc utile. Il le sera d'ailleurs aussi quand les images ne s'affichent pas avec un navigateur graphique (volontairement ou pas)

Lien vers le commentaire
Partager sur d’autres sites

on est d'accord qu'il faut un alt maintenant que mettre dedans reprendre le contenu exacte de la légende au risque d etre redondant et de devoir sur certaines images utiliser un longdesc. ou faire comme je le proposait alt="photographie ilustrative de" + légende

Lien vers le commentaire
Partager sur d’autres sites

Chouette, un cas pratique.

_AT_Denis : je suis d'accord pour l'inadéquation d'un cas générique, c'est bien pour ça que je demande un exemple concret.

Bon, alors, tout d'abord le constat :

Les images n'apportent aucune information. Si je les saute (visuellement ou textuellement) je ne perd pas vraiment d'information. La seule information que je perd c'est l'information qui n'est pas traduisible simplement sous forme textuelle c'est à dire l'aspect que peut avoir le labo à l'heure actuelle ou dans l'histoire.

Du coup ce n'est pas le alt qui peut porter ce genre d'information. Mon but sera donc que les images et légendes ne "gênent" pas la lecture textuelle, vu qu'il n'y a aucune information à apporter par ce biais. Un alt vide me semble donc approprié.

Comme il y a des légendes qui trainent et qu'il ne faut pas qu'on se demande à quoi ça correspond, il faut un titre ou un paragraphe juste en haut des images pour dire "illustrations du labo" ou quelque chose du genre. Le lecteur texte lira les légendes et verra probablement ça comme une courte idée de ce que représentent les illustrations. Ca me suffit.

À vrai dire on pourrait mettre un alt. Mais dans ce alt je mettrait justement ... la légende qui est actuellement en dessous. Si tu veux l'afficher en dessous il vaut mieux ne pas faire de doublons donc laisser vide les alt.

Perso je reste très contre les alt="photo illustrative de ..." parce que ça a de gros dégats collatéraux sur tout ce qui n'est pas navigateur texte (moteurs de recherche, présentation alternative du contenu sous forme d'une liste d'image, etc...). Et je ne crois pas qu'il soit bien de faire des pages "spécial aveugle" au prix de pourrir d'autres méthodes d'accès.

Lien vers le commentaire
Partager sur d’autres sites

Et je ne crois pas qu'il soit bien de faire des pages "spécial aveugle" au prix de pourrir d'autres méthodes d'accès.

<{POST_SNAPBACK}>

Tout à fait d'accord !

Pour ce cas pratique, je propose... à améliorer B)

Remplacer les class="..." par des hn

<h1>Notre histoire</h1>
<h2>Une Histoire au service des patients</h2>
...
<h2>Le labo en photos>/h2>

alt="Site de fabrication Merck & Co., Inc."

en légende : Le site de Rahway (Etats-Unis) en 1903

alt="Pharmacie Merck & Co., Inc."

en légende : L'intérieur d'une pharmacie à New York en 1897

alt="Equipe dirigeante"

en légende : Dr Randolph T. Major, Directeur du Merck Institute of Therapeutic Research et son équipe

alt="Produits pharmaceutiques"

en légende : Pénicilline, cortisone, vitamine B12 et streptomycine...

alt="Première implantation française"

en légende : Le site de Meribel (France)

alt="Site d'une unité de production française"

en légende : L'usine de La Vallée (France)

alt="euh... là je ne sais pas..."

en légende : MSD, laboratoire pharmaceutique fondé sur la recherche

Lien vers le commentaire
Partager sur d’autres sites

Je confirme, ça ne me semble pas" idéal" (du point de vue théorique), mais c'est un bon compromis qui devrait passer correctement quel que soit le moyen d'accès ou l'interprétation des données.

Merci Monique.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Je profite de l'occasion pour rappeler la conséquence néfaste de la longue suprématie d'un navigateur...

Quand on discute avec un non-voyant (ou même avec des webmasters qui se préoccupent d'accessibilité), la première revendication qui est faite c'est l'utilisation de l'attribut alt... et bien souvent il précise "ce qui s'affiche quand vous survolez l'image avec votre souris" :huh:

Le résultat c'est que l'usage de cet attribut est souvent détourné pour décrire l'image, que l'attribut title (qui, lui, entraîne l'affichage d'une info bulle avec tous les navigateurs) est trop souvent négligé.

L'information supplémentaire que le webmaster a voulu faire passer est donc perdue pour les utilisateurs de navigateurs graphiques respectueux des standards !

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...