Accessibilité mobile : êtes-vous prêt ?

Le texte alternatif, ou texte alt, décrit ce que l'on peut voir sur une image. Il permet de rendre votre site web accessible à tous, y compris aux personnes aveugles ou malvoyantes.

Les lecteurs d'écran lisent à voix haute le texte alternatif, permettant ainsi aux utilisateurs de comprendre ce que représente une image. Le texte alternatif contribue donc directement à l'accessibilité numérique et aide votre site web à respecter les directives WCAG.

Le texte alternatif n'améliore pas seulement l'accessibilité, il renforce aussi votre référencement. Des descriptions claires aident les moteurs de recherche à comprendre le sujet d'une image, ce qui améliore l'expérience utilisateur et les performances de votre site web.

En bref

• Le texte alternatif rend les sites web accessibles à tous.

• Des descriptions claires aident les moteurs de recherche à mieux comprendre votre contenu.

• Le texte alternatif est essentiel pour se conformer aux directives d'accessibilité numérique

Comment rédiger un bon texte alternatif (texte alt)

Vous créez un texte alternatif en ajoutant une brève description à l'élément que vous souhaitez expliquer. Cela peut se faire directement dans le code ou via votre système de gestion de contenu (SGC). Un SGC vous permet de gérer le contenu de votre site web sans nécessiter de connaissances techniques approfondies.

En HTML, vous ajoutez la description à l'aide de l'attribut alt à l'intérieur de la balise img. Cela indique aux utilisateurs (et aux technologies d'assistance) ce que représente l'image. Par exemple :

<img src="flower.jpg" alt="tulipe jaune dans un vase" title="tulipe jaune dans un vase">

En plus de l'attribut alt, vous pouvez également utiliser le Attribut du titre Cela fournit des informations supplémentaires lorsque l'utilisateur survole un élément. Certains lecteurs d'écran lisent le titre plutôt que le texte alternatif. En utilisant la même description dans les deux, vous vous assurez qu'aucune information ne soit perdue.

Pour les boutons et les formulaires, utilisez attributs ARIA tel que étiquette aria ou aria-étiqueté par . Ces descriptions permettent de comprendre la fonction d'un élément, même en l'absence d'indices visuels.

Attribut

But

Exemple

tous

Description d'une image

<img alt=" logo Eye-Able">

titre

Explications supplémentaires

<img title="Logo Eye-Able">

étiquette aria

Décrit boutons ou formulaires

<button aria-label="Envoyer le formulaire">

Différents types d'images

Images informatives

Les images informatives contiennent des informations essentielles. Elles aident les utilisateurs de lecteurs d'écran à comprendre ce qui est affiché visuellement.

Un exemple courant est celui d'un logo. Le texte alternatif doit décrire brièvement ce que représente le logo et à quelle organisation il appartient.

<img src="logo.jpg" alt=" Logo Eye-Able représentant un œil stylisé ." titre=" Logo Eye-Able représentant un œil stylisé .">

Évitez les descriptions vagues comme « belle image » ou « photo ». Concentrez-vous uniquement sur les informations pertinentes.

Un lecteur d'écran lit ce texte à voix haute, permettant ainsi à toute personne ne pouvant voir l'image de reconnaître le logo Eye-Able. Le site web est ainsi accessible et conforme aux directives WCAG.

Exemples :

Mauvais exemple

Bon exemple

« Image d'un graphique »

« Graphique à barres présentant les chiffres de vente pour 2025 »

"Logo"

« Logo Eye-Able avec un œil stylisé »

"Photo"

« Portrait d’un employé travaillant sur un ordinateur portable »

Graphiques et diagrammes

Les graphiques présentent des données et des relations. Le texte alternatif doit expliquer ce que le graphique montre et pourquoi c'est important.

• Pour les graphiques simples, incluez les données clés directement dans le texte alternatif.

• Pour les graphiques complexes, décrivez leur objectif et renvoyez les utilisateurs au texte adjacent pour plus de détails.

Si le diagramme est complexe, décrivez-en simplement l'objectif et renvoyez au texte alternatif ci-dessous pour plus de détails. Cela évite que le texte alternatif ne soit trop long.

Exemple:
<img src="election-chart.jpg" alt="Graphique à barres présentant les résultats des élections. Des explications complémentaires suivent dans le texte."">

Veillez toujours à ce que les chiffres clés soient également disponibles sous forme écrite, afin que chacun puisse accéder à l'information.

Images fonctionnelles

Les images fonctionnelles déclenchent des actions, comme des boutons, des icônes ou des logos cliquables. Le texte alternatif doit décrire l'action. ce que fait l'image , pas ce que ça paraît être.

Exemple:

<a href="https://eye-able.com/"> <img src="logo.jpg" alt="Aller à la page d'accueil d'Eye-Able" title="Aller à la page d'accueil d'Eye-Able"</a>

Le texte alternatif indique ici que l'image renvoie vers la page d'accueil. L'apparence du logo importe peu, seule sa fonction compte.

Bons exemples :

• « Lancer la recherche »

• « Soumettre le formulaire »

• « Page suivante »

Évitez les descriptions visuelles comme « flèche » ou « loupe ».

Images fonctionnelles courantes :

Type d'image

Fonction

Exemple de texte alternatif

icône de recherche

Lancer une recherche

"Lancer la recherche"

Icône Enregistrer

Enregistrez le document

"Sauvegarder"

Flèche vers la droite

Passez à la page suivante

« Page suivante »

Icône Accueil

Aller à la page d'accueil

"Page d'accueil"

Cette approche garantit que chacun, y compris les utilisateurs de lecteurs d'écran, comprenne ce qui se passe lorsqu'ils cliquent sur l'image.

images décoratives

Les images décoratives n'ajoutent aucun contenu. Elles sont là uniquement pour l'ambiance ou le design. Dans ce cas, laissez l'attribut alt vide :

<img src="background-pattern.jpg" alt="">

Les lecteurs d'écran ignoreront ces images, évitant ainsi des interruptions inutiles.

Utilisez les images décoratives à bon escient. Si une photo ou une icône illustre le contenu, elle ne doit pas servir uniquement à la décoration. Dans ce cas, il convient d'ajouter une description.

Liste de contrôle pour les images décoratives :

• L'image ajoute-t-elle du sens ? ?
  Oui → ajouter un texte alternatif.
  Non → laissez l'attribut alt vide.

• Est-ce purement décoratif ?

  Oui → utiliser alt="" .

• Cela fait-il partie d'un bouton ou d'un lien ?

  Non → alors il peut être décoratif.

Une distinction claire entre les images décoratives et informatives contribue à maintenir l'accessibilité de votre site web.

En utilisant le texte alternatif de cette manière, vous rendez votre site web plus compréhensible et plus convivial pour tous.

Comment rédiger un texte alternatif efficace

Un bon texte alternatif permet aux personnes qui ne peuvent pas voir les images de comprendre le contenu. Pour rédiger un bon texte alternatif, décrivez brièvement et clairement ce que l'image représente.

Meilleures pratiques :

• Soyez concis et descriptif

• Évitez les expressions telles que « image de » ou « photo de »

• Concentrez-vous sur ce qui est pertinent dans le contexte.

• Conservez le texte alternatif entre les lignes. 80 à 120 caractères

• Utilisez une orthographe et une grammaire correctes.

Aperçu des lignes directrices

Aspect

Ligne directrice

Exemple

Ouverture

Évitez « l’image de »

« Voiture bleue sur une route de campagne »

Longueur

80 à 120 caractères

« Deux étudiants travaillent sur des ordinateurs portables dans une bibliothèque »

Langue

Clair et correct

Pas d'abréviations ni d'émojis

Se concentrer

Contexte pertinent uniquement

Décrivez ce qui compte

Le texte alternatif contribue également au référencement naturel. Les moteurs de recherche l'utilisent pour comprendre les images, améliorant ainsi leur visibilité dans les résultats de recherche d'images, sans avoir recours au bourrage de mots-clés.

Demandez l'avis d'une personne utilisant un lecteur d'écran ou ne connaissant pas l'image. Sa réponse vous indiquera si votre description est suffisamment claire. Si elle comprend ce que représente l'image, votre texte alternatif est efficace. Votre site web sera ainsi plus accessible et convivial pour tous.

Que se passe-t-il si le texte alternatif est absent ?

Sans texte alternatif, Les lecteurs d'écran annoncent les noms de fichiers comme img123.jpg. Les utilisateurs manquent ainsi des informations cruciales, et votre site web risque d'enfreindre la loi WCAG et la législation sur l'accessibilité.

