Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1.4.5 / 1.4.9 Image of Text and <text> inside SVGs #773

Open
patrickhlauke opened this issue Jun 8, 2019 · 1 comment

Comments

Projects
None yet
2 participants
@patrickhlauke
Copy link
Member

commented Jun 8, 2019

Ongoing discussion (today) about whether or not text inside SVGs passes "Images of Text".

https://webaim.org/discussion/mail_thread?thread=9282&id=40208#40208

The normative wording only defines "images of text" as https://www.w3.org/TR/WCAG21/#dfn-images-of-text

text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect

Generally, this is understood to mean text that's been presented as part of a bitmap or something. SVG can contain text as actual <text> elements of similar. So from this perspective it would pass these SCs.

However, once you dig into the rationale for/the intent of the SC, it becomes clear that the idea is that text (rather than images of text) can also be adapted more easily to users' needs

https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html

The intent of this Success Criterion is to encourage authors, who are using technologies which are capable of achieving their desired default visual presentation, to enable people who require a particular visual presentation of text to be able to adjust the text presentation as needed. This includes people who require the text in a particular font size, foreground and background color, font family, line spacing or alignment.

This is currently not the case for SVG text...changing any preferred font size/typeface/etc settings in the browser has no effect on text inside SVGs. No current user agent provides the ability to change these by default. So...unless a site that uses SVG text also provides custom mechanisms/controls (to satisfy the "Customizable: The image of text can be visually customized to the user's requirements"), I feel this is actually a fail.

I'll hazard a guess that this was not even an issue at the time WCAG 2.0 came out / wasn't really considered then. However, it would now be good to provide some guidance, and to perhaps expand the normative definition of "images of text" accordingly.

What's everybody else's take?

@alastc

This comment has been minimized.

Copy link
Contributor

commented Jun 11, 2019

My simple yardstick (which hadn't previously been challenged by the scenario SteveG talked about) was generally: Is it bitmap or not?

SVG stays crisp when zoomed, but UAs don't provide the same controls as HTML based text, so I see the point about it not meeting all of the intent of images-of-text.

I haven't done much experimentation with complex SVGs, but my understanding is that:

  • It is theoretically possible to change foreground/background colors with CSS, but not really implemented at the moment (not accessibility supported).
  • It would be difficult/impossible to apply different fonts/spacing/line-height to text in an SVG as the author generally assumes a position and size relative to other elements in the SVG (thinking of graphs, infographics etc).

The first issue I'd put to user-agents, the second is more tied to the purpose & capabilities of SVG.

Overall, it would be useful to add some nuance for what is basically vector text used in different ways than HTML text without accessibility-support for adaptation.

E.g. SVG is considered an image. If the size, position & color must be relative to its surroundings (e.g. graphs/infographics) then it does meet the "to achieve a particular visual effect" aspect. If not, then it fails 1.4.5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.