Accessibility checker updates

Mark Robbins avatar
Mark Robbins@M_J_Robbins

Parcel has added updated rules to the accessibility checker. These new updates ranging from moderate to serious, will continue to elevate email standards across the industry and improve readability for subscribers.

Content inside body requires dir attribute

This is categorized as a serious issue.

The language direction is inherited from the email client. So if the email client is set up in a right-to-left language and we send them an email in a left-to-right language (or vice versa) the email layout will be broken. This can affect several things like text-align, punctuation, and content layout making the email very hard to understand.

To get around this, you should add a dir attribute on an element inside the <body> of your email that wraps all your content. Set it as dir="ltr" for left to right languages, dir="rtl" for right to left languages and dir="auto" for when you don’t know what language this template will be used for. We already have a rule in place that you should set a lang attribute here so this should hopefully be a very easy addition.

We also highly recommend you add dir to the <html> tag but this is not in the rules yet.

VML requires alt text

This is categorized as a critical issue.

VML is an image format, and images need alternate text. If no alt text is set, a screen reader may read something like “Shape \* margeformat” it may read some (but often not all) of any text inside the VML, or it may just announce it as a graphic without any details. To work around this, add an alt="" attribute with appropriate alternative text, as you would for an image.

This is categorized as a critical issue.

Links placed inside VML elements can’t be navigated to of clicked on using a keyboard input. This is also the case for some screen readers like NVDA. JAWS can navigate to links but is unable to click them.

VML can’t contain headings

This is categorized as a moderate issue.

Heading placed inside VML elements can’t be navigated to using some screen readers like NVDA or Narrator. The heading can’t be found using the headings shortcut key of the headings shortcut menu. This means screen reader users may likely miss out on this content.

These are categorized as a moderate issue.

These are existing rules that we have also expanded to include setting these elements using a role= attribute.

These landmark elements must not be contained inside another landmark element. Also, the page must not have more than one of each of these landmarks. When an email is opened in an email client, that page is likely to have already landmarks in place which would trigger one or both of these issues.