WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender] SVG accessibility

for

From: Mallory
Date: Jul 6, 2020 1:48PM

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