E-mail List Archives
Thread: Using SVG to display text
Number of posts in this thread: 7 (In chronological order)
From: Steve Green
Date: Sat, Jun 08 2019 12:02AM
Subject: Using SVG to display text
No previous message | Next message →
I am working on a truly horrible e-learning application in which all the text has been implemented using SVG <text> elements. With respect to WCAG success criterion 1.4.5 (Images of Text), would you consider such content to be text or an image of text?
To me, it seems to be in between. The <text> element supports some CSS styles (such as font size), but does not support others (such as line-height), so it cannot be visually customized to the user's requirements.
I would like to say this violates 1.4.5, but I would welcome other opinions.
Regards,
Steve Green
Managing Director
Test Partners Ltd
020 3002 4176 (direct)
0800 612 2780 (switchboard)
07957 246 276 (mobile)
020 7692 5517 (fax)
Skype: testpartners
= EMAIL ADDRESS REMOVED =
www.testpartners.co.uk
Connect to me on LinkedIn - http://uk.linkedin.com/in/stevegreen2
From: Patrick H. Lauke
Date: Sat, Jun 08 2019 2:18AM
Subject: Re: Using SVG to display text
← Previous message | Next message →
On 08/06/2019 07:02, Steve Green wrote:
> I am working on a truly horrible e-learning application in which all the text has been implemented using SVG <text> elements. With respect to WCAG success criterion 1.4.5 (Images of Text), would you consider such content to be text or an image of text?
> > To me, it seems to be in between. The <text> element supports some
CSS styles (such as font size), but does not support others (such as
line-height), so it cannot be visually customized to the user's
requirements.
>
> I would like to say this violates 1.4.5, but I would welcome other opinions.
While arguably it's "text" (already a step up from, say, the vector
outlines of the characters themselves), you're right that it doesn't
allow the text to be customised by users (which is the idea behind
1.4.5). You could argue that it's a shortcoming of the UAs/of SVG as a
technology itself (so, for the latter, kind of exempting itself a bit
based on the " If the technologies being used..." preamble of the
SC)...but it can also be argued that there's really no reason/need for
the content to be using SVG in the first place if other alternatives
like HTML are viable.
Based on the intent in
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."
I'd say that unless the SVG also had custom controls/settings that
allowed users to change the text to their needs (thus meeting the
"Customizable: The image of text can be visually customized to the
user's requirements;" exception), this is indeed a fail.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Steve Green
Date: Sat, Jun 08 2019 2:47AM
Subject: Re: Using SVG to display text
← Previous message | Next message →
Thanks, that's just what I was hoping to hear. I wish I could share the code because it is utter filth - I think it's produced with Articulate or some similarly evil tool. Believe it or not, they are hiding that text with aria-hidden and applying the same text (usually, but not always) via an aria-label on the containing div. The entire page has role="application", so they have put tabindex="-1" on everything (text, links, buttons etc.) so that screen readers can access it. No native HTML elements are exposed to assistive technologies at all.
Furthermore, they are using JavaScript to control the tab sequence because the source order is completely random. But they forgot about the reverse tab sequence, which is all over the place.
Please excuse the rant, but I am extraordinarily pissed off with this crap and just feel the need to express feelings I can't share with the client.
Steve
From:
Subject: Re: Using SVG to display text
← Previous message | Next message →
On 08/06/2019 07:02, Steve Green wrote:
> I am working on a truly horrible e-learning application in which all the text has been implemented using SVG <text> elements. With respect to WCAG success criterion 1.4.5 (Images of Text), would you consider such content to be text or an image of text?
>
> To me, it seems to be in between. The <text> element supports some CSS styles (such as font size), but does not support others (such as line-height), so it cannot be visually customized to the user's requirements.
>
> I would like to say this violates 1.4.5, but I would welcome other opinions.
I don't think this fails the letter of 1.4.5. The browser considers the
content of a <text> element as text, it's exposed in the accessibility
API as text, and it fits the normative description of text in WCAG:
"sequence of characters that can be programmatically determined, where
the sequence is expressing something in human language"
It may fail the spirit of 1.4.5 if the <text> element isn't styled using
CSS though, and cannot therefore be visually customised for font, size,
colour and background (as the SC requires). The inability to adjust line
height would likely be a fail of 1.4.12 rather than 1.4.5 though.
Léonie.
>
> Regards,
> Steve Green
> Managing Director
> Test Partners Ltd
> 020 3002 4176 (direct)
> 0800 612 2780 (switchboard)
> 07957 246 276 (mobile)
> 020 7692 5517 (fax)
> Skype: testpartners
> = EMAIL ADDRESS REMOVED =
> www.testpartners.co.uk
>
> Connect to me on LinkedIn - http://uk.linkedin.com/in/stevegreen2
>
> > > > >
--
@TetraLogical TetraLogical.com
From: Patrick H. Lauke
Date: Sat, Jun 08 2019 5:46AM
Subject: Re: Using SVG to display text
← Previous message | Next message →
On 08/06/2019 10:12, Léonie Watson via WebAIM-Forum wrote:
> On 08/06/2019 07:02, Steve Green wrote:
>> I am working on a truly horrible e-learning application in which all
>> the text has been implemented using SVG <text> elements. With respect
>> to WCAG success criterion 1.4.5 (Images of Text), would you consider
>> such content to be text or an image of text?
>>
>> To me, it seems to be in between. The <text> element supports some CSS
>> styles (such as font size), but does not support others (such as
>> line-height), so it cannot be visually customized to the user's
>> requirements.
>>
>> I would like to say this violates 1.4.5, but I would welcome other
>> opinions.
>
> I don't think this fails the letter of 1.4.5. The browser considers the
> content of a <text> element as text, it's exposed in the accessibility
> API as text, and it fits the normative description of text in WCAG:
>
> "sequence of characters that can be programmatically determined, where
> the sequence is expressing something in human language"
>
> It may fail the spirit of 1.4.5 if the <text> element isn't styled using
> CSS though, and cannot therefore be visually customised for font, size,
> colour and background (as the SC requires). The inability to adjust line
> height would likely be a fail of 1.4.12 rather than 1.4.5 though.
The point of 1.4.5 isn't whether or not it's exposed as text though (to
the accessibility API or anything else), but whether or not users can
"distinguish" the text including adapting it to their need. While SVG
text remains crisp when zoomed (one aspect/reason often given for not
using text as images, in that "it pixelates when zoomed"), it can't be
adapted (can't currently change font, spacing, etc). And this is more
the point of the SC, but - as many SCs in 2.0, and even in 2.1 - the
original intent/meaning has probably been wordsmithed out of the
normative text in the end, leaving the normative part very vague. But if
you skim over the understanding doc
https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html there's
a lot of intent there about being customisable, which unless the author
has also provided a custom mechanism, won't be possible with current
user agents (e.g. in browser, setting some font override or whatever,
won't affect the font used inside the SVG)
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Jonathan Avila
Date: Sat, Jun 08 2019 5:58AM
Subject: Re: Using SVG to display text
← Previous message | Next message →
While I'd agree that SVG text rendering today doesn't meet the intent of 1.4.5 I'd say that your assertion that the nuance is not in the normative text of the SC and as the normative text is written there is a strong case to say it's not a fail of the success criteria (unfortunately). Definitely something that impacts the user though and worth noting and recommendation changes both to user agents and when use is widespread by authors.
Jonathan
From: Patrick H. Lauke
Date: Sat, Jun 08 2019 6:03AM
Subject: Re: Using SVG to display text
← Previous message | No next message
On 08/06/2019 12:58, Jonathan Avila wrote:
> While I'd agree that SVG text rendering today doesn't meet the intent of 1.4.5 I'd say that your assertion that the nuance is not in the normative text of the SC and as the normative text is written there is a strong case to say it's not a fail of the success criteria (unfortunately). Definitely something that impacts the user though and worth noting and recommendation changes both to user agents and when use is widespread by authors.
I'd posit that the normative SC text (and the definition for "images of
text" which essentially boils down to "text in a bitmap") didn't even
consider SVG text or similar at the time.
For what it's worth, I've filed this issue against WCAG to see if this
can be discussed and potentially clarified in future
https://github.com/w3c/wcag/issues/773
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke