Badsender

Accessibilité de vos emails : du design au HTML

  • updated on 

Accessibility as a new trend?

Vu le nombre de publications autour du sujet et les hashtags #A11Y qui vont avec, nous pourrions nous demander. Mais chez Badsender, ça nous choque de parler de tendance lorsqu’on parle d’accessibilité.

L’accessibilité est un devoir et c’est une bonne pratique à part entière dans la conception de vos templates HTML email.

Paul Airy comme Litmus l’avaient bien rappelé en 2017 (oui oui 2017).

"Doing nothing is not an option. Email accessibility is our job."

Paul Airy

Et d’autres grands acteurs de l’email, comme EmailOnAcid, évoquaient déjà largement le sujet également.

Il semblerait que le monde de l’Email Marketing se décide enfin à prendre de bonnes résolutions ou du moins le sujet en main. Dès lors que la règlementation, les obligations et potentielles sanctions montrent le bout de leur nez, tout de suite cela fait un peu plus réagir.

Chez Badsender, nous avons eu l’occasion d’entrevoir une partie du travail à effectuer lors de notre participation au Litmus Live from London August 2018. This was just the tip of the iceberg. But we can all, at our level, participate in improving the accessibility of our email marketing campaigns.

"People spend a lot of time worrying about email clients with 1% usage; accessibility is a much bigger issue."

Mark Robbins

Webinar avec Actito : Mardi 9 septembre à 11h30, en ligne, sur inscription

Que vous utilisiez Actito ou non, vous apprendrez forcément de ce webinar. Au programme : ce que dit la loi, des exemples concrets d’emails pour illustrer nos propos, et comment vous mettre en mouvement dès maintenant.

Inscrivez-vous


Table of contents

Pourquoi l’accessibilité et notamment celle des emails ?

L’accessibilité numérique est la mise à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales, des ressources numériques.

Source: Wikipédia : Accessibilité numérique

Nous sommes ici face a des enjeux d’inclusions, d’égalité d’accès à des services ou produits, d’expérience utilisateur (UX).

C’est enjeux sont soumis en Europe depuis le 28 juin 2025 à un cadre légal. Par conséquent des obligations. Quand bien même vous ne souhaiteriez pas vous soumettre à ces obligations, il en va de la performance de vos campagnes, de votre image de marque et des valeurs que vous portez.

Le canal email est souvent le parent pauvre des projets numériques mais il fait partie intégralement de vos processus d’achat, création de compte, suivi de commande…

« A11Y », qu’est-ce que c’est ?

Vous avez peut-être déjà croisé cet acronyme ou hashtag sans trop comprendre. Ni comment le prononcer, ni savoir ce qu’il signifie réellement. Il s’agit de l’abréviation d’accessibilité en anglais.

Les 11 lettres entre le A et le Y de AccessibilitY.

Comme quoi, nous pouvons introduire des problèmes d’accessibilité en traitant du sujet lui même. Une bien belle ironie.

Accessibilité des emails, qui est concerné ?

“Les aveugles, c’est pas ma cible. »

Un retour client

Toute personne faisant de la conception a déjà, malheureusement, été confrontée à ce vilain poncif.

Certes en accessibilité numérique les handicaps visuels sont les premiers évoqués et 1.3 billion people worldwide live with some form of visual impairment selon l’OMS. Toutefois il serait dommage de ne pas prendre en considération l’ensemble des handicaps afin de les confronter à la lecture d’un email.

  • handicap physique : atteinte partielle ou totale de la motricité
  • handicap sensoriel : organes sensoriels
  • handicap mental ou intellectuel : compréhension, connaissances et cognition
  • handicap cognitif : apprentissage, perception de l’environnement

Ce n’est ni exhaustif, ni précis dans les définitions. L’idée ici est de vous sensibiliser.

il y a 80 millions d’handicapés en Europe, soit 16 % de la population ou un Européen sur six. C’est considéré comme la première des causes de discrimination en Europe.

Source: Wikipédia : Handicap

Il n’y a pas de chiffre unique et les différentes publications de la DREES peuvent déjà permettre de se rendre compte de la situation et de sa complexité.

