Accessibility Checker

Evaluate your email for accessibility issues and best practices

Parcel integrates Deque University's Accessibility rules so you can easily evaluate your email for accessibility issues and best practices.

The Accessibility Checker can be found in the Developer Tools section at the bottom of the Preview. Click on the Accessibility Checker tab to open the checker. Click Check Accessibility. Depending on the size of your email, the checker may take a moment to complete. The returned list of issues is sorted by severity (Critical, Serious, Moderate, Mild). Collapse any severity layer by clicking on it's header. Jump to the relevant line of code by clicking on any issue. Many of the issues include a link on the second line with much more information.

Screen recording demonstrating the Accessibility Checker

Re-run the checker at any time by clicking the Refresh button.

Rules

Rule IDDescriptionImpactTagsIssue TypeACT Rules
area-altEnsures <area> elements of image maps have alternate textCriticalcat.text-alternatives, wcag2a, wcag111, wcag244, wcag412, section508, section508.22.a, ACTfailure, needs reviewc487ae
aria-allowed-attrEnsures ARIA attributes are allowed for an element's roleSerious, Criticalcat.aria, wcag2a, wcag412failure, needs review5c01ea
aria-hidden-bodyEnsures aria-hidden='true' is not present on the document body.Criticalcat.aria, wcag2a, wcag412failure
aria-progressbar-nameEnsures every ARIA progressbar node has an accessible nameSeriouscat.aria, wcag2a, wcag111failure, needs review
aria-required-attrEnsures elements with ARIA roles have all required ARIA attributesCriticalcat.aria, wcag2a, wcag412failure
aria-required-childrenEnsures elements with an ARIA role that require child roles contain themCriticalcat.aria, wcag2a, wcag131failure, needs reviewff89c9
aria-required-parentEnsures elements with an ARIA role that require parent roles are contained by themCriticalcat.aria, wcag2a, wcag131failurebc4a75, ff89c9
aria-roledescriptionEnsure aria-roledescription is only used on elements with an implicit or explicit roleSeriouscat.aria, wcag2a, wcag412failure, needs review
aria-rolesEnsures all elements with a role attribute use a valid valueMinor, Serious, Criticalcat.aria, wcag2a, wcag412failure, needs review
aria-toggle-field-nameEnsures every ARIA toggle field has an accessible nameModerate, Seriouscat.aria, wcag2a, wcag412, ACTfailure, needs review
aria-tooltip-nameEnsures every ARIA tooltip node has an accessible nameSeriouscat.aria, wcag2a, wcag412failure, needs review
aria-valid-attr-valueEnsures all ARIA attributes have valid valuesSerious, Criticalcat.aria, wcag2a, wcag412failure, needs review5c01ea, c487ae
aria-valid-attrEnsures attributes that begin with aria- are valid ARIA attributesCriticalcat.aria, wcag2a, wcag412failure
definition-listEnsures <dl> elements are structured correctlySeriouscat.structure, wcag2a, wcag131failure
dlitemEnsures <dt> and <dd> elements are contained by a <dl>Seriouscat.structure, wcag2a, wcag131failure
document-titleEnsures each HTML document contains a non-empty <title> elementSeriouscat.text-alternatives, wcag2a, wcag242, ACTfailure2779a5
duplicate-idEnsures every id attribute value is uniqueMinorcat.parsing, wcag2a, wcag411failure
html-has-langEnsures every HTML document has a lang attributeSeriouscat.language, wcag2a, wcag311, ACTfailureb5c3f8
html-lang-validEnsures the lang attribute of the <html> element has a valid valueSeriouscat.language, wcag2a, wcag311, ACTfailurebf051a
html-xml-lang-mismatchEnsure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the pageModeratecat.language, wcag2a, wcag311, ACTfailure5b7ae0
image-altEnsures <img> elements have alternate text or a role of none or presentationCriticalcat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACTfailure, needs review23a2a8
link-nameEnsures links have discernible textSeriouscat.name-role-value, wcag2a, wcag412, wcag244, section508, section508.22.a, ACTfailure, needs reviewc487ae
listEnsures that lists are structured correctlySeriouscat.structure, wcag2a, wcag131failure
listitemEnsures <li> elements are used semanticallySeriouscat.structure, wcag2a, wcag131failure
object-altEnsures <object> elements have alternate textSeriouscat.text-alternatives, wcag2a, wcag111, section508, section508.22.afailure, needs review8fc3b6
role-img-altEnsures [role='img'] elements have alternate textSeriouscat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACTfailure, needs review23a2a8
svg-img-altEnsures <svg> elements with an img, graphics-document or graphics-symbol role have an accessible textSeriouscat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACTfailure, needs review7d6734
valid-langEnsures lang attributes have valid valuesSeriouscat.language, wcag2aa, wcag312failure
accesskeysEnsures every accesskey attribute value is uniqueSeriouscat.keyboard, best-practicefailure
aria-allowed-roleEnsures role attribute has an appropriate value for the elementMinorcat.aria, best-practicefailure, needs review
empty-headingEnsures headings have discernible textMinorcat.name-role-value, best-practicefailure, needs review
heading-orderEnsures the order of headings is semantically correctModeratecat.semantics, best-practicefailure, needs review
image-redundant-altEnsure image alternative is not repeated as textMinorcat.text-alternatives, best-practicefailure
landmark-no-duplicate-mainEnsures the document has at most one main landmarkModeratecat.semantics, best-practicefailure
landmark-uniqueLandmarks should have a unique role or role/label/title (i.e. accessible name) combinationModeratecat.semantics, best-practicefailure
meta-viewport-largeEnsures <meta name="viewport"> can scale a significant amountMinorcat.sensory-and-visual-cues, best-practicefailure
meta-viewportEnsures <meta name="viewport"> does not disable text scaling and zoomingCriticalcat.sensory-and-visual-cues, best-practice, ACTfailureb4f0c3
page-has-heading-oneEnsure that the page, or at least one of its frames contains a level-one headingModeratecat.semantics, best-practicefailure
presentation-role-conflictFlags elements whose role is none or presentation and which cause the role conflict resolution to trigger.Minorcat.aria, best-practicefailure
tabindexEnsures tabindex attribute values are not greater than 0Seriouscat.keyboard, best-practicefailure

Custom Rules

IdInfoImpactDescriptionHelp
body-langChecks that the content inside the body tag has a lang attributeSeriousContent inside the body should be wrapped in a lang attributeEmail clients will often remove <html> element
table-roleCheck if tables have the role set to presentationSeriousTables used for formatting should have the role attribute set to "presentation".Screen readers will read each cell of every table without presentation role. Use tables without role presentation only for tables of data
role-buttonCheck if the <a> tags have [role="button"]CriticalDont use [role="button"] on <a> tagsAssistive technology users may not be able to find it in the links menu for the page, and may have difficulty clicking on it.
accessible-hyperlinksCheck if the link text is non-descriptiveModerateLink text should be descriptive.Learn how to write more descriptive links
article-articleCheck for HTML semantic elements and suggest replacing with div elements with comparable rolesModerateUse <div role="article"> instead of <article>HTML5 semantic tags are not reliable.
region-sectionCheck for HTML semantic elements and suggest replacing with div elements with comparable rolesModerateUse <div role="region"> instead of <section>HTML5 semantic tags are not reliable.
navigation-navCheck for HTML semantic elements and suggest replacing with div elements with comparable rolesModerateUse <div role="navigation"> instead of <nav>HTML5 semantic tags are not reliable.
banner-headerCheck for HTML semantic elements and suggest replacing with div elements with comparable rolesMildAvoid using the banner landmark in an emailThe email client webpage likely already contains a banner landmark.
contentinfo-footerCheck for HTML semantic elements and suggest replacing with div elements with comparable rolesMildAvoid using the contentinfo landmark in an emailThe email client webpage likely already contains a contentinfo landmark.
main-mainCheck for HTML semantic elements and suggest replacing with div elements with comparable rolesMildAvoid using the main landmark in an emailThe email client webpage likely already contains a main landmark.
complementary-asideCheck for HTML semantic elements and suggest replacing with div elements with comparable rolesMildAvoid using the complementary landmark in an emailThe email client webpage likely already contains a complementary landmark.
h1-tagH1 Tag(s)ModerateEmail should have exactly one h1 tag (but has more than one).Most email web clients don't add an <h1> tag to the page.

Headers

Easily highlight the H1-H6 headers in the Preview by toggling the Header button under the Accessibility tab. Each header (and any content enclosed) will be highlighted with a colored border. This overlay will not show up in screenshots or affect your output Source. You can enable the headers and landmarks overlays at the same time.

Landmarks

Easily highlight landmarks in the Preview by toggling the Landmark button under the Accessibility tab. Each landmark (and any content enclosed) will be highlighted with a colored border. This overlay will not show up in screenshots or affect your output Source.

Screen recording showing how to access the header and landmark overlays