WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Screenreader Combo Failing aria-labelledby

for

From: Birkir R. Gunnarsson
Date: May 5, 2021 5:12AM

How does just using the <title> element of the SVG work? That is the
native way to provide text alternatives for SVG images (we've ditched
them in favor of ARIA trickery due to lack of browser/screen reader
support but I thought this was improving).
LIke Patrick said, add role="img" to the svg and see if the
aria-labelledby support improves.
Then again, aria-label is simpler to implement (not requiring a
different page element and an id reference), so if it works I'd just
go with that.


On 5/5/21, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
> On 05/05/2021 05:38, Cleboski, Kelsie E wrote:
>> Hello all,
>>
>> I'm working with a vendor to address an issue with missing alt text on
>> images (SVGs) in a website template, and I have manually tested two
>> possible solutions that use ARIA.
>>
>> One uses aria-label, while the other uses aria-labelledby and refers to a
>> title in the SVG file for the alternative text.
>>
>> For the aria-label technique, the text read as desired in all the combos I
>> have been able to test (With NVDA+Chrome, +Firefox, +Edge; and With
>> VoiceOver+Chrome, +Firefox, +Safari)
>>
>> With aria-labelledby, NVDA read as desired with Chrome, Firefox, and Edge.
>> However, Voiceover succeeded with Chrome, but ignored the alternative text
>> with Firefox and Safari.
>>
>> From what I can tell, both the failed browsers should be compatible with
>> the aria-labelledby technique.
>>
>> Where else should I look to try to pinpoint the problem?
>
> Are you using the SVGs as actual embedded/inline <svg> blocks? Have you
> given the element an explicit role="img"? i.e. <svg role="img"
> aria-label="Something" ...> ... </svg>
>
> 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
> > > > >


--
Work hard. Have fun. Make history.