Layout design in an accessibility context
When designing a newsletter, it is good practice to consider accessibility from the very beginning. Below are a few points of particular interest. Taking this into account may somehow limit the possibilities of the design, but it certainly does not make it impossible to design a beautiful and modern newsletter.
Do not use too many images
Images are less suitable for people with a visual impairment. Of course, it is not necessary to leave them out completely, but it is good to find a balance between text and images.
Do not place text in an image
Some newsletters contain text that is displayed through an image. This is sometimes done to have more control over the appearance of the text. This is very inconvenient for people with a visual impairment, because this text is not taken up by a screen reader. Therefore, include all text as 'normal' (plain) text.
Prevent fast flashing content
Fast flashing images or colours can provoke a seizure in people who are sensitive to this.
Ensure sufficient contrast
People with impaired vision benefit from a clear distinction of colours, especially between the colour of text and background. It is also important for people who are colour-blind to pay attention to the chosen combinations.
Do not make text too small
Designers often have good eyes and have no problems with small print. But for many people, a font size of less than 14px is already difficult to read. Therefore, use at least a font size of 14px. Text is often displayed even smaller on mobile screens. For this reason, we encourage you to use media queries to guarantee a minimum size of 16px.
Choose a font that is clearly readable
Thanks to the availability of web fonts, there is a wide range of fonts to choose from. But not all of them are easy to read. Choose a font that does not look too much like a serif font and with enough spacing between the letters. Also pay attention to the readability of the fallback font, which is displayed if the recipient's email client does not support web fonts.
Make sure to use sufficient white space
Just like the size and the type of font, the presence of white space is important for legibility. This concerns the line spacing (which should be at least 2px larger than the chosen font size) and the space between paragraphs. Keeping distance between the borders of the email and the text, and between images and text also makes the newsletter easier to read.
Do not justify text
Justified text is common in printed text, but on a screen the irregular spacing between words creates an unsettled image. Text that is aligned to the left is the most readable.
Ensure that the size of buttons and links is large enough
For people who cannot control a mouse very precisely, or cannot place their fingers very precisely, it is important to make sure that buttons and links are big enough. To ensure that the content can be viewed on small screens, it is important that readers can easily tap buttons.
Tools
- See the newsletter for yourself. Try how the newsletter looks without pictures. Also check what happens when the content is enlarged (zoomed in). Does it still look good?
- To see if the contrast is sufficient, various tools are available, for example https://contrastchecker.com.