Fournir un équivalent textuel pour les images et les cadres

Cible : tout le monde, et en particulier les personnes déficientes visuelles ou cognitives.
Quand : lors de la conception et lors du développement.

Description :

Mettre, dans toute balise img, un attribut alt pertinent :

  • Pour les images cliquables : préciser la fonction / la cible du lien dans l’attribut alt.
  • Pour les images porteuses d’information : mettre un alt décrivant l’information contenue dans l’image.
  • Pour les images contenant du texte : mettre un attribut alt reprenant au moins le texte de l’image.
  • Pour les images décoratives : mettre un attribut alt vide.
  • Pour les images dont le contenu du alt serait trop long (schémas, graphes…), mettre à proximité de l’image à décrire, sa description sous forme de texte dans la page ou, un lien pointant vers une page HTML contenant cette description.

Mettre un attribut title décrivant le contenu et/ou la fonction de toute frame ou iframe. Si la frame ou iframe ne porte pas d’information pour l’utilisateur (purement technique), la rendre invisible cf. exemple: Masquer les iframe techniques de manière accessible

À vérifier :

  • Toute balise img doit posséder un attribut alt.
  • Pour les images non-porteuses d’information, il est préférable de les passer en image de fond CSS.
  • Pour les graphiques, la solution peut être de mettre un lien sous l’image permettant d’accéder à un tableau de chiffres (le faire apparaître dans la même page ou sur une autre page).

Objectif utilisateur : Permettre l’accès à l’information incluse dans une image pour des utilisateurs qui n’y ont pas accès.

Point bloquant : une image sans description textuelle est inexploitable par des personnes ayant des déficiences visuelles ou celles n’affichant pas les images (mobile, faible bande passante…).

Objectif technique :

Améliorer le référencement naturel.

Exemple valide :
<a href="./home"><img src="logo_orange.jpg" alt="Retour à l’accueil"></a>
<img src="banner_bouquet_famille.png" alt="Bon plan, bouquet famille max à 2 euros par mois pendant 12 mois au lieu de 16 euros.">

Exemple d’alternative vide :
Dans l’exemple ci-dessous, le pictogramme à droite n’a pas besoin d’être vocalisé puisque le texte situé à gauche apporte déjà l’information.
Renseigner l’attribut alt dans ce cas apporterait une information redondante.

exemple d’image décorative

<h3>Le service 24h garanti</h3>
<img src="service-24.png" alt="">

Outils :
L'extension Web developer (possibilité d'afficher les alternatives textuelles de toutes les images).

Référence WCAG :