WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Sandy Feldman
Date: Aug 11, 2017 9:02AM


hello Léonie, hey all,

Can you please take a look at this one? I have a feeling I've got it now!

http://imerciv.com/svg/

fingers crossed, and thanks for all your help. Sandy


On 2017-08-10 10:42 AM, Léonie Watson wrote:
> I've been doing some testing since this thread started. The <use>
> element is not helping in terms of browser/screen reader support
> unfortunately.
>
> The best (most consistently supported) solution is to use the <img>
> element to pull in the SVG. In this context the SVG is just a basic
> image.
>
>
> The next best method seems to be to avoid the <use> element, and drop
> the <symbol> directly into the link.
>
> <a href="https://facebook.com">
> <svg role="img" aria-labelledby="facebook">
> <title id="facebook">Go to facebook</title>
> <symbol id="icon-facebook" viewBox="0 0 30.162 64">
> <path fill="#FFFFFF"
> d="M30.113,0.001c0,0-6.156,0-10.239,0c-6.082,0-12.843,2.549-12.843,11.351c0.032,3.065,0,6.001,0,9.306H0
> v11.173h7.251V64h13.321V31.616h8.794l0.796-10.991h-9.821c0,0,0.026-4.893,0-6.31c0-3.476,3.628-3.279,3.84-3.279
>
> c1.73,0,5.081,0.005,5.942,0V0L30.113,0.001L30.113,0.001z"/>
> </symbol>
> </svg>
> </a>
>
>
> Then use the img role and a label to fool the browser into thinking
> the <svg> is the equivalent of an <img>.
>
>
>
>
> On 10/08/2017 13:59, Kelly Ford wrote:
>> 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
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>> >> >> >> >>
>

--
Sandy

sandyfeldman.com
sandyfeldman.tumblr.com/
ca.linkedin.com/in/sandyfeldman
inclusivemedia.ca