Introduction
Digital accessibility is above all a question of people: giving everyone the opportunity to access, understand and act in the digital world. This principle of inclusion, essential to any equitable society, is now legislated, affirming that equal access to digital is no longer an option, but a collective duty.
Designing accessible emails means guaranteeing smooth reading, an inclusive experience and compliance built in from the outset. Accessibility isn't an option, it's a requirement.
Content title and language
- Email title: Adding a clear, descriptive title makes it easier to identify the message content, especially in certain reading or preview tools.
- Language of email: Indicating the main language (for example: fr) helps assistive technologies pronounce the text correctly and apply the correct linguistic rules.
This information can be filled in directly in the drag and drop editor from the parameters section of your content.
Good to know: even trivial settings such as content title and language contribute to better comprehension and a smoother reading experience.
Images and alternative texts
Alternative text describes an image for assistive technologies, such as screen readers. Its role is to convey visual information to anyone who cannot see the image.
- Decorative image (e.g.: purely decorative visual): leave the field empty so that the screen reader ignores it.
- Informative image (e.g. product visual, event photo): add a short description that summarizes the essential information.
- Functional image (e.g. social network icon): describe the associated action, for example "Open Facebook page".
- Image type Title (e.g.: visual containing a title): be sure to indicate the title text in the alt field and apply the correct hierarchy. (See next section for details.
These settings can be made directly in the drag and drop editor, in the image component configuration parameters.
Good to know: Well-written alt text makes visuals comprehensible to everyone and improves the clarity of the message, including for people using a screen reader.
Headings and content hierarchy
Headings play an essential role in organizing content and enabling assistive technologies to easily navigate the email.
-
Text title: When a title is added as text in the editor, it's important to choose the right level (H1, H2, H3, etc.) to reflect the content hierarchy. This helps screen readers understand the structure of the message.
Tip: avoid titles entirely in uppercase, as some screen readers can read them letter by letter, making reading less fluid.
-
Title in image: When a visual is used in place of a title (for example in a banner), it is recommended to:
- align the alternative text (alt) with the title content, so that screen readers can render it correctly
- indicate the hierarchical level of the image using the accessibility options available in the editor.
This structuring guarantees better comprehension and facilitates navigation, including with the keyboard.
Good to know: the title in text form remains the most accessible solution and the easiest to maintain. The use of an image title should remain a one-off, when the layout requires it.
Buttons
The text of a button should clearly describe the action it triggers. This allows all users, including those using screen readers, to immediately understand the button's function.
- Explicit button: When the text clearly indicates the action (e.g. "Download guide", "Subscribe to newsletter"), no additional information is required.
- Button not self-explanatory: If the text is too short or imprecise (e.g. "Learn more", "Click here"), it's possible to add an additional description using the aria-label option available in the drag and drop editor's button component. This option allows you to specify the expected action without modifying the appearance of the button.
Good to know: a good button is understood without further explanation. Clear, explicit text is always preferable to an aria-label. The latter should remain a one-off solution, not the default method.
Text sizes
Adapted text sizes make reading easier for everyone, especially for people with low vision or on mobile screens.
- Main text: Choosing a sufficiently large font guarantees fluid reading without the need for zooming.
- Important elements:For titles, buttons (CTAs) and link text, favor a size that makes them easily visible and distinct from the rest of the content.
Checking rendering on different media (computer, mobile, tablet) ensures good readability everywhere.
Good to know: well-sized text benefits all readers and improves both comfort and engagement.
Color and contrast
Good contrast between text and background is essential to ensure readability of content, for all readers.
- Avoid combinations that are too close: some colors can be difficult to distinguish, especially on small text.
- Respect the levels recommended by the RGAA: at least 4:5:1 for standard text and 3:1 for titles and large characters.
- Test your colors: using a contrast checker allows you to quickly verify the conformity of your combinations.
Apply to all important text elements, including headlines, buttons (CTAs) and link text, to keep every piece of information visible and understandable.
Good to know: adequate contrast isn't just a regulatory requirement - it's also a key factor in comfort and readability for all your readers.
Animated graphics
Gifs can add dynamism to emails, but it's important to respect certain limits to preserve the experience for all users.
Good practices:
- Limited duration: a GIF must not exceed 5 seconds.
- Animations per second: respect a reasonable number of frames per second to avoid annoying visual effects or visual fatigue.
Good to know: animations that are too long or too fast may bother some users, particularly those who are sensitive to movement or use assistive technologies. By respecting these limits, emails remain enjoyable and accessible for all.
Conclusion
Applying best practices to create accessible emails ensures truly inclusive and effective emails. Even partial adoption of these recommendations improves readability, navigation and user experience.
Additional articles
What's the use of alternative text?
How to use an image component?
Recommendation on image format and weight
Files accepted in the file library
How to use a button component?
How to check that my url is functional?
Understanding color adjustment in the drag & drop editor