Accessibility Checker

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.

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

Rules

Rule ID	Description	Impact	Tags	Issue Type	ACT Rules
area-alt	Ensures <area> elements of image maps have alternate text	Critical	cat.text-alternatives, wcag2a, wcag111, wcag244, wcag412, section508, section508.22.a, ACT	failure, needs review	c487ae
aria-allowed-attr	Ensures ARIA attributes are allowed for an element's role	Serious, Critical	cat.aria, wcag2a, wcag412	failure, needs review	5c01ea
aria-hidden-body	Ensures aria-hidden='true' is not present on the document body.	Critical	cat.aria, wcag2a, wcag412	failure
aria-progressbar-name	Ensures every ARIA progressbar node has an accessible name	Serious	cat.aria, wcag2a, wcag111	failure, needs review
aria-required-attr	Ensures elements with ARIA roles have all required ARIA attributes	Critical	cat.aria, wcag2a, wcag412	failure
aria-required-children	Ensures elements with an ARIA role that require child roles contain them	Critical	cat.aria, wcag2a, wcag131	failure, needs review	ff89c9
aria-required-parent	Ensures elements with an ARIA role that require parent roles are contained by them	Critical	cat.aria, wcag2a, wcag131	failure	bc4a75, ff89c9
aria-roledescription	Ensure aria-roledescription is only used on elements with an implicit or explicit role	Serious	cat.aria, wcag2a, wcag412	failure, needs review
aria-roles	Ensures all elements with a role attribute use a valid value	Mild, Serious, Critical	cat.aria, wcag2a, wcag412	failure, needs review
aria-toggle-field-name	Ensures every ARIA toggle field has an accessible name	Moderate, Serious	cat.aria, wcag2a, wcag412, ACT	failure, needs review
aria-tooltip-name	Ensures every ARIA tooltip node has an accessible name	Serious	cat.aria, wcag2a, wcag412	failure, needs review
aria-valid-attr-value	Ensures all ARIA attributes have valid values	Serious, Critical	cat.aria, wcag2a, wcag412	failure, needs review	5c01ea, c487ae
aria-valid-attr	Ensures attributes that begin with aria- are valid ARIA attributes	Critical	cat.aria, wcag2a, wcag412	failure
definition-list	Ensures <dl> elements are structured correctly	Serious	cat.structure, wcag2a, wcag131	failure
dlitem	Ensures <dt> and <dd> elements are contained by a <dl>	Serious	cat.structure, wcag2a, wcag131	failure
document-title	Ensures each HTML document contains a non-empty <title> element	Serious	cat.text-alternatives, wcag2a, wcag242, ACT	failure	2779a5
duplicate-id	Ensures every id attribute value is unique	Mild	cat.parsing, wcag2a, wcag411	failure
html-has-lang	Ensures every HTML document has a lang attribute	Serious	cat.language, wcag2a, wcag311, ACT	failure	b5c3f8
html-lang-valid	Ensures the lang attribute of the <html> element has a valid value	Serious	cat.language, wcag2a, wcag311, ACT	failure	bf051a
html-xml-lang-mismatch	Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page	Moderate	cat.language, wcag2a, wcag311, ACT	failure	5b7ae0
image-alt	Ensures <img> elements have alternate text or a role of none or presentation	Critical	cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACT	failure, needs review	23a2a8
link-name	Ensures links have discernible text	Serious	cat.name-role-value, wcag2a, wcag412, wcag244, section508, section508.22.a, ACT	failure, needs review	c487ae
list	Ensures that lists are structured correctly	Serious	cat.structure, wcag2a, wcag131	failure
listitem	Ensures <li> elements are used semantically	Serious	cat.structure, wcag2a, wcag131	failure
object-alt	Ensures <object> elements have alternate text	Serious	cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a	failure, needs review	8fc3b6
role-img-alt	Ensures [role='img'] elements have alternate text	Serious	cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACT	failure, needs review	23a2a8
svg-img-alt	Ensures <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text	Serious	cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACT	failure, needs review	7d6734
valid-lang	Ensures lang attributes have valid values	Serious	cat.language, wcag2aa, wcag312	failure
accesskeys	Ensures every accesskey attribute value is unique	Serious	cat.keyboard, best-practice	failure
aria-allowed-role	Ensures role attribute has an appropriate value for the element	Mild	cat.aria, best-practice	failure, needs review
empty-heading	Ensures headings have discernible text	Mild	cat.name-role-value, best-practice	failure, needs review
heading-order	Ensures the order of headings is semantically correct	Moderate	cat.semantics, best-practice	failure, needs review
image-redundant-alt	Ensure image alternative is not repeated as text	Mild	cat.text-alternatives, best-practice	failure
landmark-no-duplicate-main	Ensures the document has at most one main landmark	Moderate	cat.semantics, best-practice	failure
landmark-unique	Landmarks should have a unique role or role/label/title (i.e. accessible name) combination	Moderate	cat.semantics, best-practice	failure
meta-viewport-large	Ensures <meta name="viewport"> can scale a significant amount	Mild	cat.sensory-and-visual-cues, best-practice	failure
meta-viewport	Ensures <meta name="viewport"> does not disable text scaling and zooming	Critical	cat.sensory-and-visual-cues, best-practice, ACT	failure	b4f0c3
page-has-heading-one	Ensure that the page, or at least one of its frames contains a level-one heading	Moderate	cat.semantics, best-practice	failure
presentation-role-conflict	Flags elements whose role is none or presentation and which cause the role conflict resolution to trigger.	Mild	cat.aria, best-practice	failure
tabindex	Ensures tabindex attribute values are not greater than 0	Serious	cat.keyboard, best-practice	failure

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.

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.