Let me start off with this important reminder: there is no perfectly accessible website, app, social media post, or emailer – unfortunately there will always be someone who for some reason is excluded from reading (or listening) to your piece of content. It simply isn’t possible to make it work for everyone.
Hence the title of this post: 4 powerful ways you can make your email newsletters (MORE) accessible.
The goal is to make your emailer as accessible as possible. By doing so you will improve the general quality of your emails too!
????Test your accessibility knowledge by taking our quiz.
Here are 4 powerful tips to help you make your emailer more accessible:
Colour contrast
Colour contrast is the difference in brightness between foreground and background colours. For accessibility purposes, aim for a 4.5:1 ratio between the foreground colour (for example: text, links, etc.) and the background colour.
Larger text can have a slightly lower ratio because the larger size does help to make it accessible. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
This ratio ensures people with moderately low vision can tell the colours apart and see your content.
Test your colour combinations on WebAIM
This email is beautifully designed, however the contrast between the background and the text (in the foreground) is not enough to make this email accessible to a person with low vision.
Font
- Choose a typeface that is easy to read (some serif typefaces especially with the curly ends are difficult to read).
- Ideally font size 16px to 21px for your body copy (16px) and headings.
- Enough line height to give space between the lines of text to make it comfortable to read.
- Use lists for easy reading.
- Paragraph aligned left as opposed to centre aligned or justified. Anything after 3 lines should be left-aligned. This gives your eye an anchor to go back to. Justified text means the spaces between words is not even. Centre aligned is also hard work without that an anchor for your eye to go back to.
Here is a good example – the text is left aligned with enough space between the lines, and the font size is 16px.
Alt text
Image alt text serves several purposes. It can describe images that a visually impaired person may not be to see in the email. The descriptions will be read aloud by a screen reader.
Image alt text also helps describe an image when a subscriber’s email client blocks images.
Technically, adding alt-text is easy. Take this example from MailChimp where you click the image block in the design view and in the editing pane click Alt. Insert your alternative text and click Update.
However, learning how to write a description that is genuinely helpful can be a little more difficult…
Here is the key takeaway: describe information not aesthetics.
When an image is decorative – think divider lines, spacer images or hero images – it’s important to include an empty alt attribute, which looks like this:
alt=””
When you leave the alt attribute empty, a screen reader will skip over the image. This is because the image doesn’t contain information essential to understanding the content.
When an image contains important information then this information should be included in the alt text. For example, information for an event date and time that is embedded in an image should be included in the alt text. But remember to keep it short – if you need multiple sentences to describe an image’s message, it probably belongs in the body copy of the email.
Call to action
Write links that make sense out of context. Every link should make sense when read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like “click here” and “more” are not helpful.
Links and buttons should have enough space around them. Think about how you use your mobile phone – when links are placed closely together it is difficult to click on the one you want.
Buttons should be about 44px high.
If your mail is long it helps to place your CTA at that beginning, middle, and end of the layout. This email from LinkedIn is a great example. The main CTA button is positioned at the beginning of the email and is styled in solid blue while the secondary CTA buttons are positioned middle and end of the email and styled with a blue outline. All round it is a great example because there is a clear of hierarchy of information too.
0 Comments