Accessible content is more logical, more readable, and generally more usable - for everyone!
Ensure compatibility with assistive technologies with a clear logical structure
It's really simple to ensure that you meet the minimum contrast requirements
Always stick to simple sans-serif fonts for content.
Bring your pictures to life, provide alternative text for all your images.
Clean coding makes all the difference for assistive technology.
Keep your message jargon free.
Nowadays, people interact with emails on a variety of devices, browsers, or assistive technologies. You've probably heard of the term "responsive design" and that is what is vital here.
When using a multi-column design, there's often a risk that when the email is forced into a one column format, such as on a phone screen, the content order gets muddled.
It's important for all your subscribers to be able to view your content in a logical order no matter what device they're using, but it's especially vital for people who use screen readers.
If you’re using multiple columns to display content make sure to add these correctly to ensure that the columns make sense when read one after the other as well as side by side. Most email marketing clients (such as MailChimp or Campaign Monitor) will do this for you as soon as you select a multi-column design.
We would advise always using the built in features of clients such as MailChimp, which have been built to work with assistive technologies.
Never use spaces or tabs to create columns, and ensure that your columns make sense when read one after the other as well as side by side.
If you have a longer email, with multiple stories or headlines, consider using a contents table with links to other parts of the email. You can do this using anchors. In MailChimp, for example, you can insert an anchor in your text editor anywhere in your email, then simply create a bullet point list of contents at the top of the email, highlight each title and select "insert link" then choose the anchor option.
Colour combos to avoid:
- Green & Red
- Green & Brown
- Blue & Purple
- Green & Blue
- Light Green & Yellow
- Blue & Grey
- Green & Grey
- Green & Black
When discussing the use of colour in design you'll perhaps often see guidelines which talk of a "minimum contrast ratio". This can be a bit daunting or confusing at first, so what does it really mean?
What it means...
In most cases you can use a bit of common sense to ensure that your colour scheme works. Avoid red and green as these are colours commonly affected by colour blindness.
With regards contrast, always make sure you're using a dark colour on a light background or light colour on a dark background.
In order to be compliant with the Web Content Accessibility Guidelines your colour scheme must meet minimum contrast requirements. You can check your colours using many online contrast checkers such as WebAIM. In order to use these tools you'll need to know the Hex Codes of the colours you are using. These should be easy to locate, for example if you open the colour selector in MailChimp you should see a string of seven characters, a mixture of numbers and letters with a hash sign at the beginning (e.g. #000000 for black and #FFFFFF for white).
We recommend checking out this short video below from the W3C Web Accessibility Initiative (WAI).
It may be tempting to use a fancy font to make your work stand out, but by doing so you may be making it more difficult for those with vision impairments or specific learning difficulties to read your content.
Always stick to a simple sans-serif font.
Serif Vs. Sans-Serif
In typography, a serif is a small decorative flourish - a line attached to the end of a stroke in a letter or symbol. A typeface with serifs is called a serif typeface (or serifed typeface).
A typeface without serifs is called sans-serif or sans serif, from the French sans, meaning "without". A sans-serif font is a font that doesn't have any additional "frills".
Serif fonts also have varied stroke widths, while sans serif fonts have a consistent width.
For these reasons sans-serif fonts are generally better for accessibility.
Identifying serif and sans-serif fonts
The little flourishes highlighted in the image above are called "serifs"
Selectable text & Alt text
- Alt-text allows those with vision impairments to interact with your content
- Screen readers can’t read text embedded in a picture
- Infographics are not compatible with screen readers as the text is embedded in the picture
Alt-text, or alternative text, is a brief description of an image that's displayed when a subscriber can't view your images.
Alt-text should be short but descriptive, and describe the image or highlight the relevance of the image to your message.
Most mail clients, such as MailChimp, have easy to use built in features for adding alt-text to your pictures, as you can see in the image below.
Alt-text is even more important if you are sending out images which include text, such as infographics.
Screen readers cannot identify text within a picture, they can only identify "selectable text"
Avoid sending out infographics with the text unless you’re offering an alternative description.
ClEAN CODING & HTML TAGGING
HTML is the code that tells the text and content how to appear. When text appears on our screen the headings, for example, will be bigger and bolder if that’s what the html is set to. But at the same time, that html can give more information to assistive technologies than can be seen in the email.
Screen readers rely on page elements like tables and headers to determine the informational hierarchy of a web page or HTML email. This is how they scan and navigate through your content to access what's most important to them.
Use HTML headings attributes like <h1> and <h2> to identify important sections of your content, rather than relying on style elements like colours or bold text.
Well-styled text might look nice, but a screen reader will use the html tags to ensure that headings or portrayed as headings regardless of how they look.
- You don’t need to know anything about code!
- Email “clients” will do it for you
- Good to have a background knowledge
- Use paragraph styles, such as "Heading 1" and "Heading 2"
- Don’t try to draw your own tables, use in built tools to ensure the html is correct.