In email marketing, we often talk about “meeting our audience where they’re at.” If 10% of them use a certain browser or only check email on their phones, we make sure our emails look and function great in those environments. What if, even after optimizing for different browsers and devices, 10% of your audience still had trouble viewing your emails? Consider this from WebAIM: “Though estimates vary, most studies find that about one fifth (20%) of the population has some kind of disability. Not all of these people have disabilities that make it difficult for them to access the internet, but it is still a significant portion of the population. Businesses would be unwise to purposely exclude 20, 10, or even 5 percent of their potential customers from their web sites (sic). For schools, universities, and government entities it would not only be unwise, but in many cases, it would also violate the law.” Although it’s not as flashy as animation and interactive content, accessibility is a rapidly growing priority across all of digital marketing, including email. What is Web Accessibility? Accessibility refers to making sure the channels you use to communicate with your audience are available to everyone. Many people have disabilities that require them to consume digital content in different ways. These can range from color blindness to hearing impairments to disabilities that limit motion. This affects how you (and your team) write, design and build emails. Mastering accessibility requires a basic understanding of the assistive technologies people with disabilities use to help them access digital content. This includes screen readers, joystick controllers, special keyboards and the like. Who needs to be (especially) concerned with accessibility in email? The Americans with Disabilities Act (ADA) requires that any “place of public accommodation” is required to provide equal access to people with disabilities. This includes most businesses. While the law is still catching up with technology, it is a good idea to up your compliance game if you aren’t already on top of it. This is especially true if you fall into one of the following groups: HealthcarePublic services You serve an older audience. Many older web users are affected by vision or hearing impairments. How to Make Your Emails More Accessible Semantic Code A quick fix for making your emails more accessible is to use <p> and <h> tags. If you’ve been debating whether or not you should be doing this in email, the answer is “Yes.” Simply styling your headers to stand out works for regular viewing but isn’t enough to help screen readers differentiate headings from body content. This makes it difficult or impossible for some users to quickly find content most relevant to them. Consider this real world scenario: you receive an email from your favorite pizza chain during the workday. Toward the bottom is a heading, “Weekly Deals,” that interests you, and you make a mental note to check it out later at home. That evening, you return to the email, quickly scan to the bottom, click the link and get the coupon. Without <p> and <h> tags, someone using a screen reader to access the same email would have to trudge through the entire thing to get to link at the bottom. Tip: When using <p> and <h> tags, add inline css “style=”margin:0;”. This will reset all margins the tags add. Role attributes Since many email clients typically lack refined rendering capabilities, tables are usually the best solution for maintaining a consistent look and feel. From a purely visual perspective, this solution works. It protects the formatting while displaying the information you need and hiding what you don’t. Outside of email, though, tables aren’t typically used for formatting. They are meant for displaying data, and this is exactly how screen readers treat them. They visit and report each cell as they normally would, including their orientation and whether or not they actually contain any content. In the snippet below, there is a table with two blank columns and a column with Main Content. A screen reader will read off the columns without content even though they are empty. For example: “Column 1 Blank,” “Main Content,” “Column 3 Blank.”Adding a “role=”presentation” attribute, tells the screen reader the purpose of the table is for formatting and to skip blank information. It’s a small adjustment, and easy to overlook, but it makes a dramatic difference for visually impaired users. Tip: Add “role=”presentation” to tables. This will ensure that screen readers only read cells that actually have content in them. Understand the experience Most importantly, take the initiative to understand the experience you’re building from different points of view. Become familiar with the types of technology people use to access your emails and understand how they interact with content. For example, knowing that screen readers order information in tables left-to-right, top-to-bottom lets you organize email templates to better serve visually impaired users. Similarly, a call-to-action that simply reads “Click Here” is much less informative than “Find the Full Article” to someone who can’t see the context. This one takes the least technical knowledge but can be the most difficult. It challenges us to put ourselves into another’s shoes and to reconsider what it means to build an engaging email. Tip: Even if an image doesn't have any relevant alt text, make sure to have alt="" in the <img> tag. Otherwise, the screen reader will read the entire path to the image. Use this checklist to get started building more accessible email campaigns. Accessible Email Checklist: Have I used <p> and <h> tags?Have I added “role=”presentation” attributes to tables?Have I added “alt=”” text to images?Have I optimized for DPI (dots per inch) over 100%?Have I checked that colors and design work for people who are colorblind? Tip: Use Color Oracle for OSX to see if your color schemes are accessibility friendly.

    
      

Main Content