Design accessible content accessible-content
The European accessibility act is a directive designed to enhance the internal market for accessible products and services by eliminating barriers caused by differing national rules across Member States.
This regulation says all digital communications, including emails, newsletters, PDFs, and downloadable content, should be accessible. When creating content for your recipients, you are therefore required to follow specific guidelines, such as using accessible fonts and readable formats, and providing alternative text for images.
The Marketo Engage Email Designer allows you to easily comply with this directive, based on Web Content Accessibility Guidelines (WCAG) 2.1, level AA. The best practices for designing accessible content with Marketo Engage are listed below.
Ensure text readability text-readability
Leverage the Styles tab of the Text component to ensure that your text is readable, such as using a proper color contrast and simple fonts.
For fonts and text, make sure you follow these guidelines:
Font selection
- Use sans-serif fonts like Arial, Verdana, Tahoma, Helvetica, or Open Sans.
- Avoid serif, cursive, or decorative fonts in body content.
- Stick to a limited font set for consistency and fallback (for example:
font-family: Arial, Helvetica, sans-serif;).
Font sizing
- Ensure a minimum font size of 16px for body text.
- Use proper hierarchy for headings.
Color contrast
- Maintain a contrast ratio of at least 4.5:1 between text and background.
- For large text (≥24px or bold 18px), ensure at least a 3:1 contrast.
- Avoid light gray or pastel text on white backgrounds.
- Do not rely on color alone to convey meaning. Use underlines, icons, etc.
Text accessibility
- Avoid text in images.
- Do not use all caps in body text.
- Ensure that text can be zoomed up to 200% without breaking the layout.
Ensure visual accessibility visual-accessibility
- Avoid using color-only indicators for important information.
- Use text labels or icons for clarity.
- Optimize your design for mobile and responsive layouts, ensuring buttons are large and properly spaced.
- Regularly test across devices and screen sizes to maintain accessibility.
In Marketo Engage, the size and spacing of the different elements in your content can be further refined using the styling parameters and attributes from the Email Designer Styles pane.
For example, you can update the background or change the margins, padding, and alignment to improve visual accessibility.
The Marketo Engage Email Designer allows you to preview and optimize design for different devices and screen sizes. At any time you can Switch to live view to check how your content might render on various device sizes.
Use alternative text for images alt-text
Use the Image component to provide alternative text for images.
- Describe the image’s purpose concisely and contextually.
- Avoid redundant phrases like “Image of …” and use empty alt text for decorative images.
- For icons with meaning, provide meaningful labels, and for complex images, use a brief alt text plus a longer description elsewhere.
Use readable format readable-format
Use the Email Designer relevant structure and content components, as well as the options in the Styles pane, to organize your content in a clear, logical, and concise way that is accessible to all.
- Use structured, semantic HTML with proper headings, paragraphs, lists, and tables.
- Ensure that content follows a logical left-to-right, top-to-bottom flow.
- Use clear, concise language.
- Provide alternative formats for PDFs and infographics.
- Allow text resizing and reflow, and ensure that typography is readable with adequate color contrast in all formats.
Ensure content readability readability
To be readable, your content must be clear, well-structured, and usable by everyone, including people with visual, cognitive, or reading difficulties, and those using assistive technologies. Some points to consider when creating accessible content include:
- Keep sentences to around 20 words or less.
- Edit your copy to be direct and concise.
- Use active voice to keep the sentence structure simpler.
- Avoid slang, jargon, or regional words that some people might be unfamiliar with.
To evaluate your email readability, you can use the popular Flesch Reading Ease test, which can be found in Microsoft Word and calculates how easy your content is to read on a scale of 0-100.
Test your content test
To verify your content’s accessibility, you can use the testing capabilities provided by Marketo Engage. They are not specifically designed to check if your content is fully accessible, but they can provide a first level of verification.
-
Preview your content using test profiles.
-
Use the Email rendering option that leverages Litmus to simulate your designs across major email clients (Apple Mail, Gmail, Outlook) and see if text, colors and images make your content accessible.
-
Send proofs to test the rendering of your content before sending it to your real audience.
To check in a more consistent way if your content is reliably accessible, go for specific external tools such as:
-
The WebAim contrast checker and the WAVE web accessibility evaluation tool to evaluate contrast and compliance;
-
Assistive technologies like screen readers (for example: NVDA, or VoiceOver on iPhone) to experience emails from the perspective of visually impaired users.
Use dark mode dark-mode
Dark mode enhances visual accessibility for users with light sensitivity or visual impairments, for an improved viewing experience.
Some best practices for designing content in dark mode include:
- Using transparent PNGs or SVGs
- Setting appropriate meta tags and CSS
- Providing accessible fallback styling if dark mode is not supported.
Make sure your emails render correctly in dark mode by testing all email content and UI elements in both light and dark modes.
Use specific attributes for accessibility attributes
Language attributes language
When creating designs, include the lang (language) and dir (text direction) attributes in the content body. These attributes help assistive technologies (such as screen readers) to interpret and present your content in an appropriate manner.
-
The
langattribute indicates the language of the email to assistive technologies, ensuring that words are pronounced correctly.accordion Examples Example for English:
code language-none <body lang="en">Example for French:
code language-none <body lang="fr"> -
The
dirattribute specifies text direction. Most languages, including English and French, are read left-to-right (ltr), whereas languages such as Arabic and Hebrew are read right-to-left (rtl).accordion Examples Example for English (left-to-right):
code language-html <body lang="en" dir="ltr">Example for Arabic (right-to-left):
code language-html <body lang="ar" dir="rtl">
Screen readers rely on the lang attribute to apply the correct pronunciation rules, while text direction ensures content flows naturally for left-to-right or right-to-left languages. Without these attributes, users may experience confusing reading order or mispronunciation. Always wrap your email body with the appropriate lang and dir attributes.
<table> or <td> blocks) to ensure that each part is read correctly.Tables tables
In HTML content, tables are often used for layout. By default, screen readers treat every <table> as a data table, announcing rows, columns, and structure. This can be confusing if the table is only used for formatting.
Add role="presentation" (or role="none") to layout tables to ensure assistive technologies skip their structure and focus only on the actual content.
role="presentation")| code language-html |
|---|
|
The screen readers read:
“Hello World. Welcome to our newsletter.” (No mention of rows, columns, or table)
role="presentation")| code language-html |
|---|
|
The screen readers read:
“Table with 2 columns and 3 rows.”
“Name, Peter. Score, 19.”
“Name, Parker. Score, 62.”
role="presentation" exclusively for layout tables. For data tables, retain the semantic <table> structure so screen readers can correctly announce headers and relationships.Text for links links
Screen readers read out links using their text. If a link is labeled only ‘Click here’ or ‘Read more,’ users of assistive technologies won’t know the destination. To ensure accessibility, they need descriptive text that clearly indicates the target or action.
Use the Email Designer to add a link to your content and edit the label to make it discernible (visible) and descriptive (clear about purpose). Avoid vague labels like ‘here’ or ‘more’.
| code language-none |
|---|
|
The screen readers read:
“Link, August release notes.”
| code language-none |
|---|
|
The screen readers read:
“Link, click here.” (Provides no context out of reading order)