Conséquences de l'absence de texte alternatif :

• Les utilisateurs ne comprennent pas le contenu

• Votre site ne répond pas aux exigences de la norme WCAG 2.2

• Les organisations risquent des amendes en vertu des lois sur l'accessibilité.

Le texte alternatif garantit l'égalité d'accès et la conformité avec la loi européenne sur l'accessibilité (EAA).

législation sur l'accessibilité numérique

Les lois sur l'accessibilité numérique obligent les organisations à rendre leurs sites web et applications utilisables par tous, y compris les personnes handicapées.

• Les directives WCAG définissent les normes d'accessibilité

• Depuis 28 juin 2025 , le Loi européenne sur l'accessibilité (LEA) s'applique à de nombreux produits et services numériques

• L'application de la loi est supervisée par un groupe diversifié d'agences ou d'institutions (gouvernementales).

Principales obligations :

• Conforme à la norme EN 301 549

• Publier une déclaration d'accessibilité

• Fournir des alternatives textuelles pour les images et les médias

• Surveiller et maintenir l'accessibilité en continu

directives et texte alternatif de WCAG

WCAG 2.2 précise comment le texte alternatif doit être utilisé :

• Chaque image significative a besoin d'un texte alternatif descriptif.

• Les images décoratives utilisent alt=""

• Le contexte détermine ce qui est pertinent

• Testez régulièrement à l'aide des outils d'accessibilité

Points clés de WCAG 2.2 :

Ligne directrice

Explication

Textes alternatifs requis

Chaque image pertinente est accompagnée d'un texte alternatif descriptif.

images décoratives

Utilisez un texte alternatif vide ( alt="" ) si l'image n'apporte aucune information supplémentaire.

Le contexte est important

Décrivez ce qui est pertinent par rapport au contenu de la page.

Testez votre contenu

Utilisez un vérificateur WCAG pour vérifier que vos textes alternatifs répondent aux exigences.

Foire aux questions

1. Comment ajouter un texte alternatif aux images ?

Ajoutez l'attribut alt en HTML ou via votre CMS avec une description courte et claire.

2. Comment rendre le texte alternatif clair pour tout le monde ? ?

Utilisez un langage simple, évitez les détails inutiles et décrivez ce que les utilisateurs manqueraient autrement.

Bon texte alternatif :

• Décrit ce que l'on manque si l'image n'est pas visible.

• Prend en compte les directives WCAG en matière d'accessibilité numérique.

• Cela correspond au sens de la page.

3. Quelles erreurs dois-je éviter ?

Beaucoup de personnes laissent le champ « texte alternatif » vide ou rédigent des phrases trop longues, ce qui rend le site web moins accessible.

Évitez ces erreurs :

1. Laisser le texte alternatif vide

2. Rédiger des descriptions génériques

3. bourrage de mots clés

4. Ajouter un texte alternatif à des images purement décoratives

4. Comment le texte alternatif améliore-t-il le référencement naturel de mon site web ?

Le texte alternatif aide les moteurs de recherche à comprendre le contenu d'une image. Cela peut améliorer le classement de votre image dans Google Images.

Texte alternatif bien rédigé :

• Améliore la visibilité de votre site web.

• Fournit du contexte aux moteurs de recherche.

• Augmente la probabilité que les utilisateurs visitent votre site.

5. L'absence de texte alternatif a-t-elle une incidence sur l'accessibilité ?

Oui, sans texte alternatif, les lecteurs d'écran ne peuvent pas décrire le contenu de l'image. Les personnes malvoyantes sont donc privées d'informations.

Le texte alternatif permet à tous de comprendre le même contenu, qu'ils puissent voir ou non. Cela rend votre site web plus accessible et convivial.

6. Comment puis-je tester mon texte alternatif ?

Utilisez des lecteurs d'écran comme NVDA ou VoiceOver, ou vérifiez votre site avec la plateforme d'accessibilité Eye-Able pour identifier instantanément les textes alternatifs manquants ou peu clairs.

Vous pouvez également utiliser des outils de vérification d'accessibilité, comme notre plateforme Eye-Able. Nous vous indiquons rapidement et facilement si vos textes alternatifs sont manquants ou peu clairs.