Basics:

Accessibility Updates You Can Make Without Anyone Noticing

Making our emails accessible really should be the whole team’s responsibility, from strategy to deployment. (Shift Left, amirite?) But in the real world – sometimes it’s not particularly easy to get stakeholders on board to new ideas. While you work on aligning everyone, let’s discuss a few quick things you can easily implement into your process without changing the visual rendering, linking strategy, or content. 

1. Use semantic text elements with live text as much as possible.
   Don’t just dump text into table cells. Instead, use the correct semantic elements like <h1-6>, <p>, <ul>, <ol>, etc. You will likely need to reset the margins, but this is feasible and easy to implement without rendering complications.

Do this for users with low/no vision, dyslexia or other reading impairments, and other AT users that may not be able to easily navigate between text blocks. It is much easier to navigate email with Assistive Technologies when text is appropriately placed within these elements.

2. Include the alt attribute on all images.
   If the image is decorative or has no valuable content, you can leave the alt attribute empty alt="" but you must include an alt attribute on every single image, even your tracking pixel.

Do this for screen reader users. When the alt attribute isn’t present, screen readers often try to pull information in other ways. This might include reading out the source URL of the image or the URL of the <a> tag that may wrap the image. (Go ahead and read one out on an email in your inbox if you don’t understand why that would be an issue.)

3. Add good alt text to your images.
   Ha, I bet you think this is a repeat of #2. It’s not, and it’s important enough to have an alt attribute at all that just having it is its own point. #3 here is following that up with having really good, descriptive alt text that follows alt text guidelines where appropriate.

Do this for AT users, largely screen reader users, but also those with slow internet connection or security protocols that do not allow for image downloads.

4. Add role=”presentation” to your layout tables
   This one is super easy, add role="presentation" to every layout table in your email. Accessible-email.org does it for you automatically, or you can bake this into your existing snippets, templates, and/or modules.

Do this for screen reader users – though most email client and screen reader combinations manage this pretty well on their own, it’s still important to distinguish that the tables you are using to hold up the content of your email are not data tables, which is what this ARIA role is telling AT.

5. Add a language to your email
   The lang attribute can be added in a few places in your email, always as an attribute in the HTML tag, as well as in the body tag and usually in a div wrapper that surrounds the message. I’ll be honest that I haven’t tested this too extensively and hope to do some tests on this at a later date.

Do this for screen readers and other assistive technologies so that the readout is read in the correct language. If you’ve ever played around with screen reader tests and found them confusing, just imagine if the screen reader was trying to read the email in a different language. (Hint: It’s pretty awful.)

6. No RTL content
   There are two main ways to solve the “S-curve” layout in code – where in one section there is an image on the left and text on the right, and the next section has an image on the right and text on the left. In mobile, both images are on top of the text. It’s a nice way to spice up an otherwise lackluster design. To code this, you can change the direction of the content so that it flows one way in desktop and another in design or you can show a desktop image on the right and hide it in mobile while showing a mobile image in the correct location. To meet this point, you’ll want to do the former and use a show/hide to display your images in the right place.

Do this for low vision users and users with reading disabilities that will sometimes use a screen reader to follow the text. When you apply directional changes, it can cause some content to not be read out in the same order as it appears on the screen. This can be very confusing and disorienting.

Note: Obviously, if you are using an RTL language, than you would just avoid the opposite – the main point here is that the screen reader readout should match the layout visually. 

7. No rowspans or colspans
   This is related to the above, and I deeply hope that no one is using colspan and rowspan in emails being created today, but I have definitely seen them on occasion. While these attributes can really help shore up an unwieldy code structure, it’s absolutely horrible for anyone who needs content to be read in a cohesive way.

Do this for low vision, no vision, and reading disabled users that use screen readers to access content on the page. Rowspans and colspans can cause significant variations in the order in which content is read, making the content impossible to understand.

8. Include a title
   It seems pretty straightforward these days to always include a title tag in your HTML file, but that wasn’t always the case! In all honesty, most of my tests on this show the email client subbing the subject line in the title area on web clients, but that shouldn’t stop us from doing the right thing and including a title. In all actuality, the subject line is usually best here, but since that can change or be dynamic, many clients stick with their company name here instead.

This helps all users know which page/email they are on and helps users with visual disabilities understand what content is likely in the page/email they are focused on.

9. Apply formatting colors for alt text
   This one is pretty easy – make sure that your alt text is a color that meets color contrast criteria with the background color of the email, or the section in the email where that image resides. Ie. if your image is on a white background, use dark text; if your image is on a black background, use light text. This has nothing to do with the coloring of the image itself. For color contrast, I tend to use this color contrast checker for best results.

Do this for low vision users and dyslexic users, as well as any other user that may have their images turned off or may not be able to download their images. This way, if their images do not load, they can still get the content provided – the alt text.

10. Use text-transform for any all caps content
    Designers love their call caps headlines or CTAs, don’t they? Unfortunately, many screen readers read this all caps content as individual letters. Some screen readers are improving, but do you mean “It” or “I.T.” when your copy says “THE NEW IT PRODUCT”? Using text-transform can reduce this issue, but note that there has been some discussion on some screen readers (or the DOM produced by UA’s) including the text-transform and therefore still spelling out the content. 

Do this for screen reader users, those with low and no vision, and those with reading impairments so they can access the content on the page without having to spell out the words you’re using.

11. Line Height Flexibility
    I’m putting this one at the end because it doesn’t quite fit the scope. Most designers will send you designs in pixels – that’s been the way we set line height in emails for ages. However, a strict line height can cause issues for users with low vision that may use a magnifying tool or zoom tool to enlarge the content. In some scenarios, a set pixel height can cause this text to overlap as the font size will increase, but the line height may not, so setting the line height in a flexible unit like rem, em, percent, or decimals is a better solution. The reason it doesn’t fit the scope of this list is that in designs where there are very tight margins, rendering can be impacted. (This means you would need approval to make the change.) That said, I’ve changed this in client templates, and no one noticed or cared, so your mileage may vary.

Well, I think those are most of my “easy” answers. If you want to start moving forward with accessibility without having to talk to a soul (aka #introvertlife) this will fit the bill. As always, I’m happy to hear if there’s anything else you’d add here.