What requirements does accessible HTML code meet?

The structure of your HTML code determines how well a screen reader can read your newsletter aloud. This applies to an imported newsletter or a custom-made template. In the drag & drop editor, you do not determine the HTML yourself.

Use simple, semantic code

The HTML for newsletters is often complex because it needs to work in many different email clients. Even so, keep the code as simple as possible, especially for screen readers. You can still create an attractive, modern newsletter using simpler code.

Choose tags that match the content. Put a heading in an <h> tag so that a screen reader immediately recognises it as a heading:

<h1>Newsletter title</h1>
<h2>Article heading</h2>
<p>A paragraph of text.</p>
<ul>
  <li>An item in a list</li>
</ul>

Use descending heading tags (start with <h1>, then <h2> within that, and so on), a <p> for a paragraph, and <ol>, <ul> or <dl> for lists, with <li> tags inside them.

Also pay attention to the order in the code. In HTML, the order of the tags does not have to match the visible order of the content, but a screen reader will follow the order in the code. Particularly when using multiple columns, make sure this reading order remains logical.

Limit tables and use role=“presentation”

Tables are often used for layout in newsletters, even though they are not intended for that purpose. Use them as little as possible. If tables are necessary, which is usually the case as long as Outlook exists, add the attribute role="presentation" to every table that contains a section of the content:

<table role="presentation">
  <tr>
    <td>A piece of newsletter content</td>
  </tr>
</table>

A screen reader will then not read out all the individual cells (<td>s), but only the relevant text.

Account for keyboard use and zooming

Not everyone uses a mouse. All content must therefore also be accessible via the keyboard, so that links can be clicked, for example. You can test this by moving through the email using the Tab key: it must be possible to select all important elements in a logical order. If the order in your HTML is logical, this will usually work automatically.

Some readers enlarge the text to read the newsletter more easily. On a desktop, they do this using Ctrl and + or Command and +, and on a telephone or tablet using a pinching gesture. As a rule of thumb, the newsletter should remain easy to read up to 200% magnification.

Use the alt attribute properly

Many email clients do not display images by default. The text in the alt attribute then appears in place of the image. For accessibility, the alt text is more than just an alternative to the image: it is an essential part of the content.

You should therefore distinguish between two types of images:

• Give a purely decorative image an empty alt attribute (alt="").
• Give an image that is part of the content an alt text that replaces the image as effectively as possible. You can read about what exactly to include in this text under the content of your newsletter. If you are working in the editor, you can enter the alt text in the block itself.

Check your newsletter

You can check accessibility in several ways:

• Use WAVE. Laposta uses this tool itself to check the templates it creates.
• Use the accessibility tools in the Chrome developer tools. Use the webversion of your email for this.
• Test it yourself: view the email without loading images, have the newsletter read aloud using a screen reader such as Apple’s VoiceOver, navigate through all the content using the keyboard, and try zooming in.

If you prefer not to build it yourself, Laposta can design and build an accessible template for you.

Related articles