Images Accessibles : Alt Text, ARIA, Best Practices WCAG

Qu'est-ce que les images accessibles ?

Les images accessibles sont des images sur un site web qui transmettent leur sens à tous les utilisateurs — y compris ceux qui ne peuvent pas les voir (utilisateurs screen reader, aveugles, utilisateurs avec images désactivées, search engines). L'outil primaire : l'attribut alt.

L'accessibilité des images est requise par WCAG.

La règle basique : chaque image a besoin d'alt

<img src="chart-q4.png" alt="Q4 revenue grew 23%">
<img src="divider.png" alt="">  <!-- décorative -->

Trois catégories d'images

Comment écrire un bon alt text

• Décrire le but, pas l'apparence.
• Être concis.
• Ne pas dire "image de".
• Matcher contexte.
• Skipper filename-as-alt.
• Tester avec screen reader.

Images décoratives : utiliser alt vide

<img src="ornament.png" alt="">

Images complexes : charts, infographics

1. Description longue dans texte body

<img src="sales.png" alt="Quarterly sales, see below">
<p>Q1: $1M; Q2: $1.2M; Q3: $1.5M; Q4: $4.2M</p>

2. Description cachée avec aria-describedby

<img alt="Sales chart" aria-describedby="chart-desc">
<p id="chart-desc" class="visually-hidden">...</p>

3. Link vers description détaillée

<a href="/diagram-details">Detailed text description</a>

Accessibilité SVG

<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Chart showing growth</title>
</svg>

Best practices accessibilité image

• Chaque <img> a alt.
• But, pas pixels.
• Ne pas utiliser images de texte.
• Captions pour media complexe.
• Tester avec screen readers.
• La couleur n'est pas le seul signal.
• Éviter images CAPTCHA.
• Contraste suffisant pour overlays image.

Pièges accessibilité image courants

• Alt complètement manquant.
• Filename comme alt.
• Alt redondant.
• Préfixe "image de...".
• Alt sur images décoratives.
• Alt long pour complexes.
• Boutons image-only sans alt.
• Background images avec contenu.

Outils pour tester

FAQ : images accessibles

Ai-je besoin d'alt sur images décoratives ?

Oui — alt vide.

Alt devrait-il inclure "image de" ?

Non.

Quelle longueur devrait avoir alt text ?

Concis — typiquement < 125 caractères.

Qu'en est-il des background images en CSS ?

Si décoratif : fine. Si contenu : utiliser <img> avec alt.

Ai-je besoin d'alt sur images logo ?

Oui — typiquement le nom de la compagnie.

Quel est le requirement WCAG ?

WCAG 2.1 Success Criterion 1.1.1.

Comment l'alt text généré par AI aide-t-il ?

Utile comme point de départ, mais vérifier.

Testez performance + accessibilité image avec LoadFocus

LoadFocus exécute des audits Lighthouse depuis 25+ régions, flagging alt manquant + images oversized. Inscrivez-vous sur loadfocus.com/signup.