Structure of HTML code in the context of accessibility

The layout of a newsletter is defined in HTML code. The way the HTML code is structured is important for the accessibility of the newsletter. The following points should be taken into consideration.

Keep it simple

The HTML used in newsletters is, by necessity, rather complex. This is because of the large number of email clients that must be supported for the recipients of the newsletters. In order to ensure an accessible newsletter, however, it is important that the code is not too complicated. This is especially important when using a screen reader.

Even with simpler code, it is possible to create a beautiful and modern newsletter!

Use semantic HTML

It is good practice if the HTML tags that are used fit the content that follows. For instance, use an <h> tag for a headline, so that when reading the newsletter with a screen reader, it is immediately clear that it is a headline.

  • Use descending <h> tags for the headings (start with <h1>, and use <h2> inside, etc.);
  • Use a <p> before a paragraph;
  • For lists, use <ol>, <ul> or <dl>, with <li> tags inside.

The order must be logical

In HTML the order of the tags and the order of the content are not necessarily related. To create an accessible newsletter, however, the order is important when a screen reader is used. Especially when using multiple columns, it is important to ensure that the order that a screen reader uses is logical.

Keyboard accessibility

Not everyone who reads a newsletter uses a mouse to do so. Therefore, all content must also be accessible to the keyboard, so that, for example, links are clickable. This is easy to test by using the tab key to cycle through an email. All elements that are important should be selectable, and also in a logical order (if the order of the HTML code is logical, this will usually be the case).

Restrict tables/role="presentation"

Tables are often used in newsletters to implement the design, although they are not intended for that purpose. Use them as little as possible. If tables are necessary (and they usually are, especially while Outlook exists), add the attribute <t0/>role=presentation <t1/>to each table that contains part of the newsletter's content. This ensures that a screen reader will not read all cells aloud (<td>'s) but only the text that is important.

Make correct use of the alt attribute

Since many email clients do not show images by default, the use of the alt attribute has always been an important part of newsletters. This is because the text of the alt attribute is displayed instead of the image. For a newsletter to be accessible, the use of the alt attribute is even more important because it is not just an alternative to the image, but an essential part of the content. The alt text can be used to describe what can be seen in an image. In doing so, it is important to distinguish between images that are merely illustrative; these can be given an empty alt attribute. For images that are part of the content, the alt text should describe the image as closely as possible.

Pay attention to the possibility of zooming in

To make a newsletter easier to read, some readers will want to enlarge the text. This can be done on a desktop by holding the Ctrl key and pressing the + (plus) key, and on a mobile phone or tablet by pinching. As a rule of thumb, the newsletter must remain intact when enlarged up to 200%.

Tools

Still need help? Contact Us Contact Us

Related Articles