Badsender

Email accessibility: from design to HTML

  • updated on 

Accessibility as a new trend?

Given the number of publications around the subject and the #A11Y hashtags that go with them, we might wonder. But at Badsender, we find it shocking to talk about trends when we're talking about accessibility.

Accessibility is a duty and a good practice in its own right in the design your HTML email templates.

Paul Airy as Litmus reminded us in 2017 (yes, 2017).

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

Paul Airy

And other major email players, such as EmailOnAcid, had already covered the subject extensively.

It would appear that the world of email marketing is finally making good resolutions, or at least taking the subject in hand. As soon as regulations, obligations and potential sanctions appear on the horizon, people immediately start to react.

At Badsender, we had the opportunity to catch a glimpse of some of the work to be done during our participation in the 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

This article is freely available.

It took time and expertise!

This month, thanks to our customer-sponsors: Actito, Cardif, BPI, CMI, Cegeka, Metro, Zenride, Mews, Clarins, Les Editions Croque Futur, Lefebvre Dalloz, Les Echos, FFT. They enable us to publish free content. Thanks to them, Badsender is fulfilling its mission of educating the French-speaking emailing and CRM ecosystem to promote responsible email.

With over 10,000 monthly readers, if only 1% became customers, we'd continue this mission for a long time to come! Become a customer and benefit from our expertise while supporting the production of open knowledge.

See what we can do together



Table of contents

Why email accessibility?

Digital accessibility means making digital resources available to all individuals, regardless of their hardware or software, network infrastructure, native language, culture, geographical location, or physical or mental aptitudes.

Source: Wikipedia : Digital accessibility

We're dealing here with issues of inclusion, equal access to services and products, and user experience (UX).

Since June 28, 2025, these issues have been subject to a legal framework in Europe. This means obligations. Even if you don't wish to comply with these obligations, the performance of your campaigns, your brand image and the values you stand for are at stake.

The email channel is often the poor relation of digital projects, but it is an integral part of your purchasing process, account creation, order tracking...

«What is »A11Y"?

You may have come across this acronym or hashtag without really understanding it. Or how to pronounce it, or what it really means. It's short for accessibility.

The 11 letters between the A and the Y in AccessibilitY.

Which goes to show that we can introduce accessibility issues while dealing with the subject itself. A nice irony.

Who is affected by email accessibility?

“Blind people aren't my target.»

Customer feedback

Anyone involved in design has, unfortunately, been confronted with this ugly cliché.

Of course, when it comes to digital accessibility, visual handicaps are the first to come to mind. 1.3 billion people worldwide live with some form of visual impairment according to WHO. However, it would be a pity not to take into account all types of disability and compare them with the reading of an email.

  • disability physics partial or total motor impairment
  • disability sensory Sensory organs
  • disability mental or intellectual: understanding, knowledge and cognition
  • disability cognitive learning, perception of the environment

It's neither exhaustive nor precise in its definitions. The idea here is to raise your awareness.

there are 80 million disabled people in Europe, i.e. 16 % of the population or one European in six. It is considered the leading cause of discrimination in Europe.

Source: Wikipedia : Disability

There is no single number, and the various DREES publications can already give an idea of the situation and its complexity.

In any case, if there's one thing you can be sure of, it's whether it's 20 or 16 %, if they were your performance indicators (opening, clicking, unsubscribing...), you wouldn't say it's not your target or that you don't care!

European Accessibility Act (EAA): the European decree

The EAA is the European directive (2019/882) that has been much talked about at the start of 2025.. It imposes, since June 28, 2025, In addition, the Group is committed to ensuring that a wide range of digital products and services are accessible to people with disabilities.

In short, until then it was mainly the public sector and a few targeted private companies. Now the EAA extends the obligations to private companies with at least 10 employees and annual sales in excess of 2 million euros.

However, the EAA is not a new set of rules. They had been in place for many years.

EN 301 549: the European standard

Published by European standards bodies, It defines accessibility requirements for ICT (information and communication technology) products and services.

It has been designed to be aligned with the WCAG (Web Content Accessibility Guidelines).

WCAG 2.1 / 2.2 the international technical foundation

These are the technical recommendations established by W3C (World Wide Web Consortium).

Getting your HTML documents to conform (yes, the emails you send are HTML documents) is the starting point for much of what you'll need to put in place.

RGAA (Référentiel Général d'Amélioration de l'Accessibilité): application in French law

This is the French standard translating the European standard EN 301 549. The tool that lets you test different criteria to assess the accessibility of your digital products and services.

I just want accessible emails, not legal texts and technical specifications.

Yes, it's a bit of a long introduction (although not exhaustive and detailed), but if you dig a little deeper into the various sources, you'll have noticed something important: none of these documents mention emails!

There's talk of sites, applications, PDF documents, e-readers, payment terminals... but never email.

And that's where we at Badsender have a problem.

How can we assess accessibility if we don't have a framework on which to base it?

