1178 sujets

Accessibilité du Web

Pages :
Bonjour,

J'ai plusieurs images qui illustrent les différents textes présents sur une page.
Il m'est impossible de leur donner une valeur de alt précise car ce n'est, pour l'instant pas prévu dans la DB.
D'autre part, elles ne contiennent aucun élément de texte.

J'aimerais savoir s'il est préférable de laisser les attributs "alt" vides
alt=""

Ou de placer une alternative générique:
alt="Image illustrative"


Merci pour votre aide
Modifié par Mathieu_vd (04 Sep 2006 - 23:12)
viiiiide, please Smiley cligne

(Informer l'utilisateur n'ayant pas accès à l'info graphique qu'il y avait une info graphique annexe et non utile à la navigation/interaction/compréhension mais qu'on ne la lui donnera pas, tout en parasitant son accès au contenu avec ce type d'information... est d'assez mauvaise politique Smiley cligne )

<edit>
Au fait, une chose est frappante : le contexte est très précisément pesé, de manière exemplaire (contrainte de production, type de contenu). Il faut souvent beaucoup de travail pour obtenir ce type de démarche, alors cela vaut le coup de le souligner : donc, respect Smiley jap

Smiley cligne
</edit>
Modifié par Laurent Denis (04 Sep 2006 - 18:18)
Un alt vite vaut toujours mieux que n'importe quelle information générique du type "image décorative", "image illustrative", "image meublante" ou semblable.
Merci pour vos réponses.

Laurent Denis a écrit :
le contexte est très précisément pesé


Mes questions ont parfois manqué de précisions. J'essaye juste de m'améliorer... Smiley cligne
Bonjour à tou(te)s

La question du statut des images est assez complexe pour mériter d'être abordée sous l'angle du sens qu'elles portent. Celui-ci est étroitement lié au contenu textuel de la page : est-ce que l'image l'enrichit, est-ce qu'elle le répète, est-ce qu'elle l'illustre, est-ce qu'elle le décore ? Il faudrait pouvoir répondre à cette question pour chaque image, de la même façon qu'on répond à la question "quel est le statut de ce texte ?" et qu'on lui attribue une balise adéquate. La faiblesse du langage actuel fait que pour des raisons historiques il ne propose qu'une seule balise image, contre quelques dizaines textuelles... on doit donc y suppléer manuellement pour mettre du sens là où il n'y en a pas, ou pas encore.

Une méthode consiste à séparer les images en 4 entités à traiter distinctement, avec des logiques propres.

Le premier groupe est celui des images proposant du contenu non-repris dans le texte auquel elles sont associées : l'exemple classique est celui du graphique-histogramme (courbes, camembert, etc.) L'absence de prise de connaissance du contenu présenté par ce type d'image (non- ou mal-voyance, images désactivées, écoute vocale, ou toute autre raison) nous oblige à fournir l'équivalence pour assurer la compréhension globale du sens de la page. Une solution redondante, et donc éventuellement à proscrire, consiste à expliciter le contenu de l'image dans une légende en dessous... une autre consiste à alimenter la balise alt (en expliquant par exemple : "graphique montrant l'évolution de la courbe des ventes en 2006") et à créer un lien longdesc reprenant, éventuellement sous la forme d'un tableau, les données exposées visuellement. Une légende ou un lien (sur l'image et/ou dans le texte) prévient qu'une description complète est disponible. De cette façon, tout utilisateur pourra accéder à l'information, même si c'est au prix d'une certaine gymnastique supplémentaire.

Le second groupe est constitué des image "illustrant" le sens général mais ne portant pas d'information indispensable non-disponible dans le texte (photo de paysage d'une région décrite, dessin d'un objet présenté, etc.). La balise alt sera alors renseignée explicitement : "photo panoramique de la région".

Le troisième groupe est celui des objets purement graphiques et décoratifs, et dont la présence ou l'absence n'a pas d'incidence sur la perception du contenu (puces-images, coins arrondis, etc.). Ce groupe peut encore se subdiviser en deux sous-groupes : les images dont on a besoin pour respecter une certaine mise en forme sur écran (espace à préserver) et les autres. Pour les premières on renseigne le alt en vide (alt="") ; les autres passeront plutôt en background dans les CSS.
L'inconvénient des images purement graphiques en alt="" est qu'elles figurent dans un contenu où elles n'ont a priori rien à faire : en tant qu'objets de mise en forme elles peuvent donc aussi bien être mises en CSS et être remplacées dans la page par un gif transparent de 1x1px renseigné en taille (width+height) et en alt vide. Un intérêt de la méthode est qu'elles ne perturbent plus le contenu affiché sans CSS, ne laissant apparaître à l'écran (ou sur l'imprimante via la feuille print) que celles ayant du sens à donner.

Le quatrième groupe est celui des images étant à la fois porteuses de sens et décoratives. Imaginons le logo d'une commune posé sur une photo de la ville => le logo porte un sens, la ville en fond ne fait plus ou moins que décorer. Il peut être préférable de découper l'image en deux parties, d'afficher le logo correctement renseigné dans le code (x)html et d'utiliser son div pour afficher la ville en background CSS correctement positionné en x y. C'est une solution intéressante pour les sites fluides prenant une largeur indéterminable à l'écran puisque dépendant de sa résolution et de sa taille. Avec cette méthode le logo est à sa place et le décor urbain court sur toute la largeur de l'écran, y compris quand on le redimensionne manuellement. Si l'image en background n'est utilisée qu'une seule fois on peut la placer en CSS sur cette seule page pour ne pas alourdir inutilement les feuilles de style générales.

Voir aussi le point Accessiweb 1.13 : "Est-ce que la taille utilisée pour chacune des images est appropriée par rapport au contexte dans lequel elle se trouve ?" qui implique une relation précise entre taille et sens.

a+
Bonjour,

Cette question a fait l'objet d'un débat houleux hier soir au boulot.
Nous sommes en phase de test avant livraison d'un site (un webmag pour une mairie), et nous nous sommes un peu disputé sur l'utilité du alt dans des images associés à des articles.

Il y a deux sortes d'articles, ceux en une, avec un surtitre, un titre, une accroche et - des fois (souvent) - une image. Il y a aussi des pages articles, reprenant ces élléments mais avec plus de texte. L'utilisateur a la possibilité de rentrer un titre d'image (title) et une légende. La légende et le titre doivent apparaitre en tant que texte. Le titre sera souvent le crédit de l'image, et la légende restera une légende.

Le problème intervient en page d'accueil, où on s'est demandé si la légende devait être afficher, ou être mise dans le alt, ou les 2. A mon avis, je l'aurai afficher en dessous de l'image et non dans le alt. J'ai expliqué à ma collégue que dans quasiment tous les cas, le rédacteur joindra une photo illustrant l'article (exemples : une photo d'un tgv pour un article sur la création d'une ligne - photo de l'entrainement de rugby pour un article sur le club) mais qui ne serait pas porteuse de sens.
J'appui ma réflexion sur - "qu'est ce que ça donnerait sous lynx". Pour ma part, dire en un malvoyant qu'il y a une photo d'un tgv n'apporte pas grand chose à l'article (exemple : "Photo d'un TGV rentrant en gare").

Elle soutient le contraire, que toute image d'article mérite un alt, qu'un malvoyant ou utilisateur d'un navigateur textuel ou oral sera ravi de savoir qu'il y a une photo qu'il ne peut voir.

Désolé pour ce monologue, mais j'aimerai savoir qui est le plus proche de la vérité. Je ne pense pas qu'il y ait de règles exactes et que l'accessibilité n'est pas une science comme les maths, mais des avis pourrait m'aider à trancher entre ma version et la sienne (sachant que je conçois que ma collégue peut avoir plus raison que moi).

Pour résumer mon problème :
Faut-il mettre un alt dans une image illustrant un article, même si celle-ci n'appporte pas plus à la compréhension du texte ?

Deux exemples accessiweb d'or :
http://www.adapei70.org/ => alt="Photo d'un jeune enfant souriant dans une salle de jeux."
http://grandchalon.fr/ => alt vide pour les images d'articles

Qui a raison, qui a tort ?
Bonjour,

Quand on commence à se jeter à la figure le comportement présupposé de tel ou tel catégorie de handicapé... C'est que la démarche n'a plus rien à voir avec celle de la WAI W3C.

Pour désamorcer le faux problème, revenir aux bases structurelles et abstraire les ingérables contextes de handicap Smiley cligne

HTML est actuellement un langage de structuration de texte. Il a acquis la capacité à inclure des objets non textuels (l'élément img est historiquement un racourci imprévu et partiel de l'élément object, pour tout dire assez boiteux).

Parvenu à ce point, une comparaison amusante entre HTML4.01 -XHTML1.x d'une part et le possible XHTML2.0 de l'autre:
- en HTML, on inclut une ressource graphique (l'image) et on lui donne spontanément une équivalence textuelle faute de mieux en guise de pis-aller : <img alt="foo"...>. Et on se bat pour savoir quoi mettre dans ce fichu alt.
- en XHTML2.0, n'importe quel élément de texte (pour simplifier) peut être optionnellement représenté par un objet graphique si l'agent utilisateur le permet : (en simplifiant) <p src="http://example.org/foo.png">...</p>. Mais, dans cet exemple, le fond du machin reste un simple paragraphe de texte ne posant aucun problème de rédaction... Et le combat cessa faute de raison de continuer à pugiler...

Autrement dit, concrètement: concevoir son contenu en faisant abstraction de la représentation graphique, et en ne prévoyant au départ que le contenu du alt, qui n'est qu'une fraction du texte de la page comme une autre, avec les mêmes besoins de cohérence, de compréhensibilité, de pertinence, d'a-propos dans le fil du discours, etc.

Après, à chacun de voir. Mais personnellement, l'expérience m'a suggéré que cela plaidait rarement en faveur des "Photo d'un TGV rentrant en gare" et autres "vous serez ravis de savoir que là, il y a une photo que je ne vous décrirai pas", lesquels <ici l'inévitable entonnoir />, faisant irruption dans n'importe quel autre forme de discours de ma part, <ici une photo de camisole /> me feraient promptement et sagement expédier <ici, photos de deux messieurs en bouse blanche /> à Charenton <ici, photo des grilles de Charenton /> Smiley ravi

Reste à déterminer comment mettre cela en oeuvre dans le cadre d'un CMS collaboratif ou participatif... Mais là, rendez-vous à Paris Web 2006 om nous aurons sans doute l'occasion d'en parler Smiley cligne

<edit>Le tout faisant abstraction du problème de support et d'emploi de longdesc, pour s'en tenir à la situation actuelle).</>

<re-edit>Je m'inscris donc résolument en faux face au message précédent d'Arsène, auquel je manquais de temps pour répondre jusqu'ici</>
Modifié par Laurent Denis (13 Sep 2006 - 09:51)
Personnellement, quand je ne suis pas en position de codage, mais en celle de correction d'une page existante, je me pose les questions suivantes :
1. est-ce que je peux supprimer l'image de la page sans perdre d'information?
1.1. Si oui, alt=""
1.2. Si non, est-ce que je peux transmettre l'information que m'apporte cette image en quelques mots?
1.2.1 Si oui, je remplis le alt avec ces quelques mots
1.2.2 Si non, je place à proximité immédiate de l'image un texte explicatif, soit sous la forme d'un lien (longdesc doublé par un lien explicite dans le corps du texte), soit sous la forme d'un paragraphe quand l'information n'est pas "trop" riche.

En situation de création de contenu, j'ai tendance à raisonner en XHTML 2.0 Smiley cligne J'écris mes informations en les structurant. Quand, pour diverses raisons, j'ai besoin d'ajouter une image pour donner des informations supplémentaires (par exemple un graphique), je m'arrange dans la mesure du possible pour que le contenu autour décrive au mieux l'information (toujours dans le cas d'un graphique, un paragraphe présente par exemple de manière synthétique avant l'image les évolutions constatées, avec un lien éventuel "Plus de détails" à consulter si besoin est).
En définitive, j'évite comme la peste les images nécessitant un longdesc en plaçant toute description en texte à proximité de l'image (ce qui implique un alt="" pour l'image), et me débrouille pour que le alt, lorsqu'il est nécessaire, ne vienne pas comme un cheveu sur la soupe dans la lecture du texte...
Modifié par Gilles (13 Sep 2006 - 10:39)
Est-ce que la faiblesse des outils ne nous y contraint pas ?
La solution de typologiser les images ne sert qu'à les utiliser "au mieux" ou "au pire" dans le contexte où elles s'insèrent... Le rôle qu'elles jouent en tant qu'acteurs (présentant ou représentant quelque chose) doit être précisé à un moment ou à un autre : il faut bien à partir de là leur conférer un statut. N'étant pas toutes équivalentes en terme de sens (un coin arrondi et un graphique complexe n'ont pas la même fonction dans l'appréhension et la compréhension du contenu distribué) il me semble inévitable de leur attribuer une sorte de hiérarchie qui précise leurs importances et utilités respectives. Que la typologie que j'ai proposée soit incomplète, mal construite, trop sommaire, etc. c'est possible ; que la pertinence d'une hiérarchie typologisée soit néfaste en soi est plus étonnant.

La première phrase de mon post : " La question du statut des images est assez complexe pour mériter d'être abordée sous l'angle du sens qu'elles portent. Celui-ci est étroitement lié au contenu textuel de la page : est-ce que l'image l'enrichit, est-ce qu'elle le répète, est-ce qu'elle l'illustre, est-ce qu'elle le décore ?".... me semblait relier directement l'image au contexte textuel dans lequel elle s'insère ?
Après deux ou trois réflexions en marche arrière et en marche avant je rebondis sur

a écrit :
Autrement dit, concrètement: concevoir son contenu en faisant abstraction de la représentation graphique, et en ne prévoyant au départ que le contenu du alt, qui n'est qu'une fraction du texte de la page comme une autre, avec les mêmes besoins de cohérence, de compréhensibilité, de pertinence, d'a-propos dans le fil du discours, etc.


de Laurent.

L'attribut alt correctement renseigné peut effectivement s'insérer de façon fluide dans le texte et dans le fil du discours :
...la commune de Xyz <img alt="dont cette page présente une photographie"> se situe à.... etc.
=> ceci suppose un insert de l'image à sa place "textuelle", seule condition pour que le contenu de alt joue son rôle fonctionnel à plein régime.

Si l'image est hors-flux textuel mais adjacente, cela peut donner :
...la commune de Xyz, présentée en photo ci-dessous, se situe à.... etc.
<img alt="photo de la commune Xyz">
=> dans ce cas la phrase en italique crée une sorte de "lien organique" entre image et texte.

Autre possibilité :
<img alt="cette photo de la commune Xyz illustre le texte ci-dessous">
...la commune de Xyz se situe à.... etc.
=> où alt introduit une sorte de "relation topologique linéaire" entre image et texte.

Dans tous les cas alt est sûrement plus pertinent qu'un simple <img alt="photo de la commune"> qui se juxtapose simplement au contenu textuel sans l'enrichir ou sans être enrichi par lui, ni même parvenir à relier l'un à l'autre.

Cette façon de voir le rôle fonctionnel de <img alt> n'exclut toutefois pas qu'une typologie des images puisse être envisagée Smiley lol
Curieux acharnement à vouloir insérer des contenus dans cet attribut, qui pourra avec profit être vide dans au moins 2 des 3 exemples ci-dessus. Les alt restent en effet, dans ces exemples, conçus pour "donner idée du rendu avec image". Alors que ce n'est pas cela leur rôle...
Modifié par Laurent Denis (13 Sep 2006 - 14:17)
Je ne suis pas trop d'accord avec Arsene. Le plus simple est encore de reprendre concrétement les recommandations du w3c.

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...

a écrit :
La spécification d'un texte de remplacement représente une aide pour les utilisateurs


Dans l'exemple donné par Arsène, le alt permet de donner un contenu logique au paragraphe, mais n'est en rien une aide pour les utilisateurs. De plus, l'attribut alt est censer donner du sens,renforcer la compréhension, si l'image ne peut être afficher.

En quoi présentée en photo ci-dessous apporte une aide, ou une compréhension supplémentaire à un utilisateur naviguant sans mode graphique. Il ne pourra pas voir la photo, même si elle est ci-dessus.

Bien sûr, ma contre argumentation n'est pas apprendre comme une agression (je dis ça au cas où mon style soit trop sec).
Je pense que cette balise alt, surtout pour les images, est un vrai problème dur à résoudre, et ça mérite un long débat.
Intéressantes remarques qui ouvrent une piste que je croyais relever d'une sorte de micro-tabou : il n'est pas aberrant de distribuer, à partir d'un contenu unique, des "sous-contenus" sélectifs spécifiques. La théorie qui proposait que même si l'aspect se dégrade, le sens du contenu soit restitué le plus intégralement possible, se reformule autrement : il n'est plus impératif de fournir à l'utilisateur final les informations auxquelles il n'a pas accès, que ce soit par ses choix technologiques ou ses contraintes invalidantes. En ne renseignant pas de façon systématique le champ alt d'une photo d'illustration (considérée dès lors comme simple objet graphique relevant de l'aspect visuel) on opère une sorte de choix consistant à dire que cette image ne fait pas partie du "contenu a minima" à transmettre. Le rôle du alt redevient effectivement plus conforme à sa sémantique qui est de fournir une alternative s'il y en a besoin et non de façon systémique, c'est-à-dire qu'il renseigne sur la présence d'une image seulement quand celle-ci joue un rôle crucial dans la compréhension globale.
Cette question en soulève au moins deux autres :
1/ l'auteur du contenu qui nous charge de le transmettre en vue de restitution voit-il les choses comme nous ? (a-t-on le droit de décider que le choix d'un auteur d'accompagner son texte d'une photo n'a pas à être pris en compte dans certains cas ?)
2/ comment établir une typologie (si, si Smiley biggrin ) des images en deux groupes : celui qui sera renseigné en alt et celui qui ne le sera pas ? C'est-à-dire : sous quelles conditions de "contenu visuel" une image bascule d'un côté ou de l'autre ?
La réponse a cette 2ème question met en jeu de nombreux paramètres tels que sa position par rapport au texte, le type d'informations présentes dans l'image, les éventuelles redondances entre l'un et l'autre, etc. ce qui ouvre la porte à interprétations aussi diverses que variées. Est-il possible de dégager une règle pratique satisfaisante ?
Il est souvent dur de répondre à la fois à la demande client (ou du patron) et aux normes établies.

Il faut faire un travail de formation et d'apprentissage des non-techniciens. Pour la majorité des utilisateurs, pour naviguer sur le web on utilise internet explorer (certains ne savent pas qu'ils existent des alternatives à MS). Il faut leur expliquer qu'il existe des utilisateurs soumis à des contraintes.

Dans le cadre d'un article, on peut spécifier une légende qui, selon le ministère de la culture, en terme de presse, ce définit par :

a écrit :
Court texte accompagnant une photo ou un dessin et visant à lui donner un sens. En bonne théorie, aucune photo ne devrait paraître sans sa légende.


Ajouter une légende visible peut être ( à mon humble avis) une réelle alternative au alt, pour des images illustratives. Ainsi, on écarte la seconde question qu'Arsene pose, en se disant que si une image mérite explication, on l'aura dans la légende. De plus, on évite ainsi le risque de redondance (dans beaucoup de site on retrouve la légende de l'image dans le alt et en dessous de l'image).

Bien sûr, je ne parle ici que des images associées à du texte. Pour les images liens ou titre, c'est beaucoup plus facile de trancher.

(je note que c'est super dur de rester clair dans ce débat) Smiley ravi
a écrit :
une réelle alternative au alt...


Opération "boîte de camembert" ? : une alternative à une alternative à une alternative à une alternative..... Smiley lol
Bonsoir,

a écrit :
Est-il possible de dégager une règle pratique satisfaisante ?


Oui : faire simple... Smiley biggol

Je sors...

Jean-pierre
Incidemment :

UWEM (méthodologie unifiée d'évaluation d'accessibilité du web)

a écrit :

Test 1.1_HTML_02

* Procédure de test :
1. Vérifier que l'image/le contenu est purement décoratif.
2. Si #1 est faux, vérifier qu'une alternative textuelle est adjacente au contenu non textuel.

Test 1.1_HTML_03
* Procédure de test :
o vérifier que l'alternative textuelle [12] représente la fonction de l'élément non textuel de manière appropriée dans son contexte.
* Résultats attendus : validé si vrai. Non validé si faux.

renvoi [12] # Si du contenu textuel est adjacent à l'élément non textuel l'alternative textuelle peut être ce contenu textuel associé à la valeur de l'attribut alt des éléments non textuels.


Faut reconnaître que la note 12 mérite d'être relue plusieurs fois... Smiley biggol
Toujours incidemment, mais sans rapport direct avec le sujet :

Accessiweb propose un tableau d'équivalences avec UWEM... Le fameux point 10.3 ("Avec les feuilles de style désactivées, l'ordre d'apparition de l'information est-il respecté par rapport à l'ordre d'apparition initialement défini ?") est proposé comme équivalent à UWEM 6.1.4 ("Vérifier que la signification n'est pas modifiée par des changements dans l'ordre de lecture, provoquées par l'étape 1" [en l'occurence désactiver les CSS].)
Je trouve ça pas équivalent du tout. UWEM reconnaît que l'ordre de lecture peut être modifié mais que la signification doit rester la même...
Pages :