WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Kelly Ford
Date: Aug 10, 2017 6:59AM

  • Next message: Mallory: "Re: Code review please"
  • Previous message: Birkir R. Gunnarsson: "Re:
    To add a bit more randomization but also reality for some users, JAWS will in some cases read what's in the title. If you turn the virtual PC cursor off in JAWS here by pressing ins+z, JAWS then uses the title info if theuser is readingin Internet Explorer.

    Kelly

    -----Original Message-----
    From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Jim Allan
    Sent: Wednesday, August 9, 2017 3:41 PM
    To: Sandy Feldman < <EMAIL REMOVED> >
    Cc: WebAIM Discussion List < <EMAIL REMOVED> >
    Subject: Re: [WebAIM] using .svg images accessibly

    don't know if you noticed
    Jaws speaks the link info
    NVDA speaks the title

    special

    On Wed, Aug 9, 2017 at 1:19 PM, Sandy Feldman < <EMAIL REMOVED> >
    wrote:

    > OK, that's ridiculously wordy. One of them has to go.
    >
    > Is there one that makes more sense to keep than the other? Maybe just
    > the one on the link, since that's what I'm hearing in VoiceOver?
    >
    > Jim, thank you for taking the time to check this and write it up for me.
    >
    > Sandy
    >
    > On 2017-08-09 1:52 PM, Jim Allan wrote:
    >
    > jaws read both, it said...
    > facebook in the title in the title facebook on the link
    >
    > the links list shows
    > Facebook on the link
    >
    > NVDA read both, it said...
    > Facebook in the title in the title
    > graphic clickable
    > link Facebook on the link
    >
    > The links list shows
    > Facebook in the title in the title
    >
    >
    >
    >
    >
    > On Wed, Aug 9, 2017 at 11:56 AM, Sandy Feldman
    > < <EMAIL REMOVED> > < <EMAIL REMOVED> >
    > wrote:
    >
    >
    > Léonie,
    >
    > Thanks again for taking the time to help me work this through. I have
    > a new version of the page, modified as you suggested.
    > http://haltontrophies.com/svg/
    >
    > This one actually validates using validator.w3.org! What do you think
    > of it? Is it actually working? Could it be better?
    >
    > Each svg on this page has two titles. One is in the link, the other is
    > an ARIA label. I think that VoiceOver is just reading the one on the
    > link. I would like to take the other out, to reduce the redundancy in the markup.
    > Is that a good idea?
    >
    > I did also try using svg images, but I couldn't find a good resource
    > for how to embed and style them. Any suggestions?
    >
    > Thanks, all, for being out there to call on.
    >
    > Sandy
    >
    >
    >
    >
    >
    > On 2017-08-04 11:03 AM, Léonie Watson wrote:
    >
    >
    > On 03/08/2017 16:20, Sandy Feldman wrote:
    >
    >
    > What do you think?http://haltontrophies.com/svg/
    >
    > These links work with screen readers, but probably not for the reasons
    > you think.
    >
    > The accessible name (link text) for the link is being provided by the
    > title attribute on the <a> element, not the <title> element in the
    > SVG. If you remove the title attribute the links stop working properly
    > with some screen reader/browser combinations.
    >
    > The reason is that you're using the <use> element in the SVG, with all
    > the accessibility applied to the original definition of the icon. When
    > you use the <use> element to duplicate the original, the accessibility
    > isn't reliably inherited.
    >
    > A related problem is that the title attribute can cause problems when
    > it's used on links. More on this
    > here:https://www.paciellogroup.com/blog/2013/01/using-the-html-ti
    > tle-attribute-updated/
    >
    > You have a number of options...
    >
    > 1. Use the aria-label attribute instead of the title attribute.
    >
    > This will provide an accessible name for the link that screen readers
    > can access, without the problems caused by the title attribute for
    > other AT
    > users:
    >
    > <a href="..." aria-label="Find me on YouTube">
    >
    > 2. Use the <title> element inside the <use> element.
    >
    > You'd need to do this every time you used the icon. Something like this:
    >
    > <a class="youtube" href="https://www.youtube.com/" <https://www.youtube.com/>.
    > <svg class="socialIcon">
    > <use aria-labelledby="youtube-title" xlink:href="#icon-youtube">
    > <title id="youtube-title">Find me on YouTube</title> </use> </svg>
    > </a>
    >
    > 3. Use an <img> element.
    >
    > The icons are just simple static images, so you could save each one in
    > its own .svg file and use it like you would any other image format:
    >
    > <img src="youtube-icon.svg" alt="Find me on YouTube">
    >
    > You'll still get the flexibility/scalability of the SVG, but with the
    > simple accessibility of the <img> element.
    >
    > HTH
    > Léonie.
    >
    >
    >
    > --
    > Sandy
    > sandyfeldman.comsandyfeldman.tumblr.com/ca.linkedin.com/in/sandyfeldma
    > ninclusivemedia.ca
    >
    > > > archives at http://webaim.org/discussion/archives
    > >
    >
    >
    >


    --
    Jim Allan, Accessibility Coordinator
    Texas School for the Blind and Visually Impaired
    1100 W. 45th St., Austin, Texas 78756
    voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
    "We shape our tools and thereafter our tools shape us." McLuhan, 1964