PERCEPTIBLE : Règle 1.1 Les équivalents textuels

Comprendre la règle 1.1 (en anglais)

Contenus non textuels

Le problème

Les contenus non textuels comme les images ne sont pas perceptibles pour les personnes aveugles ou difficilement perceptibles pour les personnes malvoyantes. De même, un contenu audio n’est pas perceptible par les personnes sourdes ou difficilement perceptibles par les personnes malentendantes.

Comme il s’agit ici de perception, ce sont les personnes ayant des limitations sensorielles qui vivent des situations de handicap si les contenus non textuels ne sont pas transmis sous forme de texte.

Un contenu visuel comme une image peut être informatif ou décoratif. Il en va de même pour un contenu audio. Comme on peut aisément l’imaginer, un contenu jugé purement décoratif n’a pas besoin d’un texte de remplacement. Ce contenu devra donc être intégré de manière à être ignoré par l’utilisateur.

Le texte de remplacement (appelé aussi « équivalent textuel ») d’une image informative doit proposer un contenu équivalent afin de transmettre la même information sous forme de texte. Ce n’est donc pas tant l’apparence de l’image qui importe que sa fonction ou son message.

La solution

Voici quelques consignes à propos des images :

• Les images informatives doivent être insérées dans le code HTML plutôt que dans la feuille de style et avoir un texte de remplacement dans l'attribut alt ;
• Le contenu de l’attribut alt doit être court, quelques phrases avec ponctuation et devrait toujours se terminer par un point final afin d’obliger la synthèse vocale à marquer une pause avant d’enchaîner avec la lecture de la suite ;
• Tout le texte apparaissant sur une image, qu’elle soit ou non utilisée comme lien, doit être repris dans l’attribut alt à moins que ce texte soit décoratif (on peut y ajouter au besoin, mais on ne peut rien y retrancher) ;
• Une série d'images véhiculant un seul message doit avoir un texte de remplacement sur une seule d'entre elle qui donne le message du groupe d'images (ex. 5 étoiles distinctes pour évaluer un seul contenu) ;
• Les images purement décoratives ont des attributs alt et title vides ou sont traitées par la feuille de style ;
  • C'est le cas notamment des puces personnalisées.
• Les images comportant une légende véhiculant un information équivalente ont des attributs alt et title vides ;
• Les liens textuels et les liens-images adjacents doivent être combinés en un seul lien, l'image est alors considérée comme décorative ;
• Une banque de photos à affichage aléatoire doit inclure un alt approprié pour chaque photo de la banque ;
• Les images plus complexes comme les diagrammes, les schémas ou les graphes ne peuvent souvent être décrites en quelques courtes phrases et exigent souvent une structuration de l’information descriptive avec des en-têtes de section, des listes ou des tableaux ;
• Pour les images de ce type, il faut insérer une description complète sur la même page ou sur une autre page :
  • Si cette description est placée sur une autre page, celle-ci peut être atteinte par un simple lien sur l’image et dans le alt de cette image utilisée comme lien on devrait ajouter à la fin la mention suivante : « Ce lien conduit à une description complète. » ;
  • L’attribut longdesc peut aussi être utilisé pour conduire à cette page, l’adresse de la page est alors inscrite comme valeur de l’attribut ;
  • L’attribut longdesc est bien reconnu par les lecteurs d’écran mais n’est par contre d’aucune utilité pour les utilisateurs d’un logiciel de grossissement ou pour tout autre utilisateur ;
• Les images à liens multiples sont accessibles seulement « côté client » et chaque zone sensible doit avoir son propre texte de remplacement ;
• Le alt des images utilisées comme icône de navigation ou bouton de formulaire doit décrire la fonction du bouton plutôt que son apparence ;
• Les dessins réalilsés à l'aide de caractères doivent être présentés sous forme d'image avec un alt, y compris les émoticônes et le leetspeak ;
• S’il s’agit d’un objet ou d’un applet, il faut insérer un texte correctement codé et structuré entre la balise d’ouverture et de fermeture ;
• Ce texte de remplacement peut être du type identification descriptive et peut aussi offrir un lien vers un contenu équivalent sur une autre page ;
• Avec la balise <embed>, il faut placer le texte de remplacement dans la balise <noembed> ;
• Si le contenu non textuel est un test (par exemple un test de perception visuelle ou auditive) ou tout autre contenu qui ne peut être rendu sous une forme textuelle (par exemple, une expérience sensorielle spécifique), l'équivalent textuel doit au moins fournir une identification descriptive de ce contenu ;
  • Exemple : « Thème de la 9e symphonie de Beethoven. » ou « Animation visuelle non représentative intitulée "Évolution" et créée par x en 2002 à l'occasion de l'exposition Images du futur. »
• S’il s’agit d’un CAPTCHA, il faut prévoir plusieurs modalités sensorielles : par exemple, un CAPTCHA visuel, audio, textuel (question simple) ;
• À défaut, il faut prévoir une autre modalité (un contact téléphonique sans frais, par exemple) permettant de franchir cet obstacle ;
• Le texte de remplacement du CAPTCHA visuel pourrait être formulé comme suit : « Image de test dont vous devez recopier les caractères déformés afin de vous identifier comme humain. Ce test vise à rejeter les demandes faites par des programmes informatiques automatisés. Une alternative audio de ce test est aussi offerte. » ;
• S’il s’agit d’un document téléchargeable, ce document est soumis aux mêmes règles pour l’accessibilité qu’un contenu HTML et CSS et doit donc être directement accessible ou être accompagné d’une version entièrement accessible.

Exemple de code

<object type="application/x-shockwave-flash" data="c.swf?path=movie.swf" width="400" height="300">
<param name="movie" value="c.swf?path=movie.swf" />
<img src="noflash.gif" width="400" height="300" alt="image de
remplacement au contenu équivalent." />
<p> Texte de support, au besoin.</p>
</object>

Les règles qui s’appliquent

WCAG 2.0

1.1.1 Contenu non textuel : tout contenu non-textuel présenté à l'utilisateur a un équivalent textuel qui remplit une fonction équivalente sauf dans les situations énumérées ci-dessous. (Niveau A)

• Composant d'interface ou de saisie : si le contenu non textuel est un composant d'interface ou s'il permet la saisie d'informations par l'utilisateur, alors il a un nom qui décrit sa fonction. (Se référer à la Règle 4.1 pour des exigences supplémentaires à propos des composants d'interfaces utilisateur ou des contenus qui permettent la saisie d'informations par l'utilisateur.)

• Média temporel : si le contenu non textuel est un média temporel, alors l'équivalent textuel fournit au moins une identification descriptive du contenu non textuel. (Se référer à la Règle 1.2 pour des exigences supplémentaires concernant les médias temporels.)

• Test : si le contenu non textuel est un test ou un exercice qui serait invalide s'il était présenté en texte, alors l'équivalent textuel fournit au moins une identification descriptive du contenu non textuel.

• Contenu sensoriel : si le contenu non textuel vise d'abord à créer une expérience sensorielle spécifique, l'équivalent textuel fournit au moins une identification descriptive de ce contenu non textuel.

• CAPTCHA : si ce contenu non textuel vise à confirmer que le contenu est consulté par une personne plutôt que par un ordinateur, alors un équivalent textuel est fourni pour identifier et décrire la fonction du contenu non textuel, et des formes alternatives du CAPTCHA sont proposées pour différents types de perception sensorielle afin d'accommoder différents types de limitations fonctionnelles.

• Décoration, formatage, invisibilité : si le contenu non textuel est purement décoratif, s'il est utilisé seulement pour un formatage visuel ou s'il n'est pas présenté à l'utilisateur, alors il est implémenté de manière à être ignoré par les technologies d'assistance.

Comment satisfaire à 1.1.1 (en anglais) | Comprendre 1.1.1 (en anglais)

SGQRI

008-01 : Accessibilité d'un site Web

• 08 a) Une image informative doit être insérée dans une page Web à l’aide de la balise appropriée.
• 08 b) Une image informative doit avoir un texte de remplacement.
• 08 c) Un texte de remplacement doit être indiqué à l’aide de l’attribut alt.
• 08 d) Une image comprenant du texte qui n’est pas seulement décoratif doit avoir un texte de remplacement qui reprend au moins le texte apparaissant dans l’image.
• 08 e) Une image décorative et une image comportant une légende présentant un contenu équivalent à cette image doivent avoir un texte de remplacement vide.
• 08 f) Une zone sensible d'une image à liens multiples doit inclure un texte de remplacement.
• 08 g) Un bouton graphique de formulaire Web ou une icône doit avoir un texte de remplacement indiquant sa fonction.
• 08 h) Un schéma, un graphe, un organigramme ou un diagramme présenté ou non sous la forme d’image doit :
  • soit avoir une description complète sur la même page Web, que cette description soit visible ou non,
  • soit offrir, à l’aide d’un hyperlien ou de l’attribut longdesc, un lien vers cette description sur une autre page Web.
• 08 i) Un objet indiqué à l’aide de la balise < object > et intégré à la page Web doit offrir un contenu directement utilisable par les technologies d'adaptation informatiques ou doit contenir un texte donnant un contenu équivalent.

008-02 : Accessibilité d'un document téléchargeable

• 08 a) Une image doit avoir un équivalent textuel lisible mécaniquement par une technologie d’adaptation informatique.
• 08 b) Une image comprenant du texte qui n’est pas seulement décoratif doit avoir un équivalent textuel qui reprend au minimum le texte apparaissant dans l’image.
• 08 c) Une image décorative et une image comportant une légende présentant un contenu équivalent à cette image doivent être exemptes d’un texte de remplacement.
• 08 d) Une icône ou un bouton graphique doit avoir un équivalent textuel indiquant sa fonction.
• 08 e) Un schéma, un graphe, un organigramme ou un diagramme présenté ou non sous la forme d’image doit comporter une description complète.
• 10 e) Un document téléchargeable doit exclure tout dessin réalisé à l'aide de caractères à moins que celui-ci soit présenté sous forme d’image.

008-03 : Accessibilité du multimédia dans un site Web

• 9. En matière d’image, un objet multimédia intégré dans une page Web doit avoir un texte de remplacement, conformément au standard SGQRI 008-01.
• 10. En matière d’image dans une animation vectorielle :
  • a) une image doit avoir un texte de remplacement lisible mécaniquement par une technologie d’adaptation informatique ;
  • b) une image comprenant du texte qui n’est pas seulement décoratif doit avoir un texte de remplacement qui reprend au minimum le texte apparaissant dans l’image ;
  • c) Une image décorative et une image comportant une légende présentant un contenu équivalent à cette image doivent être exemptes d’un texte de remplacement ;
  • d) une zone sensible d'une image à liens multiples doit inclure un texte de remplacement ;
  • e) une icône ou un bouton graphique doit avoir un texte de remplacement indiquant sa fonction ;
  • f) un schéma, un graphe, un organigramme ou un diagramme présenté ou non sous la forme d’image doit comporter une description complète.
• 12. En matière de présentation dans une animation vectorielle :
  • b) à moins d’être présenté sous forme d’image, tout dessin réalisé à l'aide de caractères doit être exclu.

Aide à la navigation