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.

Silent video of the full Parcel window. A sample email is displayed in the editor and the preview. Under the Preview are several buttons, including one labeled "Accessibility". The user clicks on this, which expands to a mini window with a button labeled "Check Accessibility" and the text "Evaluate your email for best accessibility practices". The user clicks and drags the top edge of the window to stretch it to a taller height. The user clicks the button, which is replaced after a moment with a list of accessibility issues, divided into sections by severity with the most severe at the top. The top of this mini window lists the text "10 issues" and a button labeled "Refresh". Each accessibility issue listed is presented with a title, description, and line/character number. The description on each is a hyperlink to a page with additional information. The user clicks on an issue and the editor jumps to that line of code. The user clicks on a description and is brought to a Deque University webpage about that issue.
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 valueMild, 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 uniqueMildcat.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 elementMildcat.aria, best-practicefailure, needs review
empty-headingEnsures headings have discernible textMildcat.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 textMildcat.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 amountMildcat.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.Mildcat.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
body-dirChecks that the content inside the body tag has a dir attributeSeriousContent inside the body should be wrapped in a dir attributeThe language direction is often inherited from the email client, if it is different it will cause issues.
table-roleCheck if tables have the role set to presentationSeriousTables 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-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 rolesMildUse <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 rolesMildUse <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 rolesMildUse <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 rolesModerateAvoid 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 rolesModerateAvoid 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 rolesModerateAvoid 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 rolesModerateAvoid 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.
vml-altCheckes that VML elements have an alt attribute setCriticalVML requires an alt attributeVML is an image format so requires an alt attribute to set alternative text.
vml-linksCheckes that VML elements do not contain <a> elementsCriticalAvoid placing links inside VML elementsLinks inside VML can’t be navigated to of clicked on using a keyboard input or some screen readers.
vml-headingsCheckes that VML elements do not contain heading elementsModerateAvoid placing headings inside VML elementsHeadings placed inside VML elements can’t be navigated to using some screen readers.

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