WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Jim Homme
Date: Aug 4, 2017 7:12AM

Hi,
I just checked this out with NVDA and Firefox. What I see is acting like perfectly accessible text links. Is that what I'm supposed to be seeing? Is the screen reader supposed to not know about any images? If this is a good example, may I steel it?

Thanks.

Jim

=========Jim Homme,
Team Lead and Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
<EMAIL REMOVED>
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O

From: Sandy Feldman<mailto: <EMAIL REMOVED> >
Sent: Thursday, August 3, 2017 11:21 AM
To: <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >; WebAIM Discussion List<mailto: <EMAIL REMOVED> >
Subject: Re: [WebAIM] using .svg images accessibly

Thanks so much for taking the time to help with this. I have used your
suggestions to modify the code.

What do you think?

http://haltontrophies.com/svg/

Sandy


> On 2017-08-03 10:54 AM, Léonie Watson wrote:
>> On 03/08/2017 15:03, Sandy Feldman wrote:
>>> I would like to use .svg images accessibly. I have a test that looks
>>> fine, but it breaks validation. It's based on
>>> https://codepen.io/mambroz/pen/kBGsH
>>>
>>> Each svg has a title and a description. The descriptions seem
>>> excessive to me - surely the title, "FaceBook" is enough, and people
>>> don't need a description saying "Link to Facebook"? Can I just
>>> delete these, or will I be making trouble for someone?
>>
>> In this case I would delete the <desc> elements. They're mostly used
>> by screen readers, and for simple icons like these, a description of
>> the icon (in addition to its title) is probably excessive.
>>
>>>
>>> The svgs are labelled by their titles <aria-labelledby="title"> .
>>> The w3 validator is saying this is done wrong, "attribute must point
>>> to an element in the same document." The attribute is right there,
>>> on the next line.
>>>
>> You will receive validation errors when you use ARIA with SVG,
>> because officially speaking SVG doesn't support ARIA yet. ARIA
>> support won't officially arrive in SVG until SVG 2.0 is released.
>>
>> In reality you can use ARIA and SVG together (and have been able to
>> do so for some time), but until that is official, you'll find that
>> validators will throw errors at you.
>>
>> Where you have multiple icons in your SVG, make sure that each
>> <symbol> element has a unique id. If all your aria-labelledby
>> attributes point to "title", that too will throw errors (and also
>> cause problems for screen reader users.
>>
>>> Total validator is saying "Link text is missing" on the svg images.
>>>
>>> WAVE has marked each of the images as errors, but I can't tell what
>>> the error is.
>>
>> How are you embedding the SVG in your HTML? If you can share the code
>> for an actual implementation, rather than the example code you based
>> it on, it'll help.
>>
>>
>> Léonie.
>
> --
> Sandy
>
> sandyfeldman.com
> sandyfeldman.tumblr.com/
> ca.linkedin.com/in/sandyfeldman
> inclusivemedia.ca

--
Sandy

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