Guide AccessiWeb

Accueil
Mode d'emploi
Structure d'une fiche
Fiches AccessiWeb
- 1) Images
- 2) Cadres
- 3) Couleurs
- 4) Multimédia
- 5) Tableaux
- 6) Liens
- 7) Code exécutable
- 8) Eléments obligatoires
- 9) Structuration de l'information
- 10) Présentation de l'information
- 11) Formulaires
- 12) Navigation
- 13) Consultation
Glossaire
Aide à l'évaluation
Référentiel AccessiWeb
Tables de correspondance
Moteur de recherche
Références
Remerciements
Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Images > Critère 1.6

Critère 1.6 : Pour chaque image porteuse d'information ayant une description détaillée, cette description est-elle pertinente ?

Sommaire de la fiche :

Carte d'identité
Comprendre

Comment évaluer
Comment mettre en oeuvre

Illustrations
Références

revenir en haut de la page

Carte d'identité du critère 1.6 [niveau AccessiWeb : Bronze]

Test(s) AccessiWeb permettant de vérifier le critère 1.6

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

Test 1.6.a [Bronze] : Pour chaque image porteuse d'information (balise img) ayant un attribut longdesc, la description détaillée est-elle pertinente ?
Test 1.6.b [Bronze] : Pour chaque image objet (balise object avec l'attribut type="image/...") ayant une description détaillée entre <object> et </object>, cette description détaillée est-elle pertinente ?

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Fiche du critère 1.1 : Chaque image a-t-elle une alternative textuelle ?
Fiche du critère 1.3 : Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?
Fiche du critère 1.4 : Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative a-t-elle une longueur maximum de 80 caractères (hors cas particuliers) ?
Fiche du critère 1.5 : Chaque image porteuse d'information a-t-elle si nécessaire une description détaillée ?

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

Référentiel AccessiWeb 1.0 (19/12/2003) [version utilisée dans le Référentiel Accessibilité ADAE 2004] : 1.11 [Bronze]
WCAG 1.0 (05/05/1999) : 1.1 [P1]
UWEM 1.0 (05/07/2006) : 1.1_HTML_04 [P1]
WCAG 2.0 (11/12/2008) : 1.1.1 [A]
mobileOK 1.0 (02/11/2006) : 4.8 [mobileOK Basic]
RGAA : pas de correspondance (aucune version datée du RGAA n'est disponible en ligne à la date de publication de ce guide).

revenir en haut de la page

Comprendre

Comprendre le critère

La description détaillée des images porteuses d'information doit être pertinente. Elle doit apporter une information supplémentaire et nécessaire par rapport au contenu de l'alternative textuelle de l'image.

Bénéfices pour les utilisateurs

Certains éléments graphiques véhiculent une information dont la transcription, par la longueur du texte qu'elle nécessite, ne peut être fournie par l'attribut alt. Or, les utilisateurs aveugles qui ne peuvent voir les images, ou ceux qui désactivent le chargement des images, ont parfois besoin d'une description détaillée pour en comprendre le sens. De même, les personnes malvoyantes ou les personnes souffrant d'un handicap cognitif peuvent éprouver des difficultés à "déchiffrer" une image complexe et porteuse d'information. Ils pourront donc aussi tirer profit d'une longue description associée aux images complexes.

Valeur ajoutée pour le site

Toute information publiée sous forme de texte dans un site, possède toujours l'avantage d'apporter une meilleure lisibilité de celui-ci et donc un meilleur référencement par les moteurs de recherche.

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

Sélectionner le(s) élément(s) à tester : ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <img src="image.gif" alt="alternative textuelle à l'image" longdesc="description_detaillee.html" />) :
- balise img
- balise img ou balise object avec l'attribut usemap
- balise object avec l'attribut type="image/..."
Appliquer le(s) test(s) suivant(s) :
- Test 1.6.a [Bronze] : Pour chaque image porteuse d'information (balise img) ayant un attribut longdesc, la description détaillée est-elle pertinente ?
- Test 1.6.b [Bronze] : Pour chaque image objet (balise object avec l'attribut type="image/...") ayant une description détaillée entre <object> et </object>, cette description détaillée est-elle pertinente ?
Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

Evaluer avec la Barre d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

Pour le test 1.6.a [Bronze] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Images" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des images".
3. Tous les éléments graphiques de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
4. Sélectionner les images porteuses d'information
5. Vérifier que pour chaque image porteuse d'information avec un attribut longdesc, le contenu de cet attribut est pertinent.
6. Si c'est le cas, le test est validé.
Pour le test 1.6.b [Bronze] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des fichiers multimédias [nouvelle fenêtre]
3. La liste des balises object apparaît. Cliquer sur le lien "Source" pour afficher l'extrait de code source correspondant.
4. Vérifier que pour chaque image objet qui a une description détaillée, le contenu de celle-ci est pertinent.
5. Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

Pour le test 1.6.a [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Médias".
3. Une nouvelle fenêtre apparaît et tous les éléments graphiques s'affichent sous forme de liste.
4. A partir du champ "Description longue", ouvrir l'information contenu dans l'url de la description détaillée.
5. Vérifier que pour chaque image porteuse d'information ayant un attribut longdesc, la description détaillée est pertinente.
6. Si c'est le cas, le test est validé.
Pour le test 1.6.b [Bronze] :

Sous Firefox, ouvrir la page à analyser.
Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Médias".
Une nouvelle fenêtre apparaît et tous les éléments graphiques s'affichent sous forme de liste.
Dans le champ "Texte alternatif", vérifier que pour chaque image objet ayant une descrition détaillée, la description détaillée est pertinente.
Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

Qui est concerné ?

Les personnes en charge du contenu, en concertation avec les graphistes, doivent déterminer la valeur informative, illustrative ou décorative de chaque élément graphique afin de choisir l'alternative textuelle qui leur sera associée.

Implémentation

Différentes méthodes sont possibles. A chacun d'utiliser celle qui correspondra le mieux à ses contraintes (graphiques, éditoriales, etc.) :

Soit mettre une légende texte explicite à proximité de l'image
Soit utiliser l'attribut longdesc pour associer un commentaire plus détaillé.

Mais les règles suivantes doivent être respectées :

Le contenu doit être une description de l'élément graphique associé,
le contenu doit être compris par tous les internautes,
le contenu doit apporter des informations supplémentaires,
le contenu doit être dans la langue du site.

Exemple de mauvaise pratique

Le site www.unsitecorporate.com publie une photo de groupe représentant le conseil d'administration.
Inclure la description de cette photo par l'intermédiaire de l'attribut alt risque de dépasser la limite autorisée pour la longueur des alternatives textuelles. Ainsi, il faut éviter le code suivant :

Exemple de bonne pratique

En reprenant l'exemple précédent, on ajoute l'attribut longdesc :

Le fichier "conseil_admin.html" contient :
"en partant de la gauche : M.Jean, directeur - M.Pierre, directeur - M.Claude, directeur - Mme.Henry - PDG, Mlle Juliette - Directrice."

revenir en haut de la page

Illustrations

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

Un camembert des recettes d'une société

Cette copie d'écran présente un camembert statistique des recettes d'une société. L'alternative textuelle ne suffit à décrire entièrement l'information véhiculée par ce graphique. Il faut donc lui associer une description détaillée.

Description textuelle du camembert

Cette copie d'écran présente la page qui contient la description associée au camembert. Le texte décrit, la valeur et la signification de chaque portion.

revenir en haut de la page

Références

html techniques for WCAG 1.0 (section 7.2) : Long descriptions of images
WAI Curriculum : a text equivalent for graphical representations of text (including symbols)
stuffandnonsense.co.uk : Descriptive content to images

revenir au sommaire de la fiche

revenir en haut de la page