WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender] SVG accessibility

for

From: Sandy Feldman
Date: Jul 6, 2020 11:24AM

Léonie, please don't hate to mention it! I had it like that, and now
I've restored it to that.

I can imagine in some circumstances the duplicate alt text and
aria-label could lead to a screen reader saying something like "twitter
twitter".

Now that the client told me the problem was he needed to change his
browser settings I breathed a sigh of relief and went back to what I had.

I am so lucky to be able to call on you all out there. Thank you.

Sandy

On 2020-07-06 12:34 p.m., Léonie Watson wrote:
> I hate to mention this, but you do not need the aria-label. You just
> need the alt attribute on the <img> element inside the link.
>
> <a href="https://www.facebook.com/theimagecenter">
>   <img src="/wp-content/uploads/2020/05/facebook.svg" alt="FaceBook"><
> /a>
>
> The reason is that the alt attribute and the aria-label attribute both
> do the same thing, so you only need one of them. They both give the
> <img> element what is known as an "accessible name". You can find out
> more about accessible names here:
> https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/
>
>
> In this case the fact that your <img> element has an SVG file as its
> source, as opposed to a JPG, GIF or PNG, does not matter. You can just
> treat it exactly like the following:
>
> <a href="https://www.facebook.com/theimagecenter">
>   <img src="/wp-content/uploads/2020/05/facebook.png" alt="FaceBook"><
> /a>
>
> If your link contained an <svg> element instead of a <img> element,
> then you would need to use ARIA to make it work. The ARIA you'd use
> would effectively tell browsers to treat the <svg> element exactly
> like it would an <img> element with an alt attribute.
>
> It would look something like this:
>
> <a href="https://www.facebook.com/theimagecenter">
>   <svg role="img" aria-label="Facebook">//Other SVG elements here</svg>
> /a>
>
> But since your link does not embed SVG content directly inside it, it
> just uses an <img> element, I do not think there is any need for any
> ARIA in this case.
>
> Léonie.
>
> On 06/07/2020 16:21, Sandy Feldman wrote:
>> 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