Business & RSE2 décembre 20255 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 !

Questions fréquentes

Comment rendre une newsletter HTML accessible ?

Les tableaux de mise en page reçoivent role égal presentation, chaque image porte une alternative pertinente ou une alternative vide si elle est décorative, et une version texte brut accompagne l'envoi. L'attribut lang sur la balise html reste indispensable, les clients de messagerie ne devinent pas la langue du message.

Pourquoi mettre role égal presentation sur les tableaux d'un email ?

Parce que l'email HTML utilise encore des tableaux pour la mise en page, faute de prise en charge fiable des dispositions modernes par les clients de messagerie. Sans role égal presentation, un lecteur d'écran annonce le nombre de lignes et de colonnes et tente de lire la structure comme des données.

Faut-il toujours joindre une version texte à un email HTML ?

Oui. Certains clients de messagerie n'affichent pas le HTML, d'autres bloquent les images par défaut, et une partie des utilisateurs configure volontairement l'affichage en texte. La version texte n'est pas un repli dégradé, c'est la seule qui reste lisible dans ces trois cas.

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.

Vidéos RGAA sur ce thème

Pour voir ces sujets en action, regardez les épisodes vidéo correspondants :

Articles similaires

Guides Pratiques

Plan d'action marketing accessible : canaux, ROI et erreurs à éviter

25 août
Technique

La première règle d'ARIA : préférer le HTML natif à ARIA

2 août
Technique

Tableaux de mise en page : pourquoi les éviter et par quoi

18 juil.

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