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

Critère 1.2 : Pour chaque image de décoration ayant une alternative textuelle, cette alternative est-elle vide ?

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.2 [niveau AccessiWeb : Bronze]

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

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

Test 1.2.a [Bronze] : Pour chaque image de décoration (balise img) ayant un attribut alt, le contenu de cet attribut est-il vide (alt="") ?
Test 1.2.b [Bronze] : Pour chaque zone non cliquable (balise area avec l'attribut nohref), non porteuse d'information et ayant un attribut alt, le contenu de cet attribut est-il vide (alt="") ?
Test 1.2.c [Bronze] : Pour chaque image applet (balise applet) non porteuse d'information et ayant un attribut alt, le contenu de cet attribut est-il vide (alt="") ?
Test 1.2.d [Bronze] : Pour chaque image objet (balise object avec l'attribut type="image/...") non porteuse d'information, l'alternative textuelle entre <object> et </object> est-elle vide ?

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 ?

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.3 [Bronze], 1.5 [Bronze]
WCAG 1.0 (05/05/1999) : 1.1 [P1]
UWEM 1.0 (05/07/2006) : 1.1_HTML_02 [P1]
WCAG 2.0 (30/04/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

Toutes les images de décoration doivent avoir une alternative textuelle vide.

Bénéfices pour les utilisateurs

Certains éléments graphiques n'ont pas de valeur informative. C'est souvent le cas des pixels transparents qui servent uniquement à la mise en page ou aux images utilisées pour décorer les puces d'une liste. Or, tout élément graphique doit impérativement être commenté. Donc, les éléments graphiques servant à la mise en page doivent être commentés par une alternative textuelle vide. Ceci permet aux personnes aveugles notamment, de lire la page avec une plus grande fluidité, puisque les éléments graphiques dotés d'une alternative textuelle vide seront ignorés par leur lecteur d'écran.

Valeur ajoutée pour le site

Bénéfice 1 :
Associer une alternative vide à un élément de décoration ou mise en page, plutôt qu'un texte sans réelle valeur, permet d'alléger le poids de la page.
Bénéfice 2 :
Cela permet également d'éviter, dans le cas d'un lien englobant à la fois du texte et un élément graphique, de décrire l'élément graphique dont l'alternative textuelle serait redondante avec le texte contenu dans le lien.

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 :
- Identifier dans un navigateur graphique toutes les images de décoration.
- Ouvrir le code source de la page Web et sélectionner le code des images de décoration identifiées. Il s'agit du code associé à tous les éléments suivants (exemple de code source : <img src="image.gif" alt="alternative textuelle à l'image" />) :
  - balise img
  - balise img ou object avec l'attribut usemap
  - balises area contenues entre les balises <map name=[...]> et </map>
  - balise applet
  - balise object avec l'attribut type="image/..."
Appliquer le(s) test(s) suivant(s) :
- Test 1.2.a [Bronze] : Pour chaque image de décoration (balise img) ayant un attribut alt, le contenu de cet attribut est-il vide (alt="") ?
- Test 1.2.b [Bronze] : Pour chaque zone non cliquable (balise area avec l'attribut nohref), non porteuse d'information et ayant un attribut alt, le contenu de cet attribut est-il vide (alt="") ?
- Test 1.2.c [Bronze] : Pour chaque image applet (balise applet) non porteuse d'information et ayant un attribut alt, le contenu de cet attribut est-il vide (alt="") ?
- Test 1.2.d [Bronze] : Pour chaque image objet (balise object avec l'attribut type="image/...") non porteuse d'information, l'alternative textuelle entre <object> et </object> est-elle vide ?
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.2.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. Pour chaque image, déterminer s'il s'agit d'une image de décoration
5. Pour chaque image de décoration ayant un attribut alt, vérifier que le contenu de cet attribut est vide (alt="").
6. Si c'est le cas, le test est validé.

Pour le test 1.2.b [Bronze] :

Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "Images" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir les images map [nouvelle fenêtre]"
Chaque images réactive s'affiche avec la liste de ses balises area
Pour chaque image réactive, vérifier que pour chaque zone non cliquable (balise area avec l'attribut nohref) non porteuse d'information et qui a un attribut alt, le contenu de cet attribut est vide (alt="").
Si c'est le cas, le test est validé.

Pour le test 1.2.c [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 Applets / Scripts [nouvelle fenêtre]".
3. Tous les balises applet de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
4. Vérifier que pour chaque image de décoration avec une balise applet qui a un attribut alt, le contenu de cet attribut est vide (alt="").
5. Si c'est le cas, le test est validé.

Pour le test 1.2.d [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 de décoration avec balise object, l'alternative textuelle est vide entre <object> et </object>.
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.2.a [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "CSS" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Désactiver les CSS" puis l'option "Tous les styles".
3. Puis, dans le menu "Images", activer l'option "Afficher les attributs Alt".
4. Pour chaque image, déterminer s'il s'agit d'une image de décoration
5. Pour chaque image de décoration ayant un attribut alt, vérifier que le contenu de cet attribut est vide (alt="").
6. Si c'est le cas, le test est validé.

Pour le test 1.2.b [Bronze] :

Sous Firefox, ouvrir la page à analyser.
Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
Une nouvelle fenêtre apparaît contenant le code source de la page.
En faisant une recherche sur le mot area (ctrl + f), vérifier que le contenu de cet attribut est vide (alt="").
Si c'est le cas, le test est validé.

Pour le test 1.2.c [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
3. Une nouvelle fenêtre apparaît contenant le code source de la page.
4. En faisant une recherche sur le mot applet (ctrl + f), vérifier que chaque image applet non porteuse d'information et ayant un attribut alt, le contenu de cet attribut est vide (alt="").
5. Si c'est le cas, le test est validé.
Pour le test 1.2.d [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. Vérifier que pour chaque image objet non porteuse d'information, l'alternative textuelle est vide (le texte "non spécifié" est affiché pour le champ "Texte alternatif").
5. 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 ou décorative de chaque image (par rapport à son utilisation dans la page Web) afin de choisir l'alternative textuelle qui leur sera associée (alternative vide pour une image de décoration).

Implémentation

L'alternative textuelle d'une image de décoration doit être vide.

Exemple de mauvaise pratique

Pixel transparent commenté par "spacer" :

Exemple de bonne pratique

Pixel transparent non commenté :

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.

Si cette image est décorative, mettez comme alternative textuelle alt="",
Si cette image est porteuse d'information (elle véhicule une information par rapport au contenu auquel elle est associée), mettez comme alternative textuelle alt="Carré bleu signalant un article en solde :",
Si cette image est une image lien, mettez comme alternative textuelle alt="fonction du lien".

revenir en haut de la page

Références

html techniques for WCAG 1.0 (section 7.1) : Short text equivalents for images ("alt-text")
WAI Curriculum : a text equivalent for images and graphical buttons
OpenWeb : Des images accessibles
Plongez dans l'accessibilité : Fournir des équivalents texte pour les images
Jukka Korpela : Simple guidelines on using ALT texts in IMG elements
Ian Hickson : Mini-FAQ about the alternate text of images
WebAIM : Appropriate Use of Alternative Text
Martin Schrode : On accessible advertising

revenir au sommaire de la fiche

revenir en haut de la page