Step 1: Start with an accessible foundation
At the heart of all our emails are the foundations of HTML, CSS and real text that help make all our campaigns accessible. While many brands opt for full-image email, we prefer to use as much text as possible (using CSS to keep the brand) so that people using assistive technologies such as screen readers can consume the actual content.
Our retro litmus is no different every week. Although there are many styles, all of this happens in CSS rather than Photoshop.
if you Mining codeyou’ll see a bunch of HTML, CSS, and semantic tags that provide not only human and machine-readable content, but also the context of what that content actually means. You will also see a whole bunch of HTML tables, which can be confusing for people using screen readers. Knowing this, we apply Aria characters For each table element, prevent it from being read as a table.
<table role=”presentation”></table>
Demonstrate roles Things that can be done: It tells any assistive technology that the element is only for presentations, so don’t do anything for this. This is what prevents screen readers from reading each individual table row and cell to users, and it is a very shocking experience.
Speaking of what screen readers hide, we also used similar ARIA features for the 90s-inspired bullets. However, instead of using the ARIA role, we include the “hidden” attribute on the button image:
<img src="https://campaigns.litmus.com/_email/2021/April/04012021_Litmus_Weekly_retro/bullet-red.png" alt="" width="15" height="15" aria-hidden="true" />
Since the bullet is purely decorative, we remove it ARIA specificationsaims to improve the experience of assistive technology users by eliminating redundant or irrelevant content.
The importance of email accessibility
One in four adults USA (We) and European Union Disabled, worldwide One in six. However, accessibility challenges in digital spaces such as email are often overlooked.
These disabilities include visual impairment, color blindness, reading impairment, cognitive impairment, age-related impairment, situational challenges (such as fractures), etc.
If your email is not accessible, you will miss a large audience and leave a substantial income on the table, estimates Disposable income of $1 trillion per year.
Looking for tools to help with email accessibility? Built-in quartz Accessibility tools Help ensure that everyone can read and experience your email.
Here is how it works:
↳Source: From compliance to connection: Why businesses must embrace email accessibility
These include:
- Visual impairment filter The check how to display in your emails in four subscribers with visual impairment that lack filters for color vision.
- Automatic accessibility check In over 40 accessible areas – and guidance on any issues found.
- NVDA Screen Reader Preview Supports over 80 languages,,,,, Helps the screen reader to accurately transcribe your messages.
exist Our Help Website.
Unlock endless income
Let’s take a look at the email-driven revenue you might stay on your desk.
Step 2: Add ALT text to GIFs, Images, and Animations
Not complete without some ridiculous retro email newsletter Animated gifs And the return image you can see throughout the process – from above the dial-up modem GIF to the visitor counter below.
To make all images accessible, we included alternative text (ALT text) to describe them to people using assistive technologies. For example, the “Dial Progress” GIF describes what the image is: “Dial Progress” of a computer image connected to a rotating earth with an animation point.
And those clumsy yearbook photos collected by crew members? alt text readingThe headshot combination of the site marketing department in the 1990s. ”
Alt Text is one of the best ways to improve accessibility of your emails, including vision and eyeless users. Even if someone can see these images, There is no guarantee that they will appear in your inbox. The alt text can help your information pass anyway.
Step 3: Progressive enhancement as much as possible
Progressive enhancement means firstly designing for basics – making sure emails work properly on older customers, desktops and browsers – and then adding features to enhance the experience where they are supported.
This is a great example of this book weekly and one of my favorite tips in this issue – one of the greatest HTML tags ever: Marquee!
You may notice the scrolling dates below the weekly logo of the Animated Stone Station. While many people think this is just another GIF, it is actually the text of the active painting.
Marquee was first introduced in an older version of Microsoft’s Internet Explorer, allowing you to scroll and move text around the document. It’s very old, It’s deprecatedbut it is certainly beautiful. And, because it is animateing real-time text contained in HTML, assistive technology can be used inherently.
That being said, the movement may distract some users, so be careful with elements like Maki (or any other animation).
Accessibility doesn’t have to be boring
We create retro litmus every week, which makes us happy. More importantly, we are glad we don’t have to sacrifice Designed email accessibilityeven though the ridiculous design trends have been brought back from the past few decades. Accessible emails work well and look good (or scary, depending on your taste).
Want to make your email easier to access? Our The final guide to email accessibility From copy to code, introduce everything you need to know about accessibility.
Accessibility makes it simple
Creating accessible emails is no longer optional, and this is required. Learn about the impact of accessibility on the brands of two industry experts.
Originally written and published by Jason Rodriguez on April 8, 2021.
