Accessibilité des e-mails HTML : Guide pour les développeurs
Créez des e-mails qui fonctionnent pour tout le monde, y compris les personnes handicapées.
Environ 15 % de la population mondiale vit avec une forme de handicap. Beaucoup utilisent des technologies d'assistance comme les lecteurs d'écran pour accéder aux e-mails. La conception accessible des e-mails est à la fois éthique et pratique, car elle améliore souvent l'expérience pour tous.
L'accessibilité des e-mails présente des défis uniques. Les mises en page basées sur des tableaux nécessaires pour la compatibilité multi-clients peuvent perturber les lecteurs d'écran. Ce guide couvre des techniques qui rendent les e-mails utilisables par tous.
Structure sémantique
Utiliser les attributs role
Les tableaux utilisés pour la mise en page doivent être marqués avec role="presentation" pour indiquer aux lecteurs d'écran qu'il ne s'agit pas de tableaux de données :
<table role="presentation" width="100%">
<tr>
<td>
Layout content here
</td>
</tr>
</table>Sans cet attribut, les lecteurs d'écran annoncent la navigation dans le tableau (« ligne 1, colonne 1 »), ce qui est confus pour les tableaux de mise en page.
Hiérarchie des titres appropriée
Utilisez les éléments de titre (h1, h2, h3) dans un ordre logique :
<h1 style="font-size: 24px; margin: 0;">Welcome to Our Service</h1>
<p>Introduction paragraph...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">What's New</h2>
<p>Feature description...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">Getting Started</h2>
<p>Instructions...</p>Les utilisateurs de lecteurs d'écran naviguent par les titres. Une hiérarchie appropriée les aide à comprendre la structure du document et à sauter vers les sections pertinentes.
Utiliser des éléments sémantiques
Là où c'est pris en charge, utilisez du HTML sémantique :
- <p> pour les paragraphes
- <ul>/<ol> pour les listes
- <strong> pour le texte important
- <em> pour l'emphase
Images et texte alternatif
Texte alternatif significatif
Chaque image doit avoir un texte alternatif approprié :
<!-- Informative image: describe the content -->
<img src="product.jpg" alt="Blue running shoes with white soles" />
<!-- Decorative image: empty alt -->
<img src="divider.png" alt="" />
<!-- Image with text: include the text -->
<img src="sale-banner.jpg" alt="50% off all items this weekend" />Directives :
- Décrivez ce que montre l'image, pas le fait qu'il s'agit d'une image
- Gardez le texte alternatif concis (moins de 125 caractères)
- Pour les images décoratives, utilisez alt="" (vide, non omis)
- Si une image contient du texte, incluez ce texte dans alt
Ne pas se fier uniquement aux images
Certains utilisateurs ont les images désactivées. Les informations importantes doivent être en texte, pas seulement en images. Si vous utilisez un bouton image, incluez un lien texte de secours.
Couleur et contraste
Ratios de contraste suffisants
WCAG 2.1 exige des ratios de contraste minimaux :
- Texte normal : ratio de contraste 4,5:1
- Texte large (18 px+ ou 14 px+ gras) : ratio 3:1
<!-- Good contrast -->
<p style="color: #333333; background-color: #ffffff;">
High contrast text
</p>
<!-- Poor contrast (avoid) -->
<p style="color: #999999; background-color: #ffffff;">
Low contrast text
</p>Utilisez des outils de vérification de contraste comme le vérificateur de contraste de WebAIM pour vérifier.
Ne pas utiliser la couleur seule
La couleur ne doit pas être le seul moyen de transmettre des informations :
<!-- Bad: color only -->
<span style="color: red;">Error</span>
<!-- Good: color plus icon/text -->
<span style="color: red;">⚠ Error: Invalid email address</span>Liens et boutons
Texte de lien descriptif
Le texte des liens doit décrire la destination :
<!-- Bad -->
<a href="...">Click here</a>
<!-- Good -->
<a href="...">View your order details</a>
<!-- Good -->
<a href="...">Download the 2026 report (PDF, 2MB)</a>Les utilisateurs de lecteurs d'écran naviguent souvent par les liens. « Cliquez ici » répété plusieurs fois est inutile. Un texte descriptif aide les utilisateurs à comprendre où mène chaque lien.
Indicateurs de focus
Les liens et boutons doivent avoir des états de focus visibles pour les utilisateurs clavier. Bien que les clients e-mail gèrent cela de manière incohérente, vous pouvez essayer :
<a href="..." style="outline: 2px solid #007bff;">
Link text
</a>Langue et lecture
Déclarer la langue
Spécifiez la langue du document :
<html lang="en">Les lecteurs d'écran utilisent cela pour sélectionner la prononciation correcte. Pour du contenu dans d'autres langues, utilisez l'attribut lang sur des éléments spécifiques :
<p>The French word <span lang="fr">bonjour</span> means hello.</p>Tailles de police lisibles
Minimum 14 px pour le texte du corps, de préférence 16 px. Un interligne de 1,4-1,6 améliore la lisibilité :
<p style="font-size: 16px; line-height: 1.5;">
Body text that is easy to read
</p>Test de l'accessibilité
Tests avec lecteurs d'écran
Testez avec de vrais lecteurs d'écran si possible :
- VoiceOver (macOS/iOS) : Intégré, activez avec Cmd+F5
- NVDA (Windows) : Gratuit, largement utilisé
- JAWS (Windows) : Standard de l'industrie, payant
Écoutez comment votre e-mail est annoncé. La structure est-elle claire ? Les images sont-elles décrites ? Les liens sont-ils significatifs ?
Tests automatisés
Des outils comme Litmus et Email on Acid incluent des vérificateurs d'accessibilité. Ils détectent les problèmes courants comme les textes alternatifs manquants et les problèmes de contraste.
Constructeurs d'e-mails et accessibilité
Les bons constructeurs d'e-mails gèrent une partie de l'accessibilité automatiquement. Sequenzy et des plateformes similaires ajoutent role="presentation" aux tableaux de mise en page, demandent un texte alternatif pour les images et génèrent du HTML sémantique.
Des frameworks comme MJML produisent une sortie accessible par défaut. Les composants sont conçus avec les lecteurs d'écran à l'esprit.
Liste de vérification de l'accessibilité
Avant l'envoi :
- Tous les tableaux de mise en page ont role="presentation"
- Toutes les images significatives ont un texte alternatif descriptif
- Les images décoratives ont alt="" vide
- Les titres sont dans un ordre logique (h1, h2, h3)
- Le contraste des couleurs respecte les exigences WCAG
- Les liens ont un texte descriptif
- La langue est déclarée
- La taille de police est au moins de 14 px
En résumé
L'e-mail accessible n'est pas difficile lorsque vous maîtrisez les bases. Utilisez une structure sémantique, fournissez un texte alternatif, assurez le contraste et rédigez des liens descriptifs. Ces pratiques bénéficient à tous les utilisateurs, pas seulement à ceux handicapés.
Si vous utilisez un constructeur ou un framework d'e-mails, vérifiez qu'il suit les meilleures pratiques d'accessibilité. Les bons outils facilitent l'accessibilité. Sequenzy et d'autres plateformes modernes incluent des fonctionnalités d'accessibilité par défaut.