Les images doivent avoir un texte alternatif

ID de règle: image-alt
Ensemble de règles: axe-core 4.13
Impact sur l’utilisateur: Critique
Lignes directrices: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549, RGAA

Créez des sites Web plus accessibles avec axe DevTools Pro

Recherchez et corrigez davantage de problèmes avec les tests guidés intelligents™ en répondant à une série de questions simples sur le contenu de votre page. Essai gratuit. Aucune carte de crédit nécessaire.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Aveugle
  • Surdicécité

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549
  • RGAA

Critères de réussite WCAG [WCAG 2.1 (A)]

  • 1.1.1: Non-text Content

Critères de réussite WCAG [WCAG 2.0 (A)]

  • 1.1.1: Non-text Content

Critères de réussite WCAG [WCAG 2.2 (A)]

  • 1.1.1: Non-text Content

Directives de la section 508

  • 1194.22: Web based intranet and Internet Information & Applications
  • 1194.22 (a): A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)

Directives pour les testeurs de confiance

  • 7.A: The accessible name and accessible description for a meaningful image provides an equivalent description of the image.
  • 7.B: There is no accessible name and accessible description for a decorative image.

    RGAA

    • 1.1.1: Images (<img> or role="img") that convey information have a text alternative.

    Comment résoudre le problème

    Assurez-vous que tous les éléments informatifs <img> ont un texte alternatif court et descriptif et que tous les éléments décoratifs <img> ont des attributs alt vides (par exemple alt="").

    Il existe trois manières principales d’ajouter du texte alternatif à une image :

    • En utilisant un attribut, par exemple alt <img alt="drawing of a cat" src="...">
    • En utilisant un aria-label c'est-à-dire <img aria-label="drawing of a cat" src="...">
    • En utilisant un attribut aria-labelledby c'est-à-dire <img arialabelledby="someID" src="...">

    Conseils de rédaction de texte alternatif

    Lorsque vous rédigez un texte alternatif, gardez à l'esprit que son objectif est de transmettre des informations aux utilisateurs aveugles sur le contenu et l'objectif de l'image - les utilisateurs aveugles doivent pouvoir obtenir autant d'informations du texte alternatif qu'un utilisateur voyant en obtient de l'image elle-même. Le texte alternatif doit indiquer l’intention, le but et la signification de l’image.

    Lorsque vous rédigez un texte alternatif, il est utile de garder à l’esprit les questions suivantes :

    • Pourquoi le contenu non textuel est-il ici ?
    • Quelles informations présente-t-il ?
    • À quoi sert-il ?
    • Si je ne pouvais pas utiliser le contenu non textuel, quels mots utiliserais-je pour transmettre la même information ou la même fonction ?

    Assurez-vous que tout le texte contenu dans l'attribut est utile. Les mots tels que « graphique », « image », « diagramme » ou les noms de fichiers image ne sont généralement pas très utiles et ne doivent donc pas être utilisés dans le texte alternatif.

    Éléments décoratifs

    Fournissez des attributs « null » alt (en utilisant alt="") pour les images qui ne fournissent pas d’informations ou qui ne nécessitent pas de texte alternatif parce que l’image est décrite dans le contenu de la page. Certains développeurs omettent par erreur l’attribut alt sur les images qu’ils jugent ne pas avoir besoin d’alternatives. Cela n’est pas utile pour les utilisateurs de technologies d’assistance, car les technologies d’assistance, telles que les lecteurs d’écran, lisent souvent l’attribut source (c’est-à-dire le nom de fichier) comme texte de remplacement. Pour indiquer à la technologie d’assistance d’ignorer une image, utilisez un attribut « texte alternatif vierge » : alt=""

    Exemple :

    <img src="line.jpg" alt="">

    Pourquoi c'est important

    Les lecteurs d’écran n’ont aucun moyen de traduire une image en mots qui sont lus à l’utilisateur, même si l’image ne contient que du texte. Par conséquent, il est nécessaire que les images contiennent un texte court et descriptif alt afin que les utilisateurs de lecteurs d'écran comprennent clairement le contenu et le but de l'image.

    Si vous ne pouvez pas voir, tous les types d’informations visuelles, telles que les images, sont complètement inutiles à moins qu’une alternative textuelle numérique ne soit fournie afin que les lecteurs d’écran puissent convertir ce texte en son ou en braille. Il en va de même à des degrés divers pour les personnes malvoyantes ou daltoniennes.

    Description de la règle

    Toutes les images doivent avoir un texte alternatif pour transmettre leur objectif et leur signification aux utilisateurs de synthèse vocale.

    L'algorithme (en termes simples)

    Garantit que chaque élément <img> possède un texte alternatif et soit role="presentation" ou role="none" (ARIA 1.1).

    Ressources

    Pages de cours de l'Université Deque (abonnement requis)

    Contribuer à axe-core sur GitHub

    Autres ressources

    Vous pouvez également consulter ces autres ressources.

    Reportez-vous à la liste complète des règles d'axe 4.13 .

    Ces informations vous ont-elles été utiles ?

    Vous avez déjà donné votre avis, merci..

    Votre réponse a été la suivante :

    Ces informations vous ont-elles été utiles ?
    Date/heure de soumission des commentaires :