What makes an e-mail message accessible?
Generally speaking, an email is accessible when it can be easily read using assistive tools like screen readers. Key elements of an accessible email include clear, contrasting fonts, proper line spacing, well-described images, and the sparing and appropriate use of complex components like tables.
Despite being one of the world's most popular email platforms, Outlook still isn't all that inclusive out of the box and its shortcomings can add unnecessary barriers for some people. By making a few simple adjustments to your default fonts and settings, you can significantly improve the accessibility of your messages with little effort.
Adjust your default font size and line spacing settings
Since emails are primarily text-based, one of the most effective ways to improve accessibility is by adjusting font settings, including size and line spacing.
Change your default font size
Outlook's default font size is set to 11pt, which translates to roughly 15px—a bit too small for comfortable reading. Ideally, this should be increased to 12pt or more. You can modify your default font size by updating your Outlook stationery settings for new messages and in replies.
- File
- Options
- Stationery and Fonts
Adjust line and paragraph spacing
Adding multiple line breaks between paragraphs can create unnecessary 'blank' spaces that screen readers interpret as empty content, which may frustrate users. Additionally, Outlook doesn’t add space between paragraphs by default, causing many to insert extra blank lines. Instead, adjust your paragraph and line spacing to improve readability.
- In the email editor, navigate to the "Format Text" tab.
- In the "Paragraph" section, select the arrow found in the lower right corner to open the Paragraph Settings panel.
- Set the value of "After" spacing to around 1.25 times the font's base size. For a 12pt font, use 15 or 16pts.
- Adjust the "Line Spacing" to "Multiple" and set it to 1.2. This works well for most common font sizes.
- Press "Set as Default" and select "All documents based on the [template name] template?", then select OK to confirm.
Use headings for structure
Like Word, Outlook supports styles and, more importantly, headings. Using proper headings is immensely helpful for non-visual users and also improves the structure of longer emails.
- Open or create a new message to enter the text editor.
- Navigate to the "Format Text" tab and find the "Styles" section.
- Place your cursor in the desired text.
- Select a heading style to apply it.
When applying styles, place your cursor in the paragraph where you want the style applied, rather than highlighting the text. Highlighting only applies the style to the selected portion. In other words, if you highlight a single word in a sentence, only that word will be formatted, not the entire paragraph.
Remember to organize your headings in hierarchical order, starting with Heading 1 and moving down without skipping levels. Typically, your title serves as the level 1 heading, sections as level 2, and sub-sections as level 3, and so on.
Create space and adjust margins
Should you need extra space between two paragraphs, avoid inserting empty paragraphs to do so. Screen readers interpret each individual empty paragraph as blank
, which can quickly get annoying when several are used in a row.
Instead, navigate to the "Format Text" tab and press the arrow button found next to the "Paragraph" heading.
In the Paragraph options panel, modify the before and/or after "Spacing" values.
Add alternative text to images
If your message or email signature contains images, make sure they include alternative text for users who rely on screen readers. To add alt text, right-click the image and select "View Alt Text" from the context menu.
When writing alternative text, avoid adding descriptors like "image of" or "photo of." Screen readers already announce the presence of an image. Simply describe the image's contents.
If you have to use tables for design, use them correctly
Normally I'd be telling you not to use tables to create layouts, but the reality is that Outlook's HTML parser is archaic and simply doesn't play nice with even basic HTML. Tables are, for the time being, the most well-supported method for creating layouts. However, this does pose some accessibility concerns.
Don't use headers
When a screen reader encounters a table, it will attempt to decipher wether its used to present data, or used for design. A table that contains header cells is a strong indicator that it contains tabular data, and should therefore be omitted when used to create designs.
If you're going to use a table to create a layout, it's important that you uncheck the "Header row" and "First row" options in the "Table" section.
These options mark the header and first row's cells as headers.
Reduce the number of cells
Should screen readers navigate through a table it interprets as data, it will inform the user whenever it changes cells, which can quickly get annoying and confusing. To mitigate this issue, try and keep the number of cells to a minimum and rely on padding and spacing rather than creating empty cells.
Use HTML where you can
If you have access to the HTML source, you should mark the table as decorative with the role attribute. Doing so strips the table of its semantic value and, essentially, tells assistive technologies to treat it as a decorative element instead.
<table role="presentation">Other considerations when using tables for layout
Where possible, try to avoid fixed-width tables as these don't scale well on small screens or when the user zooms in.
Other considerations
Use of colour
Use high-contrasting colours and never rely on colour alone to convey information or instructions. For example, "select the text in red" would not be helpful to the non-visual or users with certain types of colorblindness.
Keep data tables simple
Keep data tables simple and linear, avoiding the splitting or merging of cells as they break the linear structure of the data.
Descriptive link titles
Use link text that is meaningful and clearly describes the content it leads to. Avoid using vague phrases like "Click here" or "Read more." Instead, opt for descriptive text like "Learn more about accessible email practices" or "Download the accessibility guide." This helps all users, particularly those using screen readers, understand the purpose of the link without needing additional context.
Takeaways
By making a few small adjustments, you can make your emails easier to read and more accessible for everyone. Simple changes like adjusting font size, spacing, and using proper headings can significantly enhance the inclusivity of your messages.