Considerations when building emails
Semantic Code
Without the following elements, the readability of your emails will be negatively impacted. The code in these sections show how each element is executed in the branded templates.
- Language Settings
- Your language must be set to English. at the beginning of the email code to ensure your content is registered by output devices in English.
- HTML: <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">
- Presentation Role
- Setting the role of your tables tells screen readers how to interpret and translate the information within them to the user. A role of "presentation" uses Accessible Rich Internet Applications (ARIA) to tell the screen reader that the table is a presentation table, not a data table (which is the intended use of tables in HTML). This makes reading email content a lot more intuitive for screen readers.
- HTML: <table role="presentation" class="m-width100" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="width:600px; min-width:600px; max-width:600px; text-align: center;"> <tr><td class="m-24-34" align="left" valign="top" style="font-family: Arial, sans-serif; font-size: 28px; font-weight: bold; line-height: 38px; color: #333333; padding-top: 0; padding-right: 0; padding-bottom: 6px; padding-left: 0;"> <h2 style="font-family: Arial, sans-serif; font-size: 28px; font-weight: bold; line-height: 38px; color: #333333; margin: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">This is a medium heading</h2> </td> </tr> </table> </td> </tr> </table>
- Heading and Paragraph Tags
- Use hierarchical <h> heading and <p> paragraph tags to make it easier or those using screen readers to navigate and scan through your email, allowing them to decide which content they want to listen to.
- One recommended structure is reserving <h1> for the email's title, <h2> for major headings and <h3> for major sub headings.
- For multiple paragraphs, use separate <p> paragraph tags instead of multiple line breaks, so the screen reader interprets the paragraphs as block of text within a table. (Note: Line breaks are good for purposes like signatures or addresses.)
- Tip: Rather than trying to turn an <h1> into an <h2> in your code, grab a new module from the brand site or from within SFMC to eliminate errors tied to the style sheet at the top of the email.
- Tip: Screen readers read left to right and top to bottom, so order your elements in that way.