Tips and Tricks
Accessibility: From the Email Perspective
When it comes to accessibility, most people think compliance is only required on websites. It's a matter of a skewed perspective on the subject of accessibility, focused on a small part of a larger issue. All electronic information resources should be compliant per SAP 29.01.04.T0.01, which supplements System Regulation 29.01.04 Accessibility of Electronic Information Resources.
Email and web pages are built with much of the same code which makes this accessibility Tips and Tricks topic a little easier than most: Most of the guidelines you should be following are already on Tips and Tricks, and I know you are following those already for web pages, right?
Consider the issue of viewing an email on any device, not just your computer. Here is a screenshot of an email I received on my phone (sans any information about the company to protect the innocent):
What is the first thing you notice about this email besides the fact that it mostly consists of a huge image?
Can you read the text? Depending on your visual ability to differentiate between the black foreground with the purple background, you may not even be able to read the large text.
How about the buttons and links? Can you click on the one you want on your phone without accidentally hitting the one next to it (don't try this on this image, since I removed all the code)?
And what about that barcode? I can't tell you the number of times I've gone to a store and handed them my phone to scan a barcode only to find out the barcode isn't readable at that size. How dare I try to be environmentally friendly by not printing those coupons out!
- Text sizes should be large, readable and understandable. Use a font size no less than 14 point. Just like on the web, avoid using justified alignment. Use fonts that are easy to read, so you don't confuse letters like "l" (lower-case L) with "I" (upper-case I) and so on. It's not a party if no one knows where it is located due to poor font choice.
- Images should be used in moderation and contain alternative text. Just like on the web, you need to use alternative text (found in Outlook by right-clicking on the image, going to Format Picture…, and then Alt Text). And just like the web, if the alternative text you need for the image is larger than the size of a Twitter tweet (140 characters), then you should be using text instead of an image. Posters are great for printing and posting on walls, but like I've mentioned before for the web, they are not appropriate for emails.
- Make sure colors have enough contrast to be readable and understandable. Just like on the web, you need to make sure the graphics you use are still viewable to the color blind as well as the vision impaired (which includes people with normal vision stuck in offices next to windows that shine a bright glare on their computer screens). You can use a variety of color contrast calculators:
- Colour Contrast Check is my favorite website for normal web design color checking. The downside is that you'd have to know the Hex code for each color value.
- If you are using programs like Word, PowerPoint, or Outlook, selecting colors via their RGB (Red, Green, Blue) values, a Firefox plugin like WCAG Contrast Checker may be better for you. See this screenshot for how to check your colors using the WCAG Contrast Checker.
- Make buttons and links large enough to view and access. Since starting our research on Responsive Web Design, we in Web Services have created our own jargon for this requirement called Fat Finger Friendly (F3). You should be able to easily move a mouse cursor or a finger over a button or link and not accidentally access something else due to the size. If it is not readable, it is not Fat Finger Friendly, either!
But wait, that's not all!
- Keep email sizes down. It saves loading times on mobile devices, fills up your Inbox more slowly, sends emails more quickly to your recipients, doesn't get rejected by email providers who have email size limits, and many more benefits.
- Keep the size of pictures inserted into emails small.
- If an attachment is going to be large, place it on your website, publish it, and send that out as a link in your email.
- Make sure attachments are accessible. Another change in perspectives: electronic information resources include Word, PowerPoint, PDF and other document types. The Governor of the State of Texas's website has a link to Creating Accessible Microsoft Office 2010 Documents which we've included on our Accessibility policy website.