|
Type E:
From Beyond the Envelope™
|
|
What happens when we don’t think accessibility first? We make decisions that stop people from getting where they want to go. Take the recent decision made by Transport for London to rename Bond Street, Burberry Street, along with its associated signage, to celebrate London Fashion Week. While it must have seemed a good idea at the time, you only need to visit its X (Twitter) feed to see that it resulted in confusion and frustration amongst the people who just wanted to get from A to B.
|
|
When working in the world of email, we, too, can stop people from getting from A to B on their virtual journeys if we don’t think accessibility first. So, in this issue, following my talk, ‘Accessibility Implementation: Removing the Resistance with Behavioural Science’, at Litmus Live 2023, I’ll look at five ways in which we can put accessibility first, and at the forefront of our thinking, which, will hopefully, prevent confusion and frustration on the journey’s we create for our recipients.
|
|
What if your recipients don’t download your email’s images? Perhaps they don’t have a strong enough internet connection. Perhaps they don’t have an internet connection. Perhaps they choose not to download your email’s images. Yes, some people choose not to do this!
At best, they’ll see or hear your alternative text. At worst, they’ll see or hear – well, nothing! Either way, if your email’s built entirely of images, they’ll find reading, listening, and engaging with it near impossible.
So, think live text!
Building live text into your email’s HTML enables your recipients to access all your email’s content, as they’ll see it on screen or hear it using assistive technologies like screen readers. It also reduces your email’s file size, making it quicker to view and friendlier to the planet 🌎.
|
|
|
What if your recipients face a ‘wall of text’ in your email? Without reading it, or listening to it, word by word, line by line, they won’t know what your message is, or how to engage with it, rendering it useless.
According to the Nielsen Norman Group, leaders in research-based user experience, most people don’t read word by word. Instead, they scan words, and the type of words they scan for are meaningful headings.
So, think headings!
Conveying your email’s message through its headline, headings, and subheadings enables your recipients to know what it’s about in an instant, visually, and audibly, using assistive technologies like screen readers. As such, they are considered one of the most valued accessibility implementations.
Therefore, structure your emails into sections, and head up each section with a heading or subheading, marking each one up in the HTML with a heading element, so that assistive technologies, like screen readers, can identify it.
Heading elements
Markup your headline with the <h1> element. You should only have one <h1> in your email. Then markup your headings and subheadings in order of their hierarchy from <h2> down to <h6>.
Headline:
<h1> Headline </h1>
Headings and subheadings:
<h2> Heading Level 2 </h2>
<h3> Heading Level 3 </h3>
<h4> Heading Level 4 </h4>
<h2> Heading Level 2 </h2>
<h3> Heading Level 3 </h3>
<h4> Heading Level 4 </h4>
|
|
|
|
What if your recipients are unable to see your email’s images? If you’ve not included appropriate alternative text, they won’t know what you’ve attempted to show them, reducing your email’s usefulness.
Recipients really want to know what your images contain, even if they can’t see them. If they can’t see them, they want to imagine them! Don’t deny them that opportunity!
So, think alternative text!
You can do this by dictating, depicting or describing your images in the alternative text within your HTML alt attributes. Of course, there’ll be some instances when it’s not appropriate to do so, and in such instances, you should leave your alt attribute empty or null, so screen readers ignore it.
Null and empty alt attributes
Null:
alt=""
Empty:
alt=" "
|
|
|
Think consistent calls to action
|
|
What if the links and buttons on your email and the links and buttons on your email’s landing page differ in style and behaviour? It’s the online equivalent of changing your road sign styling mid-journey, and leaving your recipients thinking they’ve left one country and found themselves in another – leaving them confused, concerned, or both!
When the links and buttons on your email and the links and buttons on your email’s landing pages are consistent, your recipients can confidently identify primary, secondary and tertiary calls to action across both. This enables them to quickly get to where you want them to go!
So, think consistent calls to action!
You can do this by aligning the style and behaviour of the links and buttons on your email with the style and behaviour of the links and buttons on your landing pages, which may mean liaising with those responsible for those landing pages.
When doing so, consider how they’ll render from email client to email client, and email client to web browser. While you’ll undoubtedly have to make compromises, minimise these as much as possible for the sake of consistency.
|
|
|
What if your recipients struggle to see your email’s text? You may have styled it in a colour that makes it difficult to read, and if so, you’ll have effectively made it invisible, reducing your email’s usefulness.
While the most obvious example of this is styling your text in yellow and placing it on a white background (not that you’d ever do that, of course), other colour combinations can kill an email in equal measure!
So, think colour contrast!
You can do this by using tools to check your colour contrast, such as the following:
Never assume, by looking at it, that your colour contrast is sufficient to conform to the level of Web Content Accessibility Guidelines (WCAG) you’re aiming for (A, AA or AAA). Even the best of us can get caught out that way! Always use a tool to confirm your conforming!
|
|
|
Conclusion
- Think live text: Live text is the foundation of accessibility, so it’s essential to include as much of it as possible in your emails. Minimise text embedded into images and maximise text built into HTML. That way, your recipients can easily read, listen to, and engage with your email!
- Think headings: Not all emails need a headline, but all emails need headings and subheadings. Write these into your email to convey its message to your recipients, visually and audibly, in an instant!
- Think alternative text: Dictate, depict or describe your images in your alternative text. And, when you write it, make sure it makes sense in and amongst the text that precedes and follows it. Avoid repeating text. An excellent way to check you’ve done so is by reading your email, including its alternative text, out loud.
- Think consistent calls to action: Align the styling and behaviour of the links and buttons in your email with the links and buttons on your landing pages. If possible, liaise with those responsible for those landing pages to achieve that consistency.
- Think colour contrast: Always, always, always check your colour contrast using one of the many tools available. And don’t forget to check the colour contrast of your alternative text, too!
|
|
Made with Envelope Developer™
Powered with 
|
|
|
