How to make your template accessible?

Making your email or page templates accessible means designing them in a way so that all people, especially those with limitations, can read your content without any problems.

Creating accessible templates is a big deal considering that 15% of the world's population faces disability.

For example, people with visual impairments rely on screen readers, and these devices are created to navigate through the content. If the template is not optimized, then these people can't read your content.

But, not to worry, we have created this article which is a guideline on using Loopify's settings to make your email or landing pages accessible!

Use logical structure

In order not to confuse or disorient users, we need to have a logical structure when using a multi-column template.

For example, unlike pages, HTML emails are coded using tables since they work on each email desktop or mobile client. The tabular content needs to be built thoughtfully because screen readers read aloud content from left to right and from top to bottom.

To keep a logical reading order, a valid solution is a table with two columns and one row like this:

We in Loopify take care of this for you. Our templates maintain the logical order, and they are all mobile-friendly. 

Set the HTML Language Attribute

This is a simple fix by using lang="" in the head of the email. Using the lang attribute is helping the screen readers or other non-human systems to display the words in a specific way.
In the Loopify ready-made templates, this is always covered as we use lang="en" for English, but an additional language can always be requested.

Color Contrast

Maintaining a contrast ratio is important for the subscribers with visual impairments.

What is a Contrast Ratio?
The Web Content Accessibility Guidelines (WCAG) 2.0 has set the standards for accessibility, including a calculator that assigns a number between 1 and 21, showing how much contrast your background and foreground colors have. For example, a 1:1 ratio is very little contrast (yellow text on white background), compared to 21:1, which is very high contrast (black text on white background). 

To experience it check out the diagram below and compare good and bad contrast examples:

All templates in Loopify can change background and text color, so you can easily find the perfect colors that are with accessible contrast ratio. 

Make links more distinguishable

Let's say all your links are blue. Some subscribers might see this color differently and they might not be able to see the links. Therefore they cannot engage with your content.

When designing your email, it's a good practice to use an underline, a bolder text, or even a symbol (>) as an addition to link color. In our template editors, you can make any text bolder or add an underline on every link, you'll find this setting as mouseover style. 

Fonts should be at 14px minimum

Anything less than 14px can be hard for people to read. Also, keep in mind the font you are using. For example, if you are using a light font, consider sizing up the font.

Use Alt Text on images

If you have images in your template, then Alt (alternative) text is a must! The alternative text is a short description of the image. When a subscriber cannot see the image (or sometimes the image simply fails to load), the screen reader will then read the image description.
In Loopify it's very easy to add alt text. Hover any image and click this button:

Avoid center-aligned text

For your subscribers that have dyslexia, it's very hard to read a center-aligned text. Even on mobile, the best scenario is your text to be left-aligned.

Avoid "click here" links 

A screen reader can scan the page by simply tabbing from link to link, and if the links are "Click here" or "More here" such techniques are useless. Also, a screen-reader reading "Click here" might not be that useful, compared to reading a link called "click here to access our shop". The more the link is described, the better for everyone!

Avoid flashy GIFs

A content that flashes, flickers, or blinks can cause seizures caused by light, also known as photosensitive epilepsy. If you think that a gif or including some movement can improve the content, you can always go with a few illustrated images showing movement instead of flashy gifs.

Use Loopify's plain-text template

Plain-text emails don't contain any images or fancy design elements. They are simple. Many subscribers that use screen readers prefer them since they only contain the important part of your message without any colors, images, gifs, etc.
But good news! In Loopify, you can use our plain text template and paste your text.

In the end, it all comes to simple changes that you can do from Loopify's editor to improve accessibility. Keep in mind the few things we mentioned above, and start designing! ✌