Introduction
The following is a guide to techniques that can be used to make HTML emails as accessible as possible.
Please bear in mind that HTML emails can't be as accessible as text emails, primarily because most email clients were originally designed to deal only with text, and the HTML functionality has been added to their features, rather than being at the core of the design. This results in the email client providing relatively poor support for screen readers, which can misread the text. We recommend that, wherever possible, recipients are offered a choice of email format, to avoid this problem.
Another consequence of email client software that hasn't been designed to render HTML is that their support for CSS is poor, and may not function as expected in all clients. In addition some email servers, notably AOL, have in the past treated CSS as a malicious attachment and deleted the email before it is sent to the intended recipient. This may have been resolved in recent years, but we have no information on the current situation.
The guidance below is based on Web Content Accessibility Guidelines, but covers only those aspects that are commonly found in HTML emails.
Headings
HTML emails should have a simple and logical heading structure, this will help screen reader users quickly find the information most relevant to them.
There should be just one H1 heading, the subject of the email near the top of the message.
Below that, whenever there is a new topic <h2> should be used for the heading. If there are sub-topics of the main divisions, <h3> should be used for each sub-topic heading. Few emails need any more complex structure than this.
Lists
Use structural ordered or unordered list markup where several items are presented in a list. This helps screen reader users navigate between list items, find out how many items there are and navigate to the end of a list if they don't feel the need to read every item.
Ordered or numbered lists begin with <ol> element and can have many <li> elements.
Unordered or bulleted lists begin with <ul> element and can have many <li> elements.
If the design requires images to be used instead of list bullets, this will have to be achieved by a series of paragraphs, each with a leading image, we don't recommend this, as it removes the information and navigation available to screen reader users, but if it has to be done, the images should have empty ALT attributes, (alt="").
Images
Images are frequently inserted to enhance the look of HTML email and drawing attention to required action by hyperlinking graphics or buttons. Screen reader users can't see the image, their screen reader reads the ALT text.
This is one of the more complex accessibility issues, as the text equivalent required for accessibility, depends on the reason for the image being present rather than just its visual appearance.
As a general rule of thumb, if an image is used as a link, is an image of text, or is used as information needed to understand adjacent text, then it should have a text value for the ALT attribute. Otherwise the ALT should be empty (alt="").
-
Linked images - If the image performs a function, such as being a hyperlink, it should be given ALT text that describes its destination. It should never describe the image, and, unless it is wrapped with link text into a single link anchor, should never be empty.
-
Images of text - Best practice is to avoid using images of text - instead, actual text should be used wherever possible. If the text consists of more than a few words, it should certainly be presented in text format rather than as an image. If images of text are used, however, the alt text should be the same as the text displayed in the image.
-
Images which convey information - If the actual content of the image is what is important, then that is what should be relayed, succinctly, in the ALT text - for example, "Photograph of the Chief Executive".
-
Purely decorative images - If the image does not convey any information and has no function other than as part of the visual appearance or decoration of the message, simply part of the "window dressing", it should have empty alt text (alt="").
-
Layout images - These are images whose only purpose is to help define and control the visual layout of the message. Usually they are invisible. These images should be given empty ALT text (alt=""), so that screen readers can ignore them.
Caution: don't mix ALT text with headings
Remember that ALT text is always readable by screen readers. If an image is placed within heading markup, it will be read as part of the heading, possibly making nonsense of its meaning.
Animated images
Images should never be animated in emails. Unless the email is being read in a web browser, users have no control over animation. This can cause real difficulties for people with dyslexia, ALS and other distractibility conditions. It can make reading text an impossible task.
Colours
Colours for text and backgrounds are most reliably coded into the HTML, using the COLOR attribute of the FONT element for text and the BGCOLOR attribute for backgrounds covering defined segments of the message.
Commonly email clients inherit colour settings from the system default browser. Users may have these setting set to display non-standard colour combinations to suit their reading needs.
Best practice is to define no colour for text, backgrounds or links, unless there's an overwhelming user-centred reason for doing so, for instance highlighting navigation segments, or for visual emphasis of headings. This will make it possible for users to receive email messages in their preferred colour combination.
Where colours are defined, they must be defined for the background, and both plain text and link text within the coloured segment, otherwise, user preferences will be applied to the section that isn't coloured, and may make the combination of user text and defined background unreadable.
If colours are defined, ensure that a good contrast between text and its background is achieved. The minimum contrast ratio should be 4.5:1, and can be tested using a colour analysis tool such as the WAT-C Colour Contrast Analyser from: http://www.paciellogroup.com/resources/contrast-analyser.html.
Images of text must also achieve a good contrast, this is especially important because users have no control over the rendered colours for images.
Text sizes
In web pages, fixed font sizes can negate the browser's font size change function. This function is not available in all email clients. However, if recipients use webmail, or have a client that inherits text size preference from the system default browser, they should still be allowed to view text at a size that they find comfortable. Defining relative units for text size ensures that browser preferences are inherited.
As CSS isn't reliable, HTML email should fall back on the HTML definition of text size, using relative signed units.
This works on the basis that size 3 is normal, and font sizes are defined as being relatively higher or lower than this number:
<font size="-1"> would produce text at size 2 (smaller).
<font size="+1"> would produce text at size 4 (larger).
Signed units can be applied to headings as well as paragraphs, and still render the size as relative to normal text, not relative to the normal size for that heading level.
Layout tables
Care should be taken if email messages use layout tables, as content may be presented in an illogical sequence when the underlying table structure is removed.
Newsletters and promotional emails are frequently designed to look and feel very different from a standard message. Layout may include blocks or columns of text, achieved by using a template with embedded tables. The order in which information is displayed is critical to understanding of the message for some users.
In most screen readers, the content of a table will be presented cell by cell from left to right across each row, from the top row downwards, and the table (plus any nested tables) should be designed so that this will result in the content being presented in a logical order.
This also has in impact on the TAB sequence through links. In most cases where the TAB sequence is illogical, the cause is poor layout table structure. If the table structure is corrected, the TAB sequence will also be corrected.
As a rule of thumb, ensure that all related content is contained in a single table cell, if the table has more than one column.
Links
Use clear concise and descriptive link text, rather than URL references or "Click here" link text.
Best practice is for the link text to provide clear information about the nature and content of the link destination.
As email messages may be viewed in webmail in a browser, all links should also be coded to open new windows, using the TARGET attribute, (target="_blank). This will ensure that the user doesn't lose their webmail login session. There's no need to tell users that the links open new windows, as this expected behaviour in emails.
Bim Egan
Senior Web Access Consultant
February 2010
Copyright and distribution
Copyright 2010, RNIB.
You are welcome to copy and circulate this article freely, as long as:
-
No charge is made for providing copies.
-
Full attribution of the origin and copyright is included.
-
These conditions are included.