Aller au contenu principal
Business & RSE2 décembre 20258 min

Newsletters accessibles : Les bonnes pratiques email

En Bref : L'essentiel à retenir

  • Les emails HTML utilisent encore des tableaux pour la mise en page, ils doivent avoir role="presentation" pour ne pas perturber les lecteurs d'écran.
  • Chaque image doit avoir un alt pertinent, les images décoratives un alt vide, car les clients mail n'affichent pas toujours les images par défaut.
  • Une version texte brut doit accompagner chaque email HTML pour les clients mail anciens et les préférences utilisateur.
  • Les liens doivent avoir un intitulé explicite, évitez les "cliquez ici" qui ne font pas sens hors contexte.
EmailNewsletterMarketingAccessibilitéHTML

Avec un ROI moyen de 42 € pour chaque euro investi, l'email marketing reste l'un des canaux les plus performants. Mais vos newsletters sont-elles lisibles par tous vos abonnés, y compris ceux qui utilisent un lecteur d'écran ?

Pourquoi l'accessibilité des emails compte ?

  • 15% de la population mondiale vit avec un handicap
  • 300 millions de personnes utilisent un lecteur d'écran
  • Les images sont bloquées par défaut dans de nombreux clients mail
  • Les emails sont lus dans des conditions variées (mobile, bruit, luminosité)

[!NOTE] Un email accessible est aussi un email plus performant : meilleure délivrabilité, moins de spam, plus de clics.

Les contraintes techniques de l'email HTML

Contrairement au web moderne, l'email HTML est coincé dans les années 2000 :

Ce qui fonctionneCe qui ne fonctionne pas
Tableaux HTMLFlexbox / Grid
CSS inlineCSS externe
Images fixesSVG interactif
Liens simplesJavaScript
Attributs altARIA avancé

Structure de base d'un email accessible

CODE
<!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sujet de votre newsletter</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f5f5f5;">
  
  <!-- Tableau de mise en page avec role="presentation" -->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">

        <!-- Contenu principal -->
        <table role="presentation" width="600" cellpadding="0" cellspacing="0">
          <tr>
            <td style="padding: 20px;">
              
              <!-- En-tête -->
              <h1 style="margin: 0; font-size: 24px; color: #1a1a1a;">
                Titre de votre newsletter
              </h1>
              
              <!-- Contenu -->
              <p style="font-size: 16px; line-height: 1.5; color: #333333;">
                Votre contenu ici...
              </p>
              
            </td>
          </tr>
        </table>
        
      </td>
    </tr>
  </table>
  
</body>
</html>

Les règles essentielles

1. role="presentation" sur les tableaux de mise en page

Sans cet attribut, le lecteur d'écran annonce "tableau, 3 colonnes, 5 lignes" pour chaque bloc.

CODE
<!-- Correct -->
<table role="presentation" cellpadding="0" cellspacing="0">

<!-- Problématique -->
<table cellpadding="0" cellspacing="0">

2. lang="fr" sur la balise html

Permet au lecteur d'écran d'utiliser la bonne prononciation.

CODE
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">

3. Titre de l'email (balise title)

Apparaît dans l'onglet du navigateur si l'email est ouvert en web.

CODE
<title>Newsletter Janvier - Nom de votre entreprise</title>

Les images dans les emails

Règle d'or : alt sur TOUTES les images

CODE
<!-- Image informative -->
<img 
  src="produit.jpg" 
  alt="Nouveau produit XYZ - Réduction de 30%" 
  width="300" 
  height="200"
  style="display: block;"
>

<!-- Image décorative -->
<img 
  src="separateur.gif" 
  alt="" 
  width="600" 
  height="1"
  style="display: block;"
>

<!-- Logo cliquable -->
<a href="https://example.com">
  <img 
    src="logo.png" 
    alt="Accueil - Nom de l'entreprise" 
    width="150"
    style="display: block;"
  >
</a>

Pourquoi width et height sont importants

Les dimensions explicites :

  • Réservent l'espace avant le chargement des images
  • Évitent les "sauts" de mise en page
  • Permettent un affichage correct en "images bloquées"

display: block sur les images

Évite les espaces blancs indésirables sous les images dans certains clients.

Les liens accessibles

Évitez les intitulés vagues

CODE
<!-- Mauvais -->
<a href="https://example.com/promo">Cliquez ici</a>

<!-- Mauvais aussi -->
<a href="https://example.com/promo">En savoir plus</a>

<!-- Bon -->
<a href="https://example.com/promo">Découvrir nos offres de janvier</a>

<!-- Si le lien est une image -->
<a href="https://example.com/promo">
  <img src="bouton.png" alt="Découvrir nos offres de janvier">
