Ever had the frustrating experience of opening an email on your mobile device only to be unable to access its content because the call-to-action buttons are inaccessible?
This sometimes also happens to persons with disabilities when they are faced with digital content that was not created with accessibility in mind. However, as a universal communication tool, it’s important for email to comply with certain accessibility principles.
For this reason, today accessibility is directly related to email deliverability. Anti-spam filters and email systems are increasingly considering errors in accessibility (such as poorly programmed HTML formatting, overly small or stylized fonts, missing alt text or insufficient colour contrast) as spam indicators, which may cause certain emails to be blocked and directly affect the campaign engagement rate.
Are you experiencing other types of deliverability issues? Read our tips on the new rules for Gmail and Yahoo here.
This article presents a few examples and best practices for making your emails more accessible.
En résumé
- What is accessibility?
- The principles of digital accessibility
- Applications of digital accessibility principles in email
- Accessibility is much more than just a legal requirement. It's for everyone!
What is accessibility?
Definition and basic standards of accessibility
Accessibility aims to remove obstacles that may prevent people with disabilities from fully participating in society. It’s about creating environments, services, and products that can be used and appreciated by every individual, irrespective of their physical, sensory, cognitive, or intellectual abilities.
To create a fair and equitable society, the idea of accessibility is closely related to the notion of inclusivity, although there are differences. Inclusivity goes well beyond the concept of accessibility by creating an environment in which people feel welcomed, valued, and respected. It involves promoting a culture of acceptance and understanding.
In the digital world, the guiding principles for ensuring the accessibility of web content (WCAG 2) were developed and standardized by W3C in collaboration with individuals and organizations around the world, the goal being to provide a single set of standards that fulfill the needs of individuals, organizations, and governments no matter where they are located.
Each principle is accompanied by testable criteria for success, ranked according to three levels:
A: Minimum level of conformity
AA: Recommended level
AAA: Most accessible level
The A and AA conformity levels are the most commonly used for evaluating accessibility on the web.
Why is accessibility important?
According to the WHO’s World Report on Disability, approximately one billion people are currently living with a disability and close to 200 million of them have very serious functional issues. In the years ahead, disability will become a growing concern as its prevalence increases due to aging populations and the increased risk for disability amongst the elderly
In Canada, according to the Canadian Survey on Disability, 27 percent of Canadians aged 15 and over have at least one disability: 10.6 percent have limited mobility, 10.9 percent have limited flexibility, 7.4 percent have visual impairments, and 5.6 percent have auditory impairments.
To enable everyone to access content online despite their disabilities, legislation to this effect has been established in countries around the world.
Main regulations and legislation on accessibility
Many countries have implemented laws and regulations to enable people with disabilities to exercise their right to educational, professional, and social integration and to consume digital content based on their needs.
A few examples of established laws and regulations:
The Act to Secure Handicapped Persons in the Exercise of Their Rights with a View to Achieving Social, School and Workplace Integration, established in 2004, provides for certain sanctions for organizations that do not comply with its measures. These sanctions may include notices of violation, corrective measures, fines, and legal proceedings.
The Accessible Canada Act (ACA), implemented in 2019, includes sanctions for non-compliance that can reach up to $250,000.
The Americans with Disabilities Act (ADA), established in the U.S. in 1990, requires companies and online services to be accessible to disabled people. The ADA includes directives on the accessibility of websites and mobile applications, particularly the use of assistive technologies such as screen readers.
The European Accessibility Act (EAA), established in 2019, requires member states of the European Union to implement the directive within their own national laws before June 28, 2022, and to enforce it as of June 28, 2025. The Act covers a variety of products and services that aim to enable disabled people to efficiently access digital content in an independent way.
The principles of digital accessibility
Perceivable, operable, understandable, robust: The four main accessibility principles
Anyone desiring to use the web must have access to content that is:
Application of accessibility principles in emails
Well-structured page layout
1. Hierarchical titling to facilitate reading
Best practices:
- Page layout that is structured and hierarchically ordered using titles: a different font size used for titles, subtitles, and running text which distributes the information throughout the text, thereby avoiding cognitive overload
- Clear and concise titles
- Titles that serve as anchors to facilitate reading
2. The efficiency of single-column page layouts
Best practices:
- Content is presented in one column, which facilitates reading and offers better visibility of information in the email
- The user’s eye is guided through the email’s key information (titles, product images, call-to-action buttons), as opposed to layouts with several columns which may seem more complex and create cognitive overload
- Single-column layouts also make it easier for screen readers to navigate through the email
Understandable and readable text
1. Text and typography that is clear and easy to read
Best practices:
- The vocabulary used is simple and enables readers to easily understand the topic
- Even if the text seems a bit long, it is clear and concise and limited to key information
- The syntax perfectly encapsulates the subject of the article to which the user will be redirected
- Typography is simple and easy to read (lines are neither too thick nor too fine, the font is not overly stylized)
- The line height and font size do not complicate reading
- Text is aligned on the left
Additional tip:
- To ensure text displays well on all email platforms, use a pre-installed web-safe font. Practical tools like Google Font can help you choose an appropriate font.
An intuitive interface that facilitates navigation
1. Fluid navigation within emails, even when using a keyboard
- Navigating between the various elements of an email can be effected using the Tab key and arrow keys
2. Design intuitive buttons
Best practices:
- The button uses the button format and not an image, which allows it to be displayed when images are being blocked
- The use of margins between the button and other elements in the email makes it easier to locate the button
- The colour of the button provides good contrast with the background colour (for example, white on black)
- Button text is clear and simple (ex., “Sign up now” instead of “Learn more”)
- Hypertext links are underscored and accompanied by the visual indicator “>”, which indicates the text is clickable
3. Ensure adaptability on many devices—computers, mobile phones, etc.
Desktop version
Mobile version
Best practices:
- The email adjusts correctly and offers the same experience for both desktop and mobile
- There is no loss of information, the call-to-action button is accessible, the layout adjusts, the text and the order of information do not change
Additional tip:
- Test every email by sending test versions to different email addresses and devices, or use email testing tools like Litmus or EmailsOnAcid
Content optimized for assistive technologies and email loading
Example of an email read by voice reader
Original email
Email read by voice assistant
1. Alternative descriptive text for all non-text content
Best practices:
- All images have alternative text (also called “alt text”)
- The alt text gives as much information as in the blocked image and enables easy comprehension of the information shared in the image
2. Optimize images for email loading and reduce the risk they will be clipped in Gmail
Poor practices:
- Email size is greater than 102 kb and is cut off (clipped) in Gmail
- Overly long loading time for images
- The user must perform an extra click to see the whole email
Additional tips:
- Use the JPG format for photos and images as a general rule
- Use the PNG format for illustrations and images on a transparent background
- Use GIF and APNG formats for animation
- Use tools like JPEGmini (paid), TinyPNG or iloveimg to reduce the size of images without compromising their quality
High-contrast colours and palettes adapted for visual impairments
1. A palette adapted for visual impairments
Examples of how colours are perceived depending on the visual impairment:
Poor practices:
- The email contains a large colour palette, which may make reading harder for people with a visual impairment
- All the titles, text, and call-to-action buttons are in different colours, which may complicate reading and be detrimental to a proper understanding of the information
Additional tip:
Test your emails using a tool like Litmus to ensure that the colours used do not complicate reading for people with a visual impairment
2. High colour contrast between different elements of the email
Poor practices:
- The colours for the title (pink) and the background (white) don’t have enough contrast, which makes reading more difficult
- The colour of the text does not contrast enough with the colour of the last call-to-action button (white on pink), which makes the text hard to see and complicates reading
Testing tool result showing that the colour contrast does not meet AA requirements (the recommended level)
Additional tip:
- Test the colours used in the email with tools like accessible-colors.com
Enriched, structured HTML code
1. Structure and arrange the HTML code for emails
A few examples of HTML code elements that promote accessibility:
- Ensure your HTML elements are complete, that they start with an opening tag <> and end with a closing tag </>
- Also verify that the HTML elements do not contain duplicate attributes
- If you are using an extension module (plug-in) or an element created by a third party, ensure it uses valid HTML markup
- HTML language codes must correspond to ISO language codes to ensure correct interpretation by assistive technologies
- Logically structure your email by using semantic tags, such as <H1>, <H2>, <H3> for titles and <p> for paragraphs
- Avoid specifying the title attribute for links, since this complicates reading by screen readers
- Separate content by using subtitles for each new section and mark headers with the HTML tag <header>
Email accessibility is much more than just a legal requirement. It’s for everyone!
Dans les années à venir, et avec l’évolution de la technologie, offrir des contenus numériques accessibles sera d’une importance capitale pour permettre aux personnes en situation de handicap de répondre à leurs besoins quotidiens de façon autonome, tels que régler des factures en ligne, rester informer, prendre des rendez-vous médicaux, etc.
Pour les courriels, cet article constitue un bon point de départ pour envisager des axes d’amélioration qui demandent parfois peu d’effort et qui peuvent avoir un impact significatif sur l’expérience des personnes en situation de handicap.
Si vous souhaitez obtenir plus d’informations sur l'accessibilité des courriels, n'hésitez pas à nous contacter.
Sources
- Standards et guideline WCAG 2
- Association W3C
- Guide d’accessibilité - Behance
- Litmus
- Association Canadienne des centres de science
- Nation Unies droits de l’Homme
- Passe muraille
- Microsoft
This article was written by Lucie de Almeida with valuable support from Maxime Philippon.
