WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender] SVG accessibility

for

From: Date: Jul 6, 2020 10:34AM

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

--
Director @TetraLogical
https://tetralogical.com