</a>

Liens avec destination explicite

Pour les lecteurs d'écran qui listent tous les liens de la page :

CODE
<a href="https://example.com/article" 
   title="Lire l'article complet sur notre site">
  Lire la suite
</a>

La version texte brut

Chaque email HTML doit avoir une version multipart/alternative en texte brut.

CODE
NEWSLETTER JANVIER 2025
=======================

Bonjour [Prénom],

Découvrez nos nouveautés du mois...

---

NOUVEAU PRODUIT XYZ
Réduction de 30% jusqu'au 31 janvier
→ En savoir plus : https://example.com/produit-xyz

---

Pour vous désabonner : https://example.com/unsubscribe?email=xxx

Pourquoi le texte brut est essentiel

  • Certains utilisateurs préfèrent le texte brut (accessibilité, rapidité)
  • Améliore la délivrabilité (les spammeurs n'utilisent pas de version texte)
  • Fonctionne sur tous les clients mail, même les plus anciens

Contrastes et couleurs

Ratios minimum

ÉlémentRatio minimum
Texte normal4.5:1
Texte large (≥18px)3:1
Boutons CTA4.5:1

Couleurs de fond

Spécifiez toujours une couleur de fond, car le mode sombre des clients mail peut inverser les couleurs de façon inattendue.

CODE
<td style="background-color: #ffffff; color: #1a1a1a;">
  Contenu avec fond blanc explicite
</td>

Tester vos newsletters

Outils de prévisualisation

  • Litmus : Test sur 90+ clients mail
  • Email on Acid : Prévisualisation + accessibilité
  • Mailtrap : Test d'envoi sans délivrabilité

Test manuel avec lecteur d'écran

  1. Envoyez-vous l'email
  2. Ouvrez-le dans l'app mail native (pas le webmail)
  3. Activez VoiceOver (Mac) ou NVDA (Windows)
  4. Écoutez le rendu et naviguez au clavier

Checklist pré-envoi

  • lang="fr" sur la balise html
  • <title> renseigné
  • role="presentation" sur tous les tableaux de mise en page
  • Toutes les images ont un alt (vide ou descriptif)
  • Les images ont width et height explicites
  • Les liens ont des intitulés explicites
  • Une version texte brut est incluse
  • Les contrastes sont ≥ 4.5:1
  • Le lien de désabonnement est visible et fonctionnel

Les erreurs fréquentes

1. Images-texte sans alt

CODE
<!-- L'utilisateur aveugle ne sait pas ce que contient l'image -->
<img src="titre-promo.jpg">

<!-- Le texte est lu par le lecteur d'écran -->
<img src="titre-promo.jpg" alt="Soldes d'hiver : -50% sur tout le site">

2. CTA invisible hors contexte

CODE
<!-- "Voir" ne veut rien dire dans la liste des liens -->
<a href="...">Voir</a>

<!-- Contexte complet -->
<a href="...">Voir les promotions du mois</a>

3. Tableau de données sans headers

Si vous avez un vrai tableau de données (pas de mise en page), utilisez les balises sémantiques :

CODE
<table>
  <caption>Récapitulatif de votre commande</caption>
  <thead>
    <tr>
      <th scope="col">Produit</th>
      <th scope="col">Quantité</th>
      <th scope="col">Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Article XYZ</td>
      <td>2</td>
      <td>29,99 €</td>
    </tr>
  </tbody>
</table>

Conclusion

Une newsletter accessible n'est pas plus compliquée à créer, elle demande juste de bonnes habitudes : alt sur les images, role="presentation" sur les tableaux, liens explicites et version texte brut.

Ces bonnes pratiques bénéficient à tous : utilisateurs de lecteurs d'écran, personnes avec images bloquées, et même votre délivrabilité.

Testez l'accessibilité de votre site avec RGAA Checker, et appliquez les mêmes principes à vos emails !

Guides RGAA associés

Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :

Critère 1.1

Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.

Critère 5.6

Pour chaque tableau de données, chaque en-tête de colonne et chaque en-tête de ligne doivent être correctement déclarés avec la balise <th>.

Critère 5.4

Pour chaque tableau de données ayant un titre, ce titre doit être correctement associé au tableau via <caption>, aria-label ou aria-labelledby.

Articles similaires

Technique

Tabindex : bonnes pratiques et pièges à éviter

19 févr.
Technique

Écrire du HTML pour les lecteurs d'écran : guide sémantique

10 févr.
Technique

Aria-label et aria-labelledby : Guide pratique avec exemples

7 déc.

Votre site est-il conforme ?

Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.

Lancer un audit gratuitVoir les offres