Does SVG text pass WCAG 1.4.5 (Images of Text)?

A recent question prompted me to ask whether the SVG <text> element would pass WCAG 2.0 1.4.5 (images of text).

WCAG Success Criterion (SC) 1.4.5 says:

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text

The following exceptions are noted:

• Customizable: The image of text can be visually customized to the user’s requirements;
• Essential: A particular presentation of text is essential to the information being conveyed.

The reason for this SC is that when text is presented in graphical format it has the following problems:

• It can’t be accessed directly by assistive technologies;
• It can’t be displayed using colours specified in the browser, or through a user’s personalised style sheets;
• It can’t be resized using the browser’s settings.

SVG is a graphical format, so when the <text> element is used it seems like it should qualify as text in an image. For example:

<svg version="1.1" width="150" height="100">
<text>Tequila!</text>
</svg>

As far as the platform accessibility APIs are concerned, this isn’t the case though. The SVG <text> element is exposed as text content by APIs including IAccessible2, UIAutomation and MSAA. This means assistive technologies like screen readers can access the text directly.

Like all SVG content, the <text> element can be styled using CSS. This means that the information in WCAG technique C22 is helpful when using <text> in SVG. Providing the separation of style and content is observed, SVG <text> can be displayed according to choices made through browser settings or personalised style sheets.

Another characteristic of SVG is that it scales. This means that SVG <text> can be resized using the browsers text resize settings, and that the size of text will scale depending on the size of the browser window.

So my take is that the SVG <text> element should pass WCAG SC1.4.5. In many respects <text> behaves more like text than graphical content, and it can be resized, selected and copied and displayed according to someone’s personal preferences. It’s an interesting question though, and there may be degrees of subtlety I haven’t considered in these notes!

With thanks to Steve Faulkner for help confirming these findings.