WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender] SVG accessibility

for

From: Sandy Feldman
Date: Jul 6, 2020 9:21AM

Brian, Leonie,

thanks for your help.

https://dev.imagemd.org/

I just I took out role="img" and added ARIA labels. I am relieved that I
don't hear "FaceBook FaceBook", in VoiceOver anyways!

I am waiting to hear back from the client.

thanks!

Sandy



On 2020-07-06 10:29 a.m., Brian Lovely via WebAIM-Forum wrote:
> You need a link with perceivable text, like <a href="path/to">Social
> Media</a>
>
> An SVG with no text or title children will not announce, so you could
> provide the link with a child SVG that has a child title.
>
> <a href="path/to"><svg><title>Social Media</title></svg></a>
>
> Alternately, you could convert the SVG to an img
>
> <a href="path/to"><svg role="img" aria-label="Social Media"></svg></a>
>
>
> Note that an ARIA img does not support the alt attribute, so you have to
> substitute aria-label
>
>
> On Mon, Jul 6, 2020 at 10:24 AM Sandy Feldman < <EMAIL REMOVED> >
> wrote:
>
>> hey all,
>>
>> I hope you can help with SVG accessibility. I am working on a site that
>> includes an ARIA region labelled "connect with us".
>>
>>
>> https://urldefense.com/v3/__https://dev.imagemd.org/__;!!EFVe01R3CjU!Jqzfw49bk9Zgkev-pe-EqsQqhydr0ivaAzWdSlf85Np8nT1Nv34KBAOKAtCi4s6A_m3syw$
>>
>> The first three links in that region are SVG files, linking to social
>> media.
>>
>> These work for me using VoiceOver and chrome. They work for the client
>> using JAWS and FireFox. They don't work using JAWS and chrome.
>>
>> They are in the page as images with alt tags. I tried adding titles to
>> each of the SVG files, and the client says that it didn't help. Then I
>> added role="img" to the link in the page. No difference either. I have
>> pasted part the client's email at the end.
>>
>> What am I missing?
>>
>> Thank you all for your expertise and helpfulness!
>>
>> Sandy
>>
>>
>> Michael wrote:
>>
>> Something strange going on with the main page links with Chrome. They
>> work fine with Firefox. When I go down the screen with Chrome I hear.
>>
>> Connect with us navigation region
>>
>> List of five items
>>
>> Blank
>>
>> Blank
>>
>> Blank
>>
>> Link get email updates
>>
>> Link donate now
>>
>> List end
>>
>> Connect with us navigation region end
>>
>> Interestingly, although my speech couldn't see it, when I tried to copy
>> and paste that portion of the website into this email I got what is below.
>>
>> FaceBookTwitterYouTube
>>
>> Get email updates
>>
>> Donate now!
>>
>> --
>> Sandy
>> sandyfeldman.com
>>
>> >> >> https://urldefense.com/v3/__http://list.webaim.org/__;!!EFVe01R3CjU!Jqzfw49bk9Zgkev-pe-EqsQqhydr0ivaAzWdSlf85Np8nT1Nv34KBAOKAtCi4s7bixKSqg$
>> List archives at
>> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!EFVe01R3CjU!Jqzfw49bk9Zgkev-pe-EqsQqhydr0ivaAzWdSlf85Np8nT1Nv34KBAOKAtCi4s4p4BHV4w$
>> >>
>
--
Sandy
sandyfeldman.com