WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Jim Allan
Date: Aug 9, 2017 2:41PM

  • Next message: Birkir R. Gunnarsson: "Re:
      for form layout?"
    • Previous message: Poornima: "Re:
      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/sandyfeldmaninclusivemedia.ca
      >
      > > > > >
      >
      >
      >


      --
      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