Pratique exemplaire

Images informatives

• Utilisez l’attribut alt sur l’élément <img>.
• Fournir des équivalents textuels utiles qui ont le même objectif, soit transmettre l’intention, le but et le sens de l’image.
• Ne pas inclure des mots comme « image de » ou « graphique » dans le texte de remplacement.
• Le texte de remplacement doit être concis et comporter moins de 150 caractères.

Images décoratives ou redondantes

• Utiliser des attributs alt « null » (alt="") afin que la technologie d’assistance n’ait pas accès aux Images décoratives ou redondantes.
• L’attribut role=presentation cache également des éléments, même s’il n’est pas aussi largement pris en charge que l’attribut alt.
• Dans la mesure du possible, utiliser des images décoratives comme arrière-plan des feuilles de style en cascades.
• Ne pas omettre l’attribut alt des éléments <img>.

Images fonctionnelles

• Lorsqu'on lie une image et le texte qui l'accompagne, utiliser un attribut null (vide) alt (alt="") sur l'image s'il n'ajoute aucune information au texte du lien.
• Si on utilise une icône pour indiquer que les liens s'ouvrent dans une nouvelle fenêtre, fournir l'alternative textuelle « nouvelle fenêtre ».
• Fournir un texte de remplacement pour les images d’icônes autonomes qui ont une fonction.
• Utiliser un équivalent textuel pour les images utilisées dans un bouton.

Images de texte

• Éviter d’utiliser des images de texte à moins qu’elles ne soient essentielles ou personnalisables.
• Le texte faisant partie d’un logo ou d’un nom de marque est considéré comme essentiel.
• Utiliser le texte proprement dit avec les CSS pour éviter la déformation et la pixélisation lorsqu’on redimensionne.
• Le texte sous forme d’image utilisé comme logo n’est pas assujetti aux exigences en matière d’accessibilité, par exemple le contraste minimum des couleurs et l’absence de texte sous forme d’image.
• Utiliser des images d’expressions mathématiques uniquement lorsque les mathématiques font exception au contenu du site Web. Fournir un équivalent textuel dans l’attribut alt ou dans une longue description.
• Utiliser MathML avec MathJax pour assurer le rendu des expressions mathématiques sur le plan sémantique.

Images liées

• Toujours fournir du texte de remplacement pour toute image servant de lien. Même si l’image est considérée comme décorative, fournir le texte de remplacement si l’image est un lien.

Images animées

• S’assurer que l’animation s’arrête après cinq secondes ou fournir aux utilisateurs un bouton de pause.
• S’assurer que l’animation ne clignote pas plus de trois fois par seconde.

Images complexes

A complex image requires both a short and a long description:

• Une description courte ou un titre décrit l’image et indique l’emplacement de la description longue. Cette description est enregistrée dans l’attribut alt de l’élément <img> et ne doit pas dépasser 150 caractères.
• Une description longue de l’image contient l’information essentielle transmise par l’image. Elle peut se composer uniquement de texte ou peut nécessiter un balisage structurel – en-têtes, paragraphes, listes ou tableaux.

Pratiques exemplaires – Groupes d’images

• Lorsqu’un groupe d’images représente un élément d’information unique : utiliser l’attribut alt et du texte de remplacement pour l’une des images, et utiliser l’attribut alt nul (alt="") pour les autres images afin que la technologie d’assistance ne les prenne pas en charge.
• Lorsqu’un groupe d’images représente une collection : imbriquer chaque image dans un élément de <figure> avec un élément enfant <figcaption> et imbriquer toutes les figures dans un élément de figure à un seul parent. Utiliser l’élément <figcaption> pour décrire le contexte.

Images cliquables

• Décrire le contexte dans l’attribut alt de l’élément <img>.
• Décrire chaque région cliquable dans l’attribut alt de l’élément <area>.

Figure and figcaption

• Utilisez l’élément <figcaption> pour décrire l’information contextuelle qui n’est pas apparente en regardant l’image. Cela comprend les qui, quoi, quand, où et/ou pourquoi d’une image.
• N’utilisez pas exactement les mêmes mots pour le texte de remplacement et l’élément <figcaption>. Les logiciels de lecture à l’écran traiteront l’information deux fois.
• Fournissez toujours un texte de remplacement pour les images même si elles ont un élément <figcaption>. Si vous fournissez un attribut alt vide ou nul, les logiciels de lecture à l’écran ne seront pas en mesure d’annoncer la présence d’une image.

SVG

• Utiliser l’élément <img> et faire référence au SVG au moyen de l’attribut src.
• Utiliser l’élément <svg> pour intégrer le SVG directement dans le code HTML.
• Ne pas intégrer le SVG en utilisant <object> ou <iframe>.
• Pour les images simples et non compliquées avec texte de remplacement descriptif de base
  • Utiliser les attributs <img> et “src=”.
  • Ajouter role="img" pour améliorer le soutien à l’accessibilité.
  • Fournir un équivalent textuel qui communique la même intention et le même sens que l’image.
  • Utiliser l'attribut alt pour fournir du texte de remplacement (préférable).
  • On peut également utiliser une étiquette aria-label ou aria-labelledby pour fournir du texte de remplacement.
• Pour les images complexes avec texte de remplacement descriptif long
  • Utiliser l’élément <svg>.
  • Ajouter role="img" pour améliorer le soutien à l’accessibilité.
  • Fournir un équivalent textuel qui communique la même intention et le même sens que l’image.
  • Utiliser l’élément <title> pour fournir un texte de remplacement court
    • <title> doit être le premier enfant de son élément parent
    • Le texte <title> apparaîtra sous forme d’infobulle lorsque l’utilisateur placera son pointeur de souris dessus.
  • Utiliser l’élément <desc> pour fournir une description de texte plus longue au besoin, pour les images complexes.
  • Le texte d’un élément <desc> n’est pas visible.
  • Se reporter à la section Images complexes pour trouver d’autres stratégies concernant l’affichage des descriptions longues.
  • Pour améliorer le soutien à l’accessibilité :
    • Ajouter des valeurs d’identification uniques appropriées à <title> et <desc>.
    • Utiliser aria-labelledby pour faire référence aux valeurs d’identification.
• Masquer les images SVG décoratives en utilisant aria-hidden="true".
• Concernant le texte dans SVG :
  • Éviter le texte dans les éléments <svg> ou limiter le texte au minimum.
  • Ajouter role="img" pour améliorer le soutien à l’accessibilité.
  • Fournir un équivalent textuel qui communique la même intention et le même sens que l’image.
  • Utiliser l’élément <title> pour fournir un texte de remplacement court
    • <title> doit être le premier enfant de son élément parent
    • Le texte <title> apparaîtra sous forme d’infobulle lorsque l’utilisateur placera son pointeur de souris dessus.
  • Utiliser l’élément <text> pour fournir du texte dans SVG.
  • Pour assurer le soutien à l’accessibilité :
    • Ajouter des valeurs d’identification uniques appropriées à <title> et <text>.
    • Utiliser aria-labelledby pour faire référence aux valeurs d’identification.
  • Mettre du texte à l’extérieur du SVG plutôt qu’à l’intérieur (préférable).
• Inclure une couleur de fond derrière le texte et d’autres parties importantes de l’image.
• Concernant l’animation SVG :
  • Utiliser JavaScript ou CSS, et non <animate>.
  • Éviter les SVG qui clignotent plus de 3 fois par seconde.
  • Éviter les SVG qui se lisent automatiquement pour éviter de distraire les utilisateurs.
  • Permettre aux utilisateurs de lire et d’interrompre les animations SVG.
  • Utiliser un SVG animé pour un usage précis et non pour distraire.
• Concernant le SVG interactif :
  • S’assurer que les objets interactifs <svg> sont accessibles à l’aide du clavier.
  • S’assurer que les objets interactifs <svg> sont accessibles à l’aide de écran tactile.
  • S’assurer que les objets interactifs <svg> indiquent le nom, le rôle et la valeur applicables.
  • Veiller à ce que les objets interactifs <svg> respectent toutes les directives WCAG 2.1 applicables.

CAPTCHA

• Fournir deux modalités différentes de CAPTCHA. Par exemple, assigner une tâche visuelle, comme taper des mots affichés dans une image, et assigner une tâche audio, comme taper des lettres dictées dans un fichier audio.
• Fournir un texte alternatif indiquant que le CAPTCHA exige l’exécution d’une tâche en précisant le type de tâche dont il s’agit; par exemple, « Tapez le mot dans l’image » ou « Tapez les lettres dictées dans l’audio ». Lorsqu’une version de remplacement d’un CAPTCHA est disponible, inclure, dans le texte alternatif, des instructions sur la façon de la trouver.
• Étapes facultatives :
  1. Fournir plus de deux modalités de CAPTCHA.
  2. Donner accès à un représentant humain du service à la clientèle qui peut contourner le CAPTCHA.
  3. Ne pas exiger de CAPTCHA pour les utilisateurs autorisés.
• Utilisez le reCAPTCHA v3 de Google, si possible.

Conseils et astuces supplémentaires concernant les images (pratique exemplaire)

• Prioriser l’information dans un équivalent textuel. Inscrire les renseignements les plus importants au début.
• Utiliser la ponctuation dans l’équivalent textuel pour faciliter la compréhension de l’information.
• S’assurer qu’il n’y a pas de caractère d’espace entre les citations de l’équivalent textuel nul (vide) (alt="").