WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Sandy Feldman
Date: Aug 3, 2017 9:20AM

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