Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. 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
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

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

Critère 1.1 : Chaque image a-t-elle une alternative textuelle ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Bénéfices pour les utilisateurs

• Bénéfice 1 :
  Les personnes aveugles, par exemple, ne peuvent pas voir les éléments graphiques et n'ont, par conséquent, pas accès à l'information qu'ils véhiculent. Pour consulter une page Internet, elles utilisent soit un navigateur textuel, soit une aide technique du type lecteur d'écran.
  A l'heure actuelle, ces aides techniques interprètent uniquement les données textuelles présentes sur une page. Cela signifie qu'elles ne peuvent pas directement décrire les éléments graphiques.
  Les utilisateurs de ces aides techniques n'auront accès à l'information véhiculée par les éléments graphiques que si le concepteur de la page a pris soin de fournir systématiquement une alternative textuelle à l'ensemble des éléments graphiques. C'est précisément le contenu de l'alternative textuelle qui sera restitué à l'utilisateur par son aide technique.
  Si aucune alternative textuelle n'est associée aux éléments graphiques, les aides techniques vont néanmoins tenter d'afficher une information pour l'utilisateur. Dans la plupart des cas, c'est le nom de fichier de l'élément graphique qui est affiché, par exemple, "ar_000.jpg". Cette information est dénuée de sens pour l'utilisateur. Il y a perte d'information.
  
  
• Bénéfice 2 :
  Les utilisateurs n'ayant qu'une connexion à faible débit ou consultant un site Web via leur téléphone portable, peuvent être amenés à désactiver l'affichage des éléments graphiques dans leur navigateur afin de gagner du temps lors du chargement de la page. Concrètement, lorsque la page est chargée, aucun élément graphique n'apparaît. Ces utilisateurs deviennent ainsi dépendants du contenu de l'alternative textuelle. C'est donc pour eux le seul moyen d'accéder à l'information véhiculée par les éléments graphiques.
  
  
• Bénéfice 3 :
  Les utilisateurs qui ont un reste visuel et qui tentent de déchiffrer le contenu d'une image écrite en texte pourront tirer profit d'une alternative sur cette image. En effet, certains pourront, à l'aide de la souris, afficher l'alternative textuelle de toute image dont ils ne comprennent pas le contenu, en passant leur souris sur l'image.

Valeur ajoutée pour le site

• Bénéfice 1 :
  Le site sera valide selon les spécifications du W3C qui rendent obligatoire la présence de l'attribut alt sur les balises img et area.
  
  
• Bénéfice 2 :
  Certains moteurs de recherche peuvent référencer le contenu de l'attribut alt des éléments graphiques.

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

1. 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" />) :
   • balise img
   • balise img ou object avec l'attribut usemap
   • balises area contenues entre les balises <map name=[...]> et </map>
   • balise input avec l'attribut type="image"
   • balise applet
   • balise object avec l'attribut type="image/..."
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 1.1.a [Bronze] : Chaque image (balise img) a-t-elle un attribut alt ?
   • Test 1.1.b [Bronze] : Chaque zone (balise area) d'une image réactive a-t-elle un attribut alt ?
   • Test 1.1.c [Bronze] : Chaque bouton de formulaire (balise input avec l'attribut type="image") a-t-il un attribut alt ?
   • Test 1.1.d [Bronze] : Chaque image applet (balise applet) a-t-elle un attribut alt ?
   • Test 1.1.e [Bronze] : Chaque image objet (balise object avec l'attribut type="image/...") a-t-elle une alternative textuelle entre <object> et </object> ?
   
   
3. 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.1.a [Bronze] et le test 1.1.c [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. Vérifier que chaque image a un attribut alt.
  5. Si c'est le cas, le test est validé.


• Pour le test 1.1.b [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 "Voir les images map [nouvelle fenêtre]"
3. Chaque images réactive s'affiche avec la liste de ses balises area
4. Vérifier que chaque zone d'une image réactive a un attribut alt.
5. Si c'est le cas, le test est validé.


• Pour le test 1.1.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 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 chacun d'eux a un attribut alt.
  5. Si c'est le cas, le test est validé.


• Pour le test 1.1.e [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 chacun d'eux a une alternative textuelle 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.1.a [Bronze] et le test 1.1.c [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 chaque image a un attribut alt (Note : si aucun attribut alt est présent, le texte "non spécifié" est affiché pour le champ "Texte alternatif").
  5. Si c'est le cas, le test est validé.


• Pour le test 1.1.b [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 area (ctrl + f), vérifier que chaque zone d'une image réactive a un attribut alt.
5. Si c'est le cas, le test est validé.


• Pour le test 1.1.d [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 a un attribut alt.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 1.1.e [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 chaque image objet a une alternative textuelle (Note : si aucune alternative textuelle est présente, 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é ?

La mise en oeuvre de ce critère concerne les développeurs de site Web.

Implémentation

Les seuls moyens de fournir une alternative textuelle à un élément graphique sont :

• soit d'utiliser l'attribut alt des balises img, area, input (avec l'attribut type="image") et applet
• soit d'écrire entre les balises object le texte de l'alternative.