Besides, what can we really evaluate?

  • The email template supplied to the advertiser (without content)
  • Integrated HTML email (with content but not imported by the campaign management tool)
  • The email interpreted by the inbox (believe me, you don't want that)
  • If so, in which client or web mail
  • With which voice output or text-to-speech tool?

When you consider the fragmentation of open environments and the impact they have on code, this means that even in spite of our best efforts, they can ruin all your efforts.

Since there's a big gap in this area at the moment, we've decided to guarantee our deliveries. At Badsender, we have set up an accessibility evaluation grid covering some sixty email-specific criteria strategy, content, design and HTML code.

Who should take action? An email accessibility expert?

As is often the case in an organization, ideally, we'd need an accessibility consultant, a carrier, or at any rate someone in charge. A person to guarantee accessibility compliance over time.

In reality, it's not that simple. You need budget, recruitment, training... but especially for your email campaigns, you'll tell me you don't have the time. And so you only notice accessibility faults after you've sent them. That's a shame.

In the best of all possible worlds, these are all the players in the production chain. From brief to deliverable:

  • Artistic Director in terms of the charter, so that we don't have to worry about anything from the outset.
  • Email designer and integrator, This is the subject that concerns us directly at Badsender. It's up to us to adapt both the design and the HTML code.
  • Contributors (marketing team, CRM, copywriters, translators) to create content (text, images, links) that complies with good accessibility practices.

We won't go into detail here the possible impact of an email builder or campaign management tool on the accessibility of your emails. Just keep in mind that every production stage can have an impact.

But making emails «accessible» isn't all that complex or restrictive. Small changes in graphics or development techniques can make a big difference to your subscribers..

Best accessibility practices for your email code

Specify the language in which the email content is written

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:

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

Provide a title via the title to HTML code

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;">

Every image must have a alt

If no attribute alt is not specified, screen readers will read the file name.

The experience can quickly become unpleasant. Alternative texts play a major role, and must be configured so that your mail is always readable before images are loaded.

Defining the right alternative text will enable screen readers to accurately describe images. However, if an image is used solely for the «aesthetics» of the email (like a spacer or a shadow), ensure that a alt="" (empty) on the image. This tells screen readers to «skip» these images.

On the other hand, if an image has an empty alt attribute but a link encompasses it, a screen reader 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.

Add the role=»presentation » attribute to tables in an e-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

And when mail clients allow it, use ARIA (Assistive/Accessible Rich Internet Applications) roles. These roles can be used to describe the structure of a document, such as titles, regions, etc. (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.

Using semantic tags

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.

Keep the code concise and as light as 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

Good accessibility practices for your content and design

Insert text in HTML instead of images

It's all about ensuring access to information at all times. You see those header blocks with a background image, a nice teaser text, a formatted promo code and an action button all in one image. How do you make all this explicit with a simple alt attribute?

Take into account color (and size) contrasts

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, These are used to determine the ratio between two colors.

As far as possible, it is necessary to apply a minimum ratio of 4.5:1 on all texts in an email. For text larger than 23px or bold text larger than 18px, the minimum ratio is even stricter, dropping to 3:1.

A list of tips for create an accessible color palette can be useful, as well as a tool for to know quickly the ratio between colors, font sizes, etc...

A paragraph of text must have a font size greater than or equal to 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.

Align texts on the left

The eye at a reference point to start reading each new line. While it's acceptable to center text for titles or buttons, it becomes more complex to read when paragraphs of text are involved. It is therefore not advisable to center or justify paragraphs of text..

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.


The content of the message contained in an animated gif is understandable from the very first 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

For example, «Contact us» is preferable to «Click here». The text in the link should tell the reader what's going to happen when they click on it.

Offer the right texts, on the right media: «click» for a mobile that only understands «tap» may seem incongruous. 

Do not specify an attribute title to links

They make it harder for screen readers to read. Instead, fill in relevant content directly in the link text, or in the link itself.

Links do not depend on color to be identified as such

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

Maintain a logical reading direction

Declaring the reading direction (left right in the West, for example) also helps dyslexic recipients maintain their reading rhythm.

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).

Adapt text sizes for mobile display

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) not to mention the breaks that a word that's too long could cause if nothing is done via media queries to change its size.

Conversely, 12px text will be (perhaps) still relatively easy to read on desktop, but will it be just as easy on mobile?

The media queries are also there to avoid these problems.

Text can be enlarged without being cut

And by «cut», I mean invisible because it passes under another element, for example..

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.

Good accessibility practices for your campaigns

Summarize the message content in the 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?". So it's up to us to write something relevant. John says their test results were interesting.

Personal assistants and accessibility

Accessibility can involve the use of technological tools: Screen readers (VoiceOver for iOS, TalkBack for Android)screen magnifiers, eye-tracking technology, or more simply, personal assistants (Google Home, Apple HomePod, Amazon Echo).

These use voice instructions to take action. So, potentially, we could ask a personal assistant to read our e-mail. What we would call an "auditory call to action". (in English, The Auditory Call-to-Action ACTA).

While the technology doesn't yet allow this on Google Home, others do, such as iOS support with Siri enabled. And you might think that a personal assistant would choose the plain text version to read the contents of an email? You'd be wrong. A personal assistant will read the HTML version.

Accessibility, a long-standing issue for Badsender

Badsender has already touched on the subject of accessibility in email marketing, through numerous articles as well as this guide published in its first version in 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