WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From:
Date: Aug 14, 2017 2:29AM

On 11/08/2017 16:02, Sandy Feldman wrote:
> 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/

Looks good to me. Using the <img element is the most sure-fire way to
get cross-platform support. Sorry it took all this effort to get to this
point!


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

--
@LeonieWatson @ <EMAIL REMOVED> tink.uk Carpe diem