WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: When "Alt" is not the semantically-correct representation of an image

for

From: Steve Faulkner
Date: Jul 28, 2018 8:20AM

>I wonder if an <svg> element with <text> and role="presentation" would
>be interpreted by screen readers are plain text.

forked and made this rather elaborate SVG text example as a test, seems to
work fine after sprinkling some ARIA on it.

demo https://s.codepen.io/stevef/debug/wxPojo
codepen: https://codepen.io/stevef/pen/wxPojo


--

Regards

SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;

On 28 July 2018 at 14:55, Birkir R. Gunnarsson < <EMAIL REMOVED> >
wrote:

> I wonder if an <svg> element with <text> and role="presentation" would
> be interpreted by screen readers are plain text.
> SVG icons can be resized and the <text> element can be styled, so for
> sighted users SVGs are much more accessible.
> It's getting awfully hacky admittedly.
>
>
>
> On 7/28/18, Steve Faulkner < <EMAIL REMOVED> > wrote:
> > Ryan, no worries, and I agree with your point :-)
> >
> > --
> >
> > Regards
> >
> > SteveF
> > Current Standards Work @W3C
> > <http://www.paciellogroup.com/blog/2015/03/current-
> standards-work-at-w3c/>
> >
> > On 28 July 2018 at 14:45, Ryan E. Benson < <EMAIL REMOVED> > wrote:
> >
> >> Steve, I wasn't specifically talking about that part or to you,
> apologies
> >> if you thought that. I was commenting on how people were saying how it
> >> would work with JAWS and NVDA, but Voice Over may have issues.
> >>
> >> Ryan E. Benson
> >>
> >> On Sat, Jul 28, 2018, 09:35 Steve Faulkner < <EMAIL REMOVED> >
> >> wrote:
> >>
> >> > Hi Ryan, that's why it says in the spec:
> >> >
> >> > " Sometimes, an image only contains text, and the purpose of the image
> >> > is
> >> > to display text using visual effects and /or fonts. It is *strongly*
> >> > recommended that text styled using CSS be used, but if this is not
> >> > possible, provide the same text in the alt attribute as is in the
> image.
> >> "
> >> > https://www.w3.org/TR/html/semantics-embedded-content.
> >> html#images-of-text
> >> >
> >> > --
> >> >
> >> > Regards
> >> >
> >> > SteveF
> >> > Current Standards Work @W3C
> >> > <http://www.paciellogroup.com/blog/2015/03/current-
> >> standards-work-at-w3c/>
> >> >
> >> > On 28 July 2018 at 14:29, Ryan E. Benson < <EMAIL REMOVED> >
> wrote:
> >> >
> >> > > Just a friendly reminder that accessibility stretches past screen
> >> > readers.
> >> > > I can't test right now, but this could cause headaches for people
> who
> >> > > magnify the screen versus using a screen reader, depending on how
> the
> >> > text
> >> > > is hidden.
> >> > >
> >> > > Ryan E. Benson
> >> > >
> >> > > On Sat, Jul 28, 2018, 02:40 Steve Faulkner <
> <EMAIL REMOVED> >
> >> > > wrote:
> >> > >
> >> > > > The HTML spec includes advice/examples along these lines:
> >> > > >
> >> > > > Images of text
> >> > > > https://www.w3.org/TR/html/semantics-embedded-content.
> >> > > html#images-of-text
> >> > > > Inline images
> >> > > >
> >> > https://www.w3.org/TR/html/semantics-embedded-content.
> html#inline-images
> >> > > >
> >> > > > --
> >> > > >
> >> > > > Regards
> >> > > >
> >> > > > SteveF
> >> > > > Current Standards Work @W3C
> >> > > > <http://www.paciellogroup.com/blog/2015/03/current-
> >> > > standards-work-at-w3c/>
> >> > > >
> >> > > > On 28 July 2018 at 05:25, Birkir R. Gunnarsson <
> >> > > > <EMAIL REMOVED> >
> >> > > > wrote:
> >> > > >
> >> > > > > I was one of the people criticizing role="text".
> >> > > > > If you present something as an image to some users you should
> >> present
> >> > > > > it to all users.
> >> > > > > Suppose you feel the need to use a heart icon to express your
> >> undying
> >> > > > > love for nacho fries:
> >> > > > > "I heart nacho fries"
> >> > > > > ("heart" being an image of a heart"), you chose a certain style
> /
> >> > > > approach.
> >> > > > > You can make it accessible by adding alt="love" if you want the
> >> > > > > literal meaning or alt="heart" if you want to inform a screen
> >> reader
> >> > > > > user that a heart icon stands for love (or, in this case, lust).
> >> > > > > Yes, the screen reader will add the word "graphics" or "image"
> to
> >> the
> >> > > > > sentence (depending on which one you use). A screen reader user
> is
> >> > > > > used to that, it's the standard for how an icon is presented.
> >> > > > >
> >> > > > > If you wanted to simply express your love as text you could have
> >> just
> >> > > > > written "I love nacho fries". The cognitive load for a screen
> >> reader
> >> > > > > user is no greater than that of other users who see text mixed
> >> > > > > with
> >> > an
> >> > > > > image.
> >> > > > >
> >> > > > > If you are really worried mark the image as presentational and
> >> > replace
> >> > > > > it with a visually hidden text,, or tell your content person
> that
> >> > > > > mixing text and images like that can present a problem to screen
> >> > > > > reader users; possibly others as well, what about users with
> >> > cognitive
> >> > > > > impairments, they may benefit or be harmed by this approach.
> >> > > > > We don't need ARIA to fix what is not really a problem. I have
> yet
> >> to
> >> > > > > see a convincing example where this role can be used for a
> purpose
> >> > > > > other than avoiding the word "graphic" to be added by a screen
> >> > reader.
> >> > > > >
> >> > > > >
> >> > > > > On 7/27/18, Duff Johnson < <EMAIL REMOVED> > wrote:
> >> > > > > > Hi Steve,
> >> > > > > >
> >> > > > > >>> But role="text" is not a
> >> > > > > >>> documented role (yet?).
> >> > > > > >>
> >> > > > > >> It was dumped from ARIA as there was not consensus on how it
> >> > should
> >> > > > be
> >> > > > > >> implemented.
> >> > > > > >
> >> > > > > > Boo. Hiss. This should get another look.
> >> > > > > >
> >> > > > > > Or… add an "ActualText" attribute to HTML 5.3.. :-)
> >> > > > > >
> >> > > > > > Duff.
> >> > > > > > > >> > > > > > > >> > > > > > > >> > > > > > > >> > > > > >
> >> > > > >
> >> > > > >
> >> > > > > --
> >> > > > > Work hard. Have fun. Make history.
> >> > > > > > >> > > > > > >> > > > > > >> > > > > > >> > > > >
> >> > > > > >> > > > > >> > > > > >> > > > > >> > > >
> >> > > > >> > > > >> > > > >> > > > >> > >
> >> > > >> > > >> > > >> > > >> >
> >> > >> > >> > >> > >>
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >