Accessible HTML
Correct HTML syntax and complete metadata
For email accessibility, correct HTML syntax regarding tags, nesting, unique attributes, and IDs is essential to ensure error-free interpretation by screen readers. The Design Editor in Optimizely Campaign already creates HTML that meets these requirements. Additionally, ensure the following elements are present:
- A title element to distinguish between multiple open documents in browser tabs
- A specified default language so that the content can be correctly pronounced by a screen reader
- A specified content type and character set used. In the Optimizely Campaign Design Editor, this is set by default as follows:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Note
If you are working with custom HTML, use the official W3C HTML Validator to check it.
Use of semantic HTML
Semantic HTML creates a logical structure for content and defines the content role of elements. This enables browsers and screen readers to interpret different content accordingly and present it meaningfully. Below is an overview of the most important semantic HTML elements (set by default in Optimizely Campaign):
- Heading levels with <h1>, <h2>, <h3>
- Paragraphs with <p>
- Lists with <ul> (unordered list), <ol> (ordered list), and <li> (list items)
- Tables with <table>, <thead>, <tbody>, <th>, and <td>
- Forms with <form>
Note
Buttons can currently still be created with class="button" because some email programs do not yet support the semantic <button> element.
Important
Semantic vs. structural HTML: Semantic HTML uses descriptive HTML elements such as <h1>, <p>, and <table> to indicate the meaning and structure of the content, making it more understandable for browsers, assistive technologies, and developers. In contrast, structural, or non-semantic, HTML primarily uses generic elements such as <div> and <span>, whose primary purpose is visual design without defining the content role of the element.
Hierarchical HTML structure and headings
For accessibility and usability, it is crucial that every HTML document contains a unique H1 heading that succinctly summarizes the main content and serves as an important orientation point for screen readers. Headings should also be uniquely worded and repetition avoided.
Furthermore, a logical and hierarchical structure of all headings (H1 to H3) is essential to clearly convey the relationships between the content. H1 indicates the main heading, while H2 and H3 represent descending sub-levels, thus creating a clear structure for users and search engines.
Use of ARIA attributes
In addition to standard HTML, so-called ARIA (Accessible Rich Internet Applications) attributes can be used to provide additional instructions to screen readers.
The Design Editor in Optimizely Campaign automatically marks layout-only elements with the ARIA attribute role="presentation". This helps screen readers distinguish between layout tables (which serve solely as visual elements) and data tables (with meaningful content), preventing them from being read aloud. The following attributes are also possible:
- aria-label="example content" to add a textual description to elements, which will be read aloud by a screen reader. ARIA labels should be concise, clear, and meaningful for users of assistive technology.
- aria-hidden="true" to hide elements if they are purely decorative and/or if their content is repeated elsewhere. It should not be applied to elements that contain important content or interaction options.
Note
While the attribute role="presentation" is set by default in Optimizely Campaign for purely decorative layout tables, additional ARIA attributes can be included using the Custom Attributes function.
Important
ARIA attributes: ARIA attributes are HTML extensions that improve accessibility by providing assistive technologies with additional semantic information about roles, states, and properties of UI elements that are not present in standard HTML.