En tout cas si il y a une chose de sûr, que ce soit 20 ou 16 %, si c’était vos indicateurs de performance (ouverture, clic, désabonnement…), vous ne diriez plus que ce n’est pas votre cible ou que vous ne vous en souciez pas !

European Accessibility Act (EAA) : le décret européen

L’EAA, c’est la directive européenne (2019/882) qui a fait beaucoup parlé en ce début d’année 2025. Elle impose, depuis le 28 juin 2025, que de nombreux produits et services numériques soient accessibles aux personnes en situation de handicap.

En résumé, jusque là c’était principalement le secteur public et quelques entreprises privés ciblées. Maintenant l’EAA étend les obligations aux entreprises privées d’au moins 10 salariés et qui réalisent un chiffre d’affaires annuel supérieur à 2 millions d’euros.

Pour autant, ce ne sont pas de nouvelles règles du jeu qui sont arrivées avec l’EAA. Elles existaient depuis bien des années.

EN 301 549 : la norme européenne

Publiée par les organismes de normalisation européens, elle définit les exigences d’accessibilité pour les produits et services TIC (technologies de l’information et de la communication).

Elle a été conçue pour être alignée sur les WCAG (Web Content Accessibility Guidelines).

WCAG 2.1 / 2.2 : le socle technique international

Ce sont les recommandations techniques établies par le W3C (World Wide Web Consortium).

Pour tendre vers une mise en conformité de vos documents HTML (oui les emails que vous envoyez sont des documents HTML), c’est le point de départ d’une grande partie de ce que vous aurez à mettre en place.

RGAA (Référentiel Général d’Amélioration de l’Accessibilité) : application dans le droit français

C’est le référentiel français qui traduit la norme européenne EN 301 549. L’outil qui permet de tester différents critères afin d’évaluer l’accessibilité de vos produits et services numérique.

Je veux juste des emails accessibles, pas des textes de loi et des spécifications techniques

Oui cela fait une entrée en matière un peu longue (bien que non exhaustive et détaillée), mais surtout si vous fouillez un peu plus les différentes sources, vous aurez constaté une chose importante : aucun de ces documents ne parle des emails !

Il est question de site, d’applications, de documents PDF, de liseuse, de terminaux de paiement… mais jamais d’email.

Or c’est bien là que nous, Badsender, avons un problème.

Comment évaluer l’accessibilité si nous n’avons pas de cadre sur lequel nous appuyer ?

D’ailleurs, qu’est que l’on peut vraiment évaluer ?

  • Le template email fournis à l’annonceur (sans contenus)
  • L’email HTML intégré (avec les contenus mais pas importé par l’outil de gestion de campagne)
  • L’email interprété par la boite de réception (croyez moi vous ne voulez pas ça)
  • Si c’est le cas, dans quel client ou web mail
  • Avec quel outil de restitution ou synthèse vocale

Quand on connaît la fragmentation des environnements d’ouverture et l’impact qu’ils ont sur le code, cela veut dire que même malgré nos efforts eux peuvent ruiner tous vos efforts.

Puisqu’il y a un grand vide de ce côté là actuellement, nous avons tranché afin de pouvoir garantir nos livrables. Chez Badsender, nous avons mis en place une grille d’évaluation d’accessibilité qui couvre une soixantaine de critères spécifique à l’email et qui touche aussi bien à la stratégie, aux contenus, au design qu’au code HTML.

Qui doit agir ? Un expert accessibilité email ?

Comme souvent dans une organisation, dans l’idéal il faudrait un référent accessibilité, un porteur ou en tout cas un responsable. Une personnes qui sera garante de la conformité d’accessibilité dans le temps.

Dans les faits ce n’est pas aussi simple. Il faut du budget, un recrutement, de la formation… mais surtout pour vos campagnes emails, vous allez me dire que vous n’avez pas le temps. Et donc, constater les défauts d’accessibilité uniquement après les avoir envoyés. Dommage.

Dans le meilleur des mondes, ce sont tous les intervenants de la chaîne de production. Du brief au livrable :

  • Directeur Artistique au niveau de la charte afin que dès le début nous n’ayons pas de souci.
  • Designer et intégrateur email, c’est le sujet qui nous concerne directement chez Badsender. À nous d’adapter le design comme le code HTML.
  • Contributeurs (équipe marketing, CRM, rédacteurs, traducteurs) afin de mettre en place des contenus (textes, images, liens) qui respectent les bonnes pratiques d’accessibilité.

Nous n’aborderons pas ici l’impact éventuel d’un email builder ou bien de l’outil de gestion de campagne sur l’accessibilité de vos emails. Gardez juste en tête que chaque étape de production peut avoir un impact.

Mais rendre les emails « accessibles » n’est pas si complexe ou contraignant. De petits changements dans le graphisme ou dans les techniques de développement peuvent faire de grosses différences pour vos abonnés.

Les bonnes pratiques d’accessibilité à mettre en place dans le code de vos emails

Spécifier la langue dans laquelle le contenu de l’email est rédigé

Add the attribute lang="" to the tag html HTML code. If the text is in Frenchfill in the lang attribute as follows: lang="en". In English, lang="en". In Spanish, lang="es"and and so on...

<html lang="fr">

Without this indication, a screen reader will use the language in which it is configured by default.

Encode HTML characters correctly

To do this, add the following HTML code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

This code tells the browser or email client what type of characters are expected in the following code.

Provide a title via the title au code HTML

This allows a title to be set on the web page tab when viewing the email in a browser, but also provides context for users of assistive technologies such as screen readers.

Ensure correct rendering of an email on 120 DPI

And especially when using background images. Why? Because DPI scaling is actually an accessibility setting in Windows. As a general rule, the DPI is set to 96 (or a zoom of 100%). However, this has changed as high resolution displays are now set to a default value of 120 (125% zoom) or sometimes 144 (150% zoom). But users themselves can also set the DPI value to a value of their choice. It is therefore important to respect their choice, as it may depend on a visual impairment. The steps :

Add an XML Namespace on the tag html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

Correct DPI for images

This part of the code is added just before the closing of the head.

Use CSS instead of/in addition to HTML attributes

It should be noted that any value specified other than with the unit px will be converted into points. In other words, the values included in the width and height attributes must be filled in via the corresponding CSS properties.

<!-- Option 1: -->
<table border="0" cellspacing="0" cellpadding="0" role="presentation" width="600" style="width:600px;">
<!-- Option 2: -->
<table border="0" cellspacing="0" cellpadding="0" role="presentation" style="width:600px;">

<!-- Option 1: -->
<td width="300" style="width: 300px;">
<!-- Option 2: -->
<td style="width: 300px;">

Chaque image, quelle qu’elle soit, doit avoir un attribut alt

If no attribute alt n’est indiqué, les lecteurs d’écran vont lire le nom du fichier.

L’expérience peut vite s’avérer désagréable. Les textes alternatifs ont un rôle majeur et doivent impérativement être configurés pour que votre courrier soit toujours lisible avant le chargement des images.

Définir le bon texte alternatif permettra aux lecteurs d’écran de décrire avec précision les images. Cependant, si on utilise une image uniquement pour « l’esthétique » de l’email (like a spacer or a shadow), ensure that a alt="" (empty) sur l’image. Cela indique aux lecteurs d’écran de « sauter »/passer ces images.

En revanche, dans le cas où une image a un attribut alt vide mais qu’un lien englobe cette image, un lecteur d’écran will read the url included in the link. It is then preferable 1/ to delete the link or 2/ to fill in an alternative text.

Ajouter l’attribut role= »presentation » sur les tableaux présents dans un mail

HTML tables are not originally made for presentation, except for emails, where tables allow to get an identical result on most email clients, and especially to use some style properties on Outlook (width or padding). Adding this attribute will indicate to screen readers that this is a presentation table, not a data table. This will make reading the content much more intuitive for screen readers, since they will not read the number of rows and cells in the table. On the other hand, if a table present in your HTML code is really present to display data, it will not be necessary to add this attribute. It seems, according to a webinar proposed by EmailOnAcid in collaboration with Net Atlantic, that the role="presentation" attribute has no effect on tables with a border.

HTML is correctly structured, without errors

Et quand les clients mail le permettront, utilisera les rôles ARIA (Assistive/Accessible Rich Internet Applications). Ces rôles permettent de décrire la structure d’un document, tels que les titres, les régions (banners, menu...)Today, unfortunately, some mail clients add incorrect roles to some HTML tags. It is therefore not recommended to use them for the moment, except for the role="presentation" on the table.

Utiliser des balises sémantiques

The tags h1, h2, h3, pAlthough semantic tags provide a better understanding of the hierarchy of email content, they are often discouraged or avoided because some email clients or webmails apply their own styles to these elements, which can cause poor rendering. External margins (margin) are for example one of the graphic formatting applied by default on these tags. To solve this problem, it will sometimes be necessary to apply CSS resets to these tags.

Garder un code concis et le plus léger possible

Codes that are too heavy, or superfluous, can impact loading time. Tools like HTML Tidy Online (based on the W3C Tidy Project) or Dirty Markup can be useful to remove empty, useless, or badly closed tags. This also contributes to an error-free code. To note (thanks Laurent Depoorter) that Tidy seems to have a tendency to remove some tips'n tricks for Outlook or other mail clients.

If the points raised above are particularly focused on visual impairment, it should be noted that there are other forms of disability that require work on web accessibility in general. How will an Internet user who has broken both arms navigate? Or an amputee? Whether the disability is permanent or temporary, our development method can greatly assist in navigation.

"Any implementation of accessibility, however small, is a success."

Paul Airy

Les bonnes pratiques d’accessibilité pour vos contenus et votre design

Insert text in HTML instead of images

Il s’agit de garantir l’accès à l’information en toutes circonstances. Vous voyez ces blocs d’introduction (header) avec une image de fond, un joli texte d’accroche, un code promo mis en forme et un bouton d’action le tout en une seule image. Comment rendre tout ça explicite avec un simple attribut alt ?

Prendre en compte les contrastes de couleurs (et de tailles)

White text on a yellow background can be difficult to read. The Litmus Builder tool allows, among other things, to consult a rendering for "colorblind". Other tools, such as Tanaguru, permettent de connaître le ratio entre deux couleurs.

Il est nécessaire, autant que possible, d’appliquer un ratio minimum de 4.5:1 sur tous les textes d’un email. Pour des textes plus grand que 23px ou des textes en gras supérieurs à 18px, le ratio minimum est encore plus strict, descendant à 3:1.

Une liste d’astuces pour create an accessible color palette can be useful, as well as a tool for to know quickly the ratio between colors, font sizes, etc...

Un paragraphe de texte doit avoir une taille de police supérieure ou égale à 14px

A minimum of 16px for "light" fonts and a line height of at least one and a half times the font size. For optimal readability, it is possible to specify a line-height of at least 150% to each text in an email.

Aligner les textes à gauche

The eye at a reference point pour commencer à lire chaque nouvelle ligne. Bien qu’il soit acceptable de centrer des textes pour des titres ou des boutons, cela devient plus complexe à lire lorsqu’il s’agit de paragraphes de textes. Il est donc déconseillé de centrer ou de justifier des paragraphes de textes.

Beware of animated gifs

Animated gifs too "violent", unstabletoo fast, for avoid epilepsy (It's funny because I'm the first one in my articles to make a probably too intensive use of stupid animated gifs, but I draw the conclusions).

Need help?

Reading content isn't everything. The best way is to talk to us.


Le contenu du message compris dans un gif animé est compréhensible dès la première slide

It's no longer a surprise, Outlook blocks animated gifs on the first image included in the gif. It is therefore essential to propose an understandable content/offer from the first slide. This first slide or status can very well be displayed 0 milliseconds, so that it does not appear on mail clients that correctly display the animated gif.

The content of the links must be meaningful and descriptive

Préférez ainsi « Contactez-nous » à « Cliquez ici ». Le texte renseigné dans le lien doit informer le lecteur de ce qu’il va se passer quand il cliquera sur ce même lien.

Proposez aussi les bons textes, sur les bons supports : « cliquer » pour un mobile qui ne comprend que le « tapotage » semblera peut-être incongru. 

Do not specify an attribute title aux liens

Ils complexifient la lecture par les lecteurs d’écran. À la place, préférez renseigner un contenu pertinent directement dans le texte des liens, ou dans le lien lui-même.

Les liens ne dépendent pas de la couleur pour être identifiés comme tels

They can be indicated by an underline or followed by a symbol (>) .

Maintenir un sens de lecture logique

En déclarant le sens de lecture (gauche droite en occident par exemple), cela permet aussi d’aider les destinataires souffrant de dyslexie à maintenir leur rythme de lecture.

Buttons and links can be easily clicked

By offering a wide and high click zone (area of at least 44px wide by 44px high according to Apple, but opinions differ).

Adapter la tailles des textes pour un affichage sur mobile

A title on two lines for the Desktop version with a 64px typeface may be moved to five or six lines on some resolutions (this is just an example) sans compter les cassures qu’un mot trop long pourrait engendrer si rien n’est fait via les media queries pour en changer la taille.

A l’inverse, un texte de 12px sera (perhaps) encore relativement lisible sur desktop, mais le sera-t-il tout autant sur mobile ?

The media queries are also there to avoid these problems.

Text can be enlarged without being cut

Et par « coupé », j’entends invisible parce qu’il passe sous un autre élément par exemple.

To do the test, display an email in the Firefox browser. Press the Alt key to display the taskbar. Click on View > Zoom > Zoom Text Only. The text should zoom in to 200% without being cut off.

Les bonnes pratiques d’accessibilité pour vos campagnes

Résumer le contenu du message dans le preheader

A possible alternative practice was raised by John Ties in two articles (1|2) consists in concentrating the message content in the email preheader and making the preheader invisible on the screen. With this technique, the preheader does not appear, but will be read by a screen reader or a personal assistant, allowing quick access to the entire offer and message of the email. The little extra: Siri will conclude the reading of the preheader with "Would you like to reply to this email?". À nous donc de rédiger un texte pertinent. John affirme que les résultats obtenus sur leurs tests étaient intéressants.

Les assistants personnels et l’accessibilité

L’accessibilité peut impliquer de faire appel à des outils technologiques : Lecteurs d’écran (VoiceOver for iOS, TalkBack for Android)screen magnifiers, eye-tracking technology, or more simply, personal assistants (Google Home, Apple HomePod, Amazon Echo).

Ces derniers utilisent les instructions vocales pour agir. Nous pourrions donc, potentiellement, demander à un assistant personnel de lire notre courrier électronique. What we would call an "auditory call to action". (in English, The Auditory Call-to-Action : ACTA).

Si la technique ne le permet pas encore sur Google Home, d’autres l’autorisent, comme un support sous iOS avec Siri activé. Et vous pensez peut-être qu’un assistant personnel choisira la version en texte brut pour lire le contenu d’un email ? Vous vous trompez. Un assistant personnel lira la version HTML.

L’accessibilité, un sujet qui ne date pas d’hier pour Badsender

Badsender a déjà évoqué le sujet de l’accessibilité dans l’email marketing, à travers de nombreux articles ainsi que ce guide publié dans sa première version en 2023.

Resources to go even further

And a amazing list of articles, presentations, tools, resources, books, webinars and podcasts on this truly fascinating subject.

Support the "Email Expiration Date" initiative

Brevo and Cofidis financially support the project. Join the movement and together, let's make the email industry take responsibility for the climate emergency.

I want to know more
Share
The author
Picture of Olivier Fredon
Olivier Fredon
With over 15 years' experience and a career path that has taken me from agency to advertiser, I bring a cross-functional, multi-disciplinary vision to your digital projects. I accompany Badsender customers from the very start of a production project right through to completion. I analyze objectives, constraints, organization, teams, budget and deadlines. Depending on the situation, I provide an appropriate response. My obsession? To meet user needs first and foremost.
All publications