Validate your email
Design Studio New UpdatedWithin the code editor preview, These tools help you catch code issues, debug layout and accessibility, validate links and images, and check your spam score.
This article applies to Design Studio
We are currently piloting Design Studio, our new email design system, and making some information available to customers. If you don’t have access to Design Studio, please continue to use our other email editors.
Click the caret to expand or collapse the panel.
Inspect element
Find the HTML source for any element in the preview using Inspect Element. Click the Inspect Element button in toolbar or enter Cmd/Ctrl + Shift + C. Click the element in the preview panel and the corresponding code will be highlighted in the editor. When you’re done, click the button (or keyboard shortcut) again to deactivate inspect mode.
Focus mode
Focus mode keeps the preview aligned with the code you’re working on. As you navigate your code, the preview will jump to the matching location and outline the relevant element.
Turn Focus Mode on or off from the toolbar with Cmd/Ctrl + Shift + M.
Expanded table view
Use Expanded Table View to visualize table and cell boundaries and debug table-based layout issues. Since this view outlines all table structures in your message, it’s helpful when working with complex tables. Click the toolbar icon to turn it on or off.
Source code
The Source tab contains the compiled, final HTML code used to render the preview, including transformers. Click Source in the toolbar to access it.
You can resize the window by dragging its edge up or down, left or right.
When you export your email, the message includes the source code.
Problems checker
The problem checker analyzes your code and highlights issues. Click Problems in the toolbar to find a list of errors and warnings. The results automatically update everytime you stop typing in the editor.
Click on any problem to locate that section of code. You can see where problems exist in your code in the scrollbar to the right of the editor.The red corresponds to the errors in the checker and yellow corresponds to warnings. Errors are likely to cause rendering issues in an email client while warnings are recommendations to improve code quality.
You can disable parts of the problems checker. In code editor preferences (Cmd/Ctrl + ,), you can turn off the toggle for Code Checker or Spell Checker.
Link validator
In the Links tab, validate whether your links are working and going to the right websites. If the tab says In Sync, then the results come from the latest version of your code. Otherwise, click Refresh to get the latest results.
Click on a link to open it in a new tab. If you use the same link multiple times in your message, the validator only lists it once.
Image Validator
In the Images tab, check that all your images are loading, secure, and optimized. If the tab says “In Sync,” then the results come from the latest version of your code. Otherwise, click Refresh to get the latest results.
SpamAssassin
SpamAssassin is an open-source tool that helps you identify how likely your message is to be filtered out as spam. Click SpamAssassin to view your message’s spam score. The lower the score, the better. Higher scores are more likely to be sent to spam. You can re-run the SpamAssassin check at any time by clicking Refresh.
Accessibility checker
Evaluate your email for accessibility issues and best practices in the Accessibility tab.
Depending on the size of your message, the checker may take a moment to show results. It sorts issues by severity (Critical, Serious, Moderate, Mild). Many issues include a link on the second line with more information. You can also click an issues to locate the relevant line of code.
Collapse any severity layer by clicking on its header.
Rules
We check many AXE 4.3 rules and a number of custom rules.
Custom Rules
| Id | Info | Impact | Description | Help |
|---|---|---|---|---|
| body-lang | Checks that the content inside the body tag has a lang attribute | Serious | Content inside the body should be wrapped in a lang attribute | Email clients will often remove <html> element |
| body-dir | Checks that the content inside the body tag has a dir attribute | Serious | Content inside the body should be wrapped in a dir attribute | The language direction is often inherited from the email client, if it is different it will cause issues. |
| table-role | Check if tables have the role set to presentation | Serious | Tables used for formatting should have the role attribute set to “none” or “presentation”. | Screen readers will read each cell of every table without the role of none or presentation. Use tables without role none or presentation only for tables of data |
| role-button | Check if the <a> tags have [role="button"] | Critical | Dont use [role="button"] on <a> tags | Assistive technology users may not be able to find it in the links menu for the page, and may have difficulty clicking on it. |
| accessible-hyperlinks | Check if the link text is non-descriptive | Moderate | Link text should be descriptive. | Learn how to write more descriptive links |
| article-article | Check for HTML semantic elements and suggest replacing with div elements with comparable roles | Mild | Use <div role="article"> instead of <article> | HTML5 semantic tags are not reliable. |
| region-section | Check for HTML semantic elements and suggest replacing with div elements with comparable roles | Mild | Use <div role="region"> instead of <section> | HTML5 semantic tags are not reliable. |
| navigation-nav | Check for HTML semantic elements and suggest replacing with div elements with comparable roles | Mild | Use <div role="navigation"> instead of <nav> | HTML5 semantic tags are not reliable. |
| banner-header | Check for HTML semantic elements and suggest replacing with div elements with comparable roles | Moderate | Avoid using the banner landmark in an email | The email client webpage likely already contains a banner landmark. |
| contentinfo-footer | Check for HTML semantic elements and suggest replacing with div elements with comparable roles | Moderate | Avoid using the contentinfo landmark in an email | The email client webpage likely already contains a contentinfo landmark. |
| main-main | Check for HTML semantic elements and suggest replacing with div elements with comparable roles | Moderate | Avoid using the main landmark in an email | The email client webpage likely already contains a main landmark. |
| complementary-aside | Check for HTML semantic elements and suggest replacing with div elements with comparable roles | Moderate | Avoid using the complementary landmark in an email | The email client webpage likely already contains a complementary landmark. |
| h1-tag | H1 Tag(s) | Moderate | Email should have exactly one h1 tag (but has more than one) | Most email web clients don’t add an <h1> tag to the page. |
| vml-alt | Checkes that VML elements have an alt attribute set | Critical | VML requires an alt attribute | VML is an image format so requires an alt attribute to set alternative text. |
| vml-links | Checkes that VML elements do not contain <a> elements | Critical | Avoid placing links inside VML elements | Links inside VML can’t be navigated to of clicked on using a keyboard input or some screen readers. |
| vml-headings | Checkes that VML elements do not contain heading elements | Moderate | Avoid placing headings inside VML elements | Headings placed inside VML elements can’t be navigated to using some screen readers. |
