Alert:
VML Code Creates Accessibility Errors
Background images are frequently used in email marketing campaigns. They allow for more creative flexibility than “just” images and text. By combining the two you can provide a better visual experience for users. In addition, there’s a specific kind of call-to-action link referred to as a “bulletproof button” which allows for nearly perfect rendering across all email clients; it supports background images, rounded corners, borders, and more! This gives email designers a full range of ways to entice users to that desired “click.”
Both background images and bulletproof buttons are supported in Outlook because of a proprietary code used for Microsoft products, called VML (Vector Markup Language). This is a special kind of code that tells Outlook how to render various designs that cannot be created with HTML. Other email clients will ignore VML. That code supports perfect rendering of background images and bulletproof buttons across all email clients—the kind of thing that we email developers use to support client needs.
Recent testing confirmed what screen reader users have been reporting: the content within VML code segments have several major accessibility failures on various combinations of screen readers and Outlook 365.
Examples:
While I found some minor duplication errors on Outlook 2021, the bulk of the errors found were using Outlook 365. Here are a few examples:
- Using JAWS, the content within a background image is read like this:
shapeBackStar Merger Format. “Content within bg image is read here” shapeBack Star Merger Format.
NOTE: If you do not use an empty alt attribute on the v:rect element, the content is read twice. - Using JAWS, the content within a bulletproof button is read like this:
link. “Link text is read here” Image map. Link URL equals “Link URL is read out, but not accurately, with common elements read incorrectly”
NOTE: If you do not use an empty alt attribute on the v:rect element, the content is read twice. In addition, the link URL being read out is also an issue as that is not the expected experience for links in this combination of email client and screen reader. - Using Narrator, background image content was read as expected, but then the screen reader highlighted a corner of the bg image and read the subject line before moving on to the rest of the email content.
- Using Narrator, the content within VML buttons was not read at all, instead it read “text box link.”
- However, the worst screen reader output within Outlook 365 has to be NVDA — one of the most common screen readers. It did not read ANY content within the VML code block, despite visually rendering as expected. You could tab through the VML blocks, but without any link content read, a user would have no idea what they were possibly linking to.
Why is this a problem?
When you rely on assistive technology to navigate the digital world — how your AT interacts with coded content is critically important. It’s fairly easy to review the above notes and see the obvious issues such as: Where formatting is being read, or the screen reader reader picks up odd parts of coded content, or content is duplicated. This all fits into a failure of WCAG 1.1.1 – which is a critical failure. From the “Understanding SC 1.1.1: Non-text Content (Level A)” page, a user would expect the following (which is not the experience users are getting from VML content): “Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.” And that’s not all – additional issues indicate these Success Criteria are also not met: 1.3.2 Meaningful Sequence; 2.1.1 Keyboard; 2.4.3 Focus Order; 2.4.4 Link Purpose (In Context); 2.4.6 Headings and Labels; 2.4.7 Focus Visible – these are largely Level A conformance issues, making these critical issues that must be resolved in order to be considered accessible.
Why is this important?
Email marketers love to determine the “worthiness” of certain fixes depending on the known usage rates of certain email clients. It’s one of the bigger reasons we don’t code for Lotus Notes or Blackberries these days. So, it’s important to note that the majority of screen reader users run Outlook to access their emails (59%) followed closely by Apple Mail and Gmail (46% and 45%, respectively). (SOURCE: https://webaim.org/projects/screenreadersurvey9/#mailclients) Numbers specific to Outlook 365 are not available, but Office 365 boasts 345 million paid seats (SOURCE: https://office365itpros.com/2022/04/28/office-365-number-of-users/). It’s important to note, however, that even if the usage rates were not this high, these are still substantial failures that should be addressed. Email marketers have a legal and social responsibility to make emails accessible to all users.
What’s an email marketer to do?
- Don’t use VML code — I recommend discontinuing use of VML content. There are CTA coding solutions that are more accessible and that render reasonably well in most email clients. If you must — an image-based button is a better solution than a VML button — but is not recommended over other live text CTA methods. You can remove the VML from background images so that the image will display in all non-Outlook email clients. In the case of smaller textures or unimportant images, this can be an easy solution. We also suggest butting up images close to the text so it can appear to be a background image, without the accessibility failure.
- If you must use VML, use it sparingly and limit the content placed within it – especially linked content; and, definitely make sure to communicate the issue with stakeholders so they can make an informed decision.
Note: You can somewhat diminish any duplication by applying an empty alt attribute (alt=””) to the v:rect or v:roundrect VML elements, but please note this only improves the experience for JAWS users on Outlook 365. (Special thanks to Mark Robbins for his direction here!) If you absolutely MUST use VML, adding the empty alt attribute will improve some AT users’ experiences.
Technical Note:
This issue is impacting three specific elements commonly used in VML:
- v:rect
- v:roundrect
- v:oval
These usually control things like background images, background colors, background gradients, buttons, and vector shapes.
If you use any of those attributes in your VML (and you likely do) your users will experience these accessibility failures and your emails will not be accessible.
Note: This DOES NOT impact ghost tables and cells as those do not contain the above attributes.