E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 13 (In chronological order)

From: Sandy Feldman
Date: Mon, Jul 06 2020 8:24AM
Subject: SVG accessibility
No previous message | Next message →

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://dev.imagemd.org/

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

From: Brian Lovely
Date: Mon, Jul 06 2020 8:29AM
Subject: Re: [External Sender] SVG accessibility
← Previous message | Next message →

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


--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Date: Mon, Jul 06 2020 8:35AM
Subject: Re: SVG accessibility
← Previous message | Next message →

The links do seem work in Chrome (and other Chromium browsers) with Jaws
2020, and there is nothing in the code to suggest that they should not.
It may therefore be a problem with the version of Jaws being used, or a
glitch in that particular setup.

Other than this, the fact that the file being pulled into the <img>
element is an SVG file does not really matter. You've done the right
thing by giving the <img> element an alt attribute, and that is
essentially all that should be needed.

You do not need to add role="img" to the <img> element though. The <img>
element already has a role of image, so adding the role explicitly
doesn't do anything except add code you don't need.

HTH
Léonie.



On 06/07/2020 15:24, Sandy Feldman 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://dev.imagemd.org/
>
> 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!
>

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

From: Sandy Feldman
Date: Mon, Jul 06 2020 9:21AM
Subject: Re: [External Sender] SVG accessibility
← Previous message | Next message →

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

From: Sandy Feldman
Date: Mon, Jul 06 2020 9:23AM
Subject: Re: SVG accessibility
← Previous message | Next message →

Léonie, Brian,

Here we are!

The client wrote, "It still didn't work so I went into Jaws settings and
told it to show 'all graphical links'".

thanks again for taking the time to help sort this out.

with gratitude and best regards,

Sandy



On 2020-07-06 10:35 a.m., Léonie Watson wrote:
> The links do seem work in Chrome (and other Chromium browsers) with > Jaws 2020, and there is nothing in the code to suggest that they >
should not. It may therefore be a problem with the version of Jaws >
being used, or a glitch in that particular setup. > > Other than this,
the fact that the file being pulled into the <img> > element is an SVG
file does not really matter. You've done the right > thing by giving the
<img> element an alt attribute, and that is > essentially all that
should be needed. > > You do not need to add role="img" to the <img>
element though. The > <img> element already has a role of image, so
adding the role > explicitly doesn't do anything except add code you
don't need. > > HTH Léonie. > > > > On 06/07/2020 15:24, Sandy Feldman
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://dev.imagemd.org/ >> >> 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

From: Date: Mon, Jul 06 2020 10:34AM
Subject: Re: [External Sender] SVG accessibility
← Previous message | Next message →

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

From: Sandy Feldman
Date: Mon, Jul 06 2020 11:24AM
Subject: Re: [External Sender] SVG accessibility
← Previous message | Next message →

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

From: Mallory
Date: Mon, Jul 06 2020 1:48PM
Subject: Re: [External Sender] SVG accessibility
← Previous message | Next message →

Just a note, if there are older Mac version VoiceOver users, they may not hear the alt of the image without the role=img.
I don't own a Mac so don't know which version exactly fixed this, but a client in education with a lot of Mac users was forced to add in the role=img even as recently as this past January, solely for image elements who were pulling in SVGs:
<img src="foo.svg" role="img" alt="the text">

I *think* this bug was specifically Safari browser's fault, not VoiceOver.

I say this only in case someone with a Mac reports they're not getting the alt but instead something about "groups"-- see if they can update to a more recent Safari and try again.

cheers,
_mallory

On Mon, Jul 6, 2020, at 7:24 PM, Sandy Feldman wrote:
> 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 ADDRESS 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
>
> > > > >

From: Graham Armfield
Date: Wed, Jul 15 2020 6:03AM
Subject: Re: [External Sender] SVG accessibility
← Previous message | Next message →

Re whether role="img" is required...

Some time ago I created a test page that has two SVG images in it that are
pulled from SVG files using the <img> element. They both have an alt
attribute set, but only one has role="img".

I've just tried using Voiceover on an iPhone 8 on iOS 13.3 and it
completely ignores the image without the role="img".

On my Android phone both images are announced by Talkback.

The test page is at https://research.coolfields.co.uk/svg/svg-file-alt.html

I don't have access to a mac at the moment, so it would be useful to see if
there is any difference.

Regards
Graham Armfield
coolfields.co.uk <http://www.coolfields.co.uk/>;

From: Patrick H. Lauke
Date: Wed, Jul 15 2020 7:22AM
Subject: Re: [External Sender] SVG accessibility
← Previous message | Next message →

On 15/07/2020 13:03, Graham Armfield wrote:
> Re whether role="img" is required...
>
> Some time ago I created a test page that has two SVG images in it that are
> pulled from SVG files using the <img> element. They both have an alt
> attribute set, but only one has role="img".
>
> I've just tried using Voiceover on an iPhone 8 on iOS 13.3 and it
> completely ignores the image without the role="img".
>
> On my Android phone both images are announced by Talkback.
>
> The test page is at https://research.coolfields.co.uk/svg/svg-file-alt.html

It's a long-standing VoiceOver bug
https://bugs.webkit.org/show_bug.cgi?id=187695

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Sandy Feldman
Date: Wed, Jul 15 2020 7:46AM
Subject: Re: [External Sender] SVG accessibility
← Previous message | Next message →

hey Graham,

I've got a test page up there too! I wonder how many of them are out
there? And is there a definitive one, that's been really thoroughly tested?

https://sandyfeldman.com/svga11y/

A friend has tested these using JAWS. If anyone has a moment to check
these with other screen readers I would love the feedback. Or a link to
the one that is really credible.

I have added role="img" to the SVGs on the project I am working on
(thank you Mallory!). I have to say that they don't look like they are
doing anything, but now that I know, there they are.

It's just wonderful to be able to get the help and feedback that's
available through this list.

--
Sandy
sandyfeldman.com



On 2020-07-15 8:03 a.m., Graham Armfield wrote:
> Re whether role="img" is required...
>
> Some time ago I created a test page that has two SVG images in it that
> are pulled from SVG files using the <img> element. They both have an
> alt attribute set, but only one has role="img".
>
> I've just tried using Voiceover on an iPhone 8 on iOS 13.3 and it
> completely ignores the image without the role="img".
>
> On my Android phone both images are announced by Talkback.
>
> The test page is at
> https://research.coolfields.co.uk/svg/svg-file-alt.html
>
> I don't have access to a mac at the moment, so it would be useful to
> see if there is any difference.
>
> Regards
> Graham Armfield
> coolfields.co.uk <http://www.coolfields.co.uk/>;
>

From: Tyler Shepard
Date: Wed, Jul 15 2020 1:01PM
Subject: Re: [External Sender] SVG accessibility
← Previous message | Next message →

I took a look at the website using NVDA not the code so I am not sure if
this is helpful but the image graphics for "twitter "youtube "facebook" are
understandable ie I know they go to Youtube or Facebook. Does this help?

On Mon, Jul 6, 2020 at 7:30 AM Brian Lovely via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > 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 ADDRESS 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$
> > > >
>
>
> --
> *Brian Lovely*
> Capital One Digital Accessibility
> 804.389.1064
>
> >
>
>
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The information
> transmitted herewith is intended only for use by the individual or entity
> to which it is addressed. If the reader of this message is not the intended
> recipient, you are hereby notified that any review, retransmission,
> dissemination, distribution, copying or other use of, or taking of any
> action in reliance upon this information is strictly prohibited. If you
> have received this communication in error, please contact the sender and
> delete the material from your computer.
>
>
>
> > > > >

From: Sandy Feldman
Date: Wed, Jul 15 2020 2:01PM
Subject: Re: [External Sender] SVG accessibility
← Previous message | No next message

It does! Thank you very much for taking the time to look at this.

Sandy

On 2020-07-15 3:01 p.m., Tyler Shepard wrote:
> I took a look at the website using NVDA not the code so I am not sure if
> this is helpful but the image graphics for "twitter "youtube "facebook" are
> understandable ie I know they go to Youtube or Facebook. Does this help?
>
> On Mon, Jul 6, 2020 at 7:30 AM Brian Lovely via WebAIM-Forum <
> = EMAIL ADDRESS REMOVED = > 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 ADDRESS 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$
>>> >>>
>>
>> --
>> *Brian Lovely*
>> Capital One Digital Accessibility
>> 804.389.1064
>>
>> >>
>>
>>
>> The information contained in this e-mail is confidential and/or
>> proprietary to Capital One and/or its affiliates and may only be used
>> solely in performance of work or services for Capital One. The information
>> transmitted herewith is intended only for use by the individual or entity
>> to which it is addressed. If the reader of this message is not the intended
>> recipient, you are hereby notified that any review, retransmission,
>> dissemination, distribution, copying or other use of, or taking of any
>> action in reliance upon this information is strictly prohibited. If you
>> have received this communication in error, please contact the sender and
>> delete the material from your computer.
>>
>>
>>
>> >> >> >> >>
> > > > --
Sandy
sandyfeldman.com