Real Magnet

A Quick Guide to Improving Email Accessibility

A Quick Guide to Improving Email Accessibility

Marina Sevostyanova, JavaScript Developer, Real Magnet  &  Javi Calderon, Content Manager, Real Magnet

Web accessibility is the practice of optimizing the usability of websites and content for people with disabilities. Not only do these techniques accomplish their intended goals of making information equally accessible to everyone, they’re also widely accepted as best practices.

Nearly 1 in 5 (or roughly 50 million) Americans live with a disability. 24 million of them are considered to have a severe disability. Without proper accessibility guidelines in place, businesses risk alienating a massive portion of their prospective audience, significantly hindering their revenue potential.

Web accessibility is a huge topic with many areas to consider. W3C group develops and maintains Web Content Accessibility Guidelines (WCAG 2.0) – providing a wide range of recommendations for making web content more accessible. In this article we’ll cover very basic approaches that will help email designers and content managers create emails that conform to accessibility standards.

 Add alternate text for images

Alternate text provides a user with useful information about an image when it cannot be seen due to poor internet connection, email client software configuration, or visual impairment. Adding a clear alt tag that properly conveys the message of your image will allow users who view the text version of your message or use a screen reader to understand any meaning conveyed in your images.

Real Magnet allows you to set alt tag for images within the properties tab of our image editing zone.

Make your links meaningful

Text strings in links are used by screen reading software to navigate throughout a page. Link text helps clue users into what the content behind the link will be. We recommend avoiding generic link texts with little meaning (e.g. “read more”, “click here”, etc.).

Poor Accessibility:

Good Accessibility:

Use significant color contrast

To help users with poor vision or color blindness, it’s important to provide plenty of contrast between the color of your content and the background color. Smaller fonts and narrow strokes require even higher contrast between the background and content. You can find multiple free online contrast checkers that allow you to enter foreground and background colors and adjust them until you reach the recommended contrast ratio. 

As you can see, the example on the right provides plenty of contrast between the text and background colors.

Don’t rely on color alone

While color plays a critical role in providing accessible email content, it’s important to consider how color-deficient users might perceive your color choices. For example, people suffering from protanopia are likely to confuse some black or blue shades with red. Screen readers won’t be able to associate a color with its intended meaning, either. The most common mistakes happen with styling links and emphasizing text. So don’t rely on color alone to convey information or meaning, make sure your text speaks for itself and the design simply serves as a complement.

Ensure keyboard accessibility

Many users who suffer from physical disabilities rely on the use of special keyboards or other hardware to mimic keyboard functionality. Make sure all clickable elements in your email messages, such as links and buttons, can be easily navigated only with the use of the tab, space, and enter keys.

Maintain logical reading order

For better accessibility, we recommended that you avoid using CSS styles to change the visual order of your HTML elements. Be careful using properties like  position: absolute, float: left;, float: right. Screen readers read content from left to right and from top to bottom as they navigate the code of your email message. If the order of the code is not the same as how those elements are displayed in the browser, the reader may unintentionally misrepresent or misunderstand your content.

One of the central concepts of modern marketing is the heightened focus on customer and user experience. By implementing these simple and straight-forward email accessibility tips you increase the potential reach of your content by making it available to the widest possible audience, and re-affirm your commitment to providing an optimized experience for your users and readers.