Some believe you can’t create an email that’s both interactive and accessible. If this is the case, we face a tough choice: Do we ask subscribers with disabilities to “please skip this email,” or do we offer less engaging content to everyone else? It’s a difficult decision, indeed.
Unsatisfied with the idea of choosing, we’ve sought a middle ground — a solution that successfully merges accessibility with interactivity. Our goal is to create content that is both universally accessible and enjoyable.
A brief overview of why each email category is important
While many of us are already familiar with these categories, let’s quickly revisit why each one matters.
Email accessibility
Email accessibility ensures that emails are designed to be easily used by everyone, including people with disabilities. The goal is to create an inclusive experience that allows all recipients to access, navigate, and interact smoothly with your emails, regardless of their physical abilities.
Email accessibility matters because each and every one of your email recipients matters. They’re people (not merely data records or email addresses) who receive your emails because they’ve engaged with your organization or signed up to hear from it.
Let us talk stats
Out of the world’s 8 billion people:
- 2.2 billion have vision problems;
- 300 million are color-blind;
- 968 million have motor disabilities;
- 1.6 billion have cognitive and learning disabilities, including dyslexia and photosensitive epilepsy.
Not to be dramatic, but that totals 5 billion individuals.
5bln
people have some form of disability
The likelihood that some of your subscribers fall into these categories and would benefit from accessible emails is quite high.
Email interactivity
Email interactivity allows recipients to engage directly within the email, eliminating the need to leave their inboxes. This includes measuring NPS scores, gamification, providing ratings, filling out open forms, booking meetings, and more.
Let us talk stats
- embedded interactive forms and surveys can boost user response rates by an impressive 520%;
- gamification in emails can boost your ROI by 300%.
Other benefits of interactivity
- increased email engagement;
- easier data collection;
- enhanced user experience;
- brand differentiation and awareness;
- higher conversion rates.
These stats and benefits show that it is impossible to stick to only one of the categories. So, why is it difficult to use both accessibility and interactivity at once?
Explaining the conflict between email accessibility and interactivity
We’ll name a few major ones.
1. Coding conflict
Balancing interactivity and accessibility in email creation introduces two fundamental coding conflicts, particularly for screen reader users:
Interactive email is a hack; it’s not using code for its intended purpose, so our code will not match the correct semantic markup standards.
- hacking email code for interactivity means deviating from established semantic markup standards;
- lack of JavaScript support by email clients.
In order to support both interactive and accessible content, email clients and ESPs would have to support JavaScript, which they don’t.
2. Design conflicts
For individuals with visual impairments, asking them to engage in tasks that involve clicking on small dots or playing “Find the Differences” games with tiny elements can be extremely challenging unless these interactive features are significantly enlarged.
Similarly, people with color blindness cannot be expected to distinguish colors that highlight correct answers or follow instructions that rely on color differentiation.
Individuals with motor skills disabilities may struggle to interact with small elements that require precise actions like clicking or tapping, or with games demanding quick reflexes, such as “whack-a-mole.”
Additionally, individuals with photosensitive epilepsy may face difficulties or risks with emails containing flashing lights or rapidly changing visuals.
3. Audio conflict
Although games in emails rarely incorporate sound, some emails do include embedded videos with instructions or congratulatory messages. These videos are fantastic and make for an enjoyable experience; however, without subtitles, individuals with hearing disabilities might not understand the key messages in these videos.
Workarounds and tips for each conflict
It is obvious: When faced with the choice between accessibility and interactivity, the priority must always be accessibility.
It’s important to remember that interactivity is optional, but accessibility is essential.
Software engineer at Parcel, admin at Email Markup Consortium.
But let’s explore how we can achieve both, shall we?
1. Workarounds for the coding conflict
Before delving deeper, we asked Sarah Gallardo, “Is there a polite and considerate way to inform those using screen readers that they can simply skip the game and proceed directly to the content, such as discounts or new product announcements, which are often the game’s purpose?”
Letting recipients who use screen readers just skip the interactive content is a well-intentioned idea, but I don’t like it. ‘Sorry, disabled user, but your legal right to the same content isn’t important to us, so you won’t be able to interact with this email’ doesn’t have a polite translation. There just isn’t a nice way to exclude someone.
A lead email developer at Oracle.
Despite these challenges, the goal remains to find a balance where interactive content is both engaging and accessible to all. This requires a fundamental rethinking of how we build email interactions from the ground up.
Expert
Software engineer at Parcel, admin at Email Markup Consortium
There are a few things you can do to improve accessibility and create a more usable experience. Although it’s important to note that this doesn’t make the interactions fully accessible; it just helps to make them a little less inaccessible.
Don’t hide inputs
It’s common to see checkboxes and radio inputs set to “display: none.” This approach hides them from view but also means they are no longer focusable and can’t be clicked from a keyboard input.
Include a focus state
Once you have fixed the above issue, add focus styles to the input so recipients can see where they are when tabbing through the content. Typically, this is done by adding an “outline” style to the clickable element that controls the state of the interaction.
Describe the interactions to screen readers
Screen readers might announce something like “radio button 1 of 4 checked.” When used for something like an image gallery, that’s not very informative. However, if we wrap the interactive section in a “role=“group” with a descriptive label, like “aria-label=“interactive image gallery that uses radio buttons to control slides,” it can better inform recipients of what to expect.
Online version
Finally, consider creating an online version of the email that uses JavaScript, enabling a fully accessible experience without compromising interactivity.
2. Workaround for design conflicts
Let’s call this section “Tips for optimizing visuals to make emails interactive yet accessible for people with visual and motor skills impairments.”
For people with low vision
In addition to the general tips for optimizing emails for people with low vision, we recommend the following:
- enlarge interactive elements: Make buttons, links, and other interactive features larger to aid those who can see and interact with visual content but may struggle with smaller elements.
For people with color blindness
- enhance color cues with additional indicators: Use symbols and text labels to ensure that information is accessible without relying solely on color differentiation;
- avoid requiring recipients to differentiate by color, such as directing them to collect green eggs in basket 1 and red eggs in basket 2; instead, use distinguishable items like eggs and apples.
For individuals with motor skills disabilities
- enlarge interactive elements: Ensure that all interactive elements are large enough to be easily tapped or clicked, accommodating recipients with limited dexterity;
- avoid dense clusters of links or buttons: Space out interactive elements to prevent accidental selections.
For individuals with photosensitive epilepsy:
In addition to the standard guidelines for optimizing emails for people with photosensitive epilepsy, we also strongly advise the following:
- eliminate flashing or blinking elements: Avoid designs that incorporate flashing lights or rapidly changing visuals;
- use caution with animations: Limit the use of animations to one per screen and ensure they do not flash or blink within the risky frequency range (3+ flashes per second).
3. Workaround for the audio conflict
This one is pretty easy — add subtitles to your videos or descriptions under the video.
It’s important to remember that these tips and workarounds are just initial steps to demonstrate that emails can be both accessible and interactive. We are committed to delving deeper into this issue.
Wrapping up
Through relentless innovation and a steadfast commitment to inclusivity, we’re carving a path toward creating emails that are not just functional but accessible to everyone.
Key takeaways:
- accessibility and interactivity are not mutually exclusive: With thoughtful design and strategic execution, emails can be both engaging and universally accessible;
- the successful combination comes with its fair share of challenges. Overcoming these complexities demands rethinking traditional approaches and fostering continuous innovation.
Interactive emails with Stripo, no-code development
