E-mail List Archives

Search E-mail List Archives for

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

From: Cleboski, Kelsie E
Date: Tue, May 04 2021 10:38PM
Subject: Screenreader Combo Failing aria-labelledby
No previous message | Next message →

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?

Thank you!

Kelsie Cleboski, MFA

She/her

Coordinator, Web Communications

Marketing & Communications

Bayou Building 2519



University of Houston-Clear Lake

2700 Bay Area Blvd. | Houston, Texas 77058

o: 281.283.2025

= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | uhcl.edu<mailto:http://www.uhcl.edu>;

Connect with us: Facebook<https://www.facebook.com/UHClearLake> | Twitter<https://twitter.com/UHClearLake> | LinkedIn<https://www.linkedin.com/school/university-of-houston-clear-lake/>


Please Note: During current remote work and social distancing, email is the best way to reach me.

From: Patrick H. Lauke
Date: Wed, May 05 2021 2:01AM
Subject: Re: Screenreader Combo Failing aria-labelledby
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Wed, May 05 2021 5:12AM
Subject: Re: Screenreader Combo Failing aria-labelledby
← Previous message | Next message →

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

From: Patrick H. Lauke
Date: Wed, May 05 2021 5:16AM
Subject: Re: Screenreader Combo Failing aria-labelledby
← Previous message | Next message →

On 05/05/2021 12:12, Birkir R. Gunnarsson wrote:
> 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).

The issue with <title> in the <svg> is that in most (all?) browsers,
this also leads to a classic tooltip (like for the title="..."
attribute) when hovering over with the mouse, which most of the time is
undesirable.

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: jeffgutsell@fuse.net
Date: Wed, May 05 2021 9:44AM
Subject: Re: Screenreader Combo Failing aria-labelledby
← Previous message | Next message →

Are there any issues with inserting an SVG file as the source of an <img> and putting alt text on the image?

Jeff Gutsell


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: Wednesday, May 5, 2021 7:17 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Screenreader Combo Failing aria-labelledby

On 05/05/2021 12:12, Birkir R. Gunnarsson wrote:
> 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).

The issue with <title> in the <svg> is that in most (all?) browsers, this also leads to a classic tooltip (like for the title="..."
attribute) when hovering over with the mouse, which most of the time is undesirable.

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: Patrick H. Lauke
Date: Wed, May 05 2021 9:48AM
Subject: Re: Screenreader Combo Failing aria-labelledby
← Previous message | Next message →

On 05/05/2021 16:44, = EMAIL ADDRESS REMOVED = wrote:
> Are there any issues with inserting an SVG file as the source of an <img> and putting alt text on the image?

Last time I checked, VoiceOver will suddenly decide that the <img> is
not an image anymore and not announce the alt text, unless you then
backfill it with an explicit role="img"

<img role="img" src="foo.svg" alt="blah">

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: Aditya
Date: Wed, May 05 2021 4:59PM
Subject: Re: Screenreader Combo Failing aria-labelledby
← Previous message | Next message →

Im using aria-label instead of alt and role=img where ever svg is involved. Either <svg> or src is svg

That's working for me.

Sent from my iPhone

> On May 5, 2021, at 10:48 AM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
>
>> On 05/05/2021 16:44, = EMAIL ADDRESS REMOVED = wrote:
>> Are there any issues with inserting an SVG file as the source of an <img> and putting alt text on the image?
>
> Last time I checked, VoiceOver will suddenly decide that the <img> is not an image anymore and not announce the alt text, unless you then backfill it with an explicit role="img"
>
> <img role="img" src="foo.svg" alt="blah">
>
> 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: Birkir R. Gunnarsson
Date: Thu, May 06 2021 8:17AM
Subject: Re: Screenreader Combo Failing aria-labelledby
← Previous message | No next message

I rarely recommend using aria-labelledby for alt text of images, not
for technical complexity but for the nature of the image.
If the alt text of the image can be assigned based on visible text of
another element on the page, the image typically doesn't add any
information to the page.
This means that either the image should be decorative or that the text
of the aria-labelledby element is insufficient as a text equivalent
for the image.
I'd rather mark all images as decorative by default and include strict
authoring requirements in the CMS (+ authoring training) to remind
people to add alt text where needed.



On 5/5/21, Aditya via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
> Im using aria-label instead of alt and role=img where ever svg is involved.
> Either <svg> or src is svg
>
> That's working for me.
>
> Sent from my iPhone
>
>> On May 5, 2021, at 10:48 AM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> On 05/05/2021 16:44, = EMAIL ADDRESS REMOVED = wrote:
>>> Are there any issues with inserting an SVG file as the source of an <img>
>>> and putting alt text on the image?
>>
>> Last time I checked, VoiceOver will suddenly decide that the <img> is not
>> an image anymore and not announce the alt text, unless you then backfill
>> it with an explicit role="img"
>>
>> <img role="img" src="foo.svg" alt="blah">
>>
>> 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.