Is VML accessible?
VML, or Vector Markup Language to give it its full name, is an XML-based format for creating vector graphics. It was created by Microsoft (along with a few other folks) in 1998. Around the same time, there were some other vector formats also being worked on, which lead to the W3C deciding to create one format that everyone can use. The result was SVG(scalable vector graphics) and this became the recommended format in 2001.
This could (or maybe should) have been the end of VML but Microsoft decided to add it into IE5 and Office 2000 which brought VML into Outlook.
Because VML is supported in Windows Outlook and is much more flexible in design than using HTML in Windows Outlook, it has lead to a number of email developers using this format to create things like backgrounds that use images or gradients, or using it to create CTA links that have rounded corners of fancy backgrounds.
We're going to take a look at the 3 main uses of VML in email.
- VML CTA
- VML background
- VML image
You may also see this called a VML button however, this can be confusing as there is a <button> element in HTML that is very different from this. This is actually a link and much closer to an <a> element.
There are a few ways people use VML CTA’s, we've tried as many as we could find, and each had its issues.
The most common version involves using a <v:rect> element with an href attribute added to it. Unfortunately, this isn't clickable with a keyboard input or with some screen readers.
Another version includes placing an <a> tag inside the <v:rect>. This one has a slightly different user experience but it still has the same issues.
A third version wraps an <a> tag around the outside of the <v:rect>. This one actually works a bit better with screen readers and keyboard input however it's not possible to click it with a mouse.
Conclusion
We don’t recommend using VML CTA’s. We're yet to find a solution that works well, it seems like you will always be losing out on some clicks somewhere. It doesn't seem worth the extra effort when a regular <a> link will get you full support. It might not give you rounded corners or a gradient background, but those small design features are unlikely to recover the amount of clicks lost to inaccessible links.
There are two ways of setting a background with VML, either using the <v:background> element to set a background on the body of the email, or using a VML shape, such as <v:rect> setting a background on that and placing your content inside it.
The good news is we’ve not found any specific issues with using this approach in your emails. There are still regular accessibility considerations of things like the legibility of text placed on top of this background, but those are more generic rules and not specific to VML.
This method seems to fail in some part of every test I ran.
Keyboard accessibility
We have tried several ways of doing this, but there is no way we have found to make this approach accessible for keyboard inputs. The VML shape is treated like a single image, the content inside can’t be focused or selected, and links can not be clicked.
Text reader
When selecting the text, the “read aloud” feature in Office is greyed out and doesn’t work with any text inside VML.
NVDA
The VML shape is just announced as a “graphic” and a user can’t read anything inside this, although we can add alt text to it. None of the content, such as headings or links are included in the shortcut menus.
JAWS
The content inside VML can be focused, and headings are read correctly and also appear in the headings shortcut menu.
Links are not clickable from navigating in the email, however, they appear in the links shortcut menu and are clickable from there.
Narrator
The content inside VML can be focused and read. Headings and links are read correctly, and links are clickable. Links are listed in the shortcut menu and clickable from there, but the heading is not.
When navigating with the down arrow, navigation gets stuck in the VML shape and you can’t use the down arrow to get to the content below, so a visually impaired user will likely assume that it is the end of the message.
Conclusion
Accessibility can sometimes be a hard sell, but here it seems pretty clear even to the most skeptical. The content inside VML shapes is making it hard, or even impossible, for users to read your content or click your links. This can lose you engagement, lose you subscribers, and lose you money.
But if you want to apply a background to the <body> of your email using <v:background> you should be fine.
VML is an image format and using it for images works great. VML images are sometimes used to create things like fancy page breaks. The same rules apply as they do for regular <img> tags, you must include an alt attribute to provide alt text.