WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Chrome 80 Bug

for

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

From: JP Jamous
Date: Sun, Mar 15 2020 1:54PM
Subject: Chrome 80 Bug
No previous message | Next message →

When Chrome 80 was installed on my personal and work machines, running Win
10, I discovered that all Windows screen readers for the blind are not
reading label text that is inside a <strong> tag if a <span> tag in present
inside the <label>. When the Screen Reader user tabs through the form, only
the <span> text is announced. This was not present in any previous Chrome
versions. Here is an example:
<label for="first-name">
<strong>First Name</strong> <span>*</span>
<!-- Only the "*" is spoken. -->
</label>
<input type="text" id="first-name" required="required">

If I place the <span> before the <strong>, only the <span> text is spoken.
<label for="first-name">
<span*</span> <strong>First Name</strong
<!-- Only the "*" is spoken. -->
</label>
<input type="text" id="first-name" required="required">

If I insert the <span> inside the <strong>, then nothing is spoken.
<label for="first-name">
<strong>First Name <span>*</span></strong>
<!-- Nothing is spoken. -->
</label>
<input type="text" id="first-name" required="required">

I found this bug by accident. I have tried to figure out if it was a screen
reader bug, but all of my evaluations only failed in Chrome Version
80.0.3987.132 (Official Build) (64-bit). All 3 versions, of the markup
above, work fine with IE11, Edge, and Firefox 74.0 (64-bit) using both JAWS
2019, 2020 and NVDA 2019.1.1, 2019.3.1.

I have filed a bug with Google and was wondering if any of you have faced
this issue.




==================================================
Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC

W: (952) 666-2930
M: (952) 666-2930
= EMAIL ADDRESS REMOVED =

"The only limitations in life are those we set for ourselves"
==================================================

From: Steve Green
Date: Mon, Mar 16 2020 1:27AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

I have replicated this issue, and it is simpler than you say, at least on my machine, which also has Chrome 80. I am looking at the <input> element's accessible name in the developer tools rather than relying on a screen reader, and the issue is just that the contents of the <strong> element are not included in the <input> element's accessible name.

All your examples work as described, but you could have left out the <span> elements.

I get the same behaviour whether the <label> is wrapped around the <input> element or if they are associated by means of "for" and "id" attributes.

Steve Green
Managing Director
Test Partners Ltd


From: JP Jamous
Date: Mon, Mar 16 2020 7:01AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

Steve,

I cannot leave the <span> out. That is a markup that was generated by
developers. The <span> has a class to show the * in a certain way in the
original markup. I trimmed the markup down to troubleshoot the problem and
keep things simple. However, the <label> includes way more than what I
listed.

In either case, the semantic does not fail the HTML validator on W3C. Since
it works on all other browsers too, it should be Google's responsibility to
fix it.

I already filed the bug with them. I just wanted to check if anyone else has
experienced it. It came at me out of nowhere and I was surprised when JAWS
went silent on me as I tested it.

Thank you for taking a look at it.



==================================================
Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC
==================================================

From: Steve Green
Date: Mon, Mar 16 2020 7:20AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

I wasn't suggesting that you leave the <span> out. I was just saying it is not a relevant factor in the bug report.

Steve


From: JP Jamous
Date: Mon, Mar 16 2020 7:30AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

So if I understand you better now, only the <strong> is not making it to the
accessible name of the <input>?

BTW, where do you find those in Chrome. Is it in the DOM Inspector? Some of
those regions may not be fully accessible with a screen reader.



==================================================
Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC

W: (952) 666-2930
M: (952) 666-2930
= EMAIL ADDRESS REMOVED =

"The only limitations in life are those we set for ourselves"
==================================================

From: Steve Green
Date: Mon, Mar 16 2020 7:51AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

That's correct. The <strong> element is the only thing that is relevant. The contents of the <strong> element are not included in the accessible name. Anything else in the <label> element is included in the accessible name.

There is an Accessibility tab in the Chrome developer tools. You can see the accessible name for each element in there, but I don't know if you can access it with a screen reader,

Steve


From: Max Starkenburg
Date: Mon, Mar 16 2020 8:12AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

I think this might be the same bug I saw discussed recently in the web-a11y
Slack, which also got filed at
https://bugs.chromium.org/p/chromium/issues/detail?id=1047549 (which was
apparently scoped to listboxoption, but whose fix should work in other
cases). The discussion in the Slack also indicated that while the fix
didn't make it in time for Chrome 81, it should likely be released in 82. I
believe a temporary workaround also mentioned in the Slack was to add
role="presentation" to the <strong>. Hope that helps,

Max
--
Maxwell M. Starkenburg
= EMAIL ADDRESS REMOVED =
https://maxwell.fyi


On Mon, Mar 16, 2020 at 9:52 AM Steve Green < = EMAIL ADDRESS REMOVED = >
wrote:

> That's correct. The <strong> element is the only thing that is relevant.
> The contents of the <strong> element are not included in the accessible
> name. Anything else in the <label> element is included in the accessible
> name.
>
> There is an Accessibility tab in the Chrome developer tools. You can see
> the accessible name for each element in there, but I don't know if you can
> access it with a screen reader,
>
> Steve
>
>
>

From: JP Jamous
Date: Mon, Mar 16 2020 8:31AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

Awesome! I will have to check out that tab. There has to be a way that I can
get to it with my screen reader.

Thank you Steve.



==================================================
Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC

W: (952) 666-2930
M: (952) 666-2930
= EMAIL ADDRESS REMOVED =

"The only limitations in life are those we set for ourselves"
==================================================

From: JP Jamous
Date: Mon, Mar 16 2020 8:39AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

Max,

You are correct. I added role="presentation" to the <strong> and it was read
by JAWS in Chrome 80. While I don't agree with the role="presentation", as
it is not proper HTML semantic, at least it does solve the problem for now.

Thank you so much for sharing this.



==================================================
Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC

W: (952) 666-2930
M: (952) 666-2930
= EMAIL ADDRESS REMOVED =

"The only limitations in life are those we set for ourselves"
==================================================

From: Reinhard Stebner
Date: Mon, Mar 16 2020 8:42AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

You can get to the tab using the virtual cursor. I just gave it a try.

On 3/16/20, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Awesome! I will have to check out that tab. There has to be a way that I
> can
> get to it with my screen reader.
>
> Thank you Steve.
>
>
>
> ==================================================
> Jean-Pierre Jamous
> Principal Digital Accessibility Engineer
> Jepelsy LLC
>
> W: (952) 666-2930
> M: (952) 666-2930
> = EMAIL ADDRESS REMOVED =
>
> "The only limitations in life are those we set for ourselves"
> ==================================================
>
>

From: Swift, Daniel P.
Date: Mon, Mar 16 2020 9:13AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

I'm a little late to this party - is it possible to include font-weight on the label and completely leave out 'strong'?

Dan Swift
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589

From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Monday, March 16, 2020 10:40 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Chrome 80 Bug

Max,

You are correct. I added role="presentation" to the <strong> and it was read
by JAWS in Chrome 80. While I don't agree with the role="presentation", as
it is not proper HTML semantic, at least it does solve the problem for now.

Thank you so much for sharing this.



==================================================
Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC

W: (952) 666-2930
M: (952) 666-2930
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >

"The only limitations in life are those we set for ourselves"
==================================================

From: Sandy Feldman
Date: Mon, Mar 16 2020 9:28AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

or how about <b>*</b>? or a span with a bold style?

Sandy

sandyfeldman.com

On 2020-03-16 11:13 a.m., Swift, Daniel P. wrote:
> I'm a little late to this party - is it possible to include font-weight on the label and completely leave out 'strong'?
>
> Dan Swift
> Senior Web Specialist
> University Communications and Marketing
> West Chester University
> 610.738.0589
>
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of JP Jamous
> Sent: Monday, March 16, 2020 10:40 AM
> To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Chrome 80 Bug
>
> Max,
>
> You are correct. I added role="presentation" to the <strong> and it was read
> by JAWS in Chrome 80. While I don't agree with the role="presentation", as
> it is not proper HTML semantic, at least it does solve the problem for now.
>
> Thank you so much for sharing this.
>
>
>
> ==================================================
> Jean-Pierre Jamous
> Principal Digital Accessibility Engineer
> Jepelsy LLC
>
> W: (952) 666-2930
> M: (952) 666-2930
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
> "The only limitations in life are those we set for ourselves"
> ==================================================
>
>

From: Birkir R. Gunnarsson
Date: Mon, Mar 16 2020 9:44AM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

role="presentation" is useful in certain situations, and I think it is
a perfectly valid workaround for this one.
This is clearly Chrome issue. If you need someone to promote or
comment on the issue you filed, just add the URL. For now I will look
at the ohter issue URL posted from the Web A11y discussion.


On 3/16/20, Sandy Feldman < = EMAIL ADDRESS REMOVED = > wrote:
> or how about <b>*</b>? or a span with a bold style?
>
> Sandy
>
> sandyfeldman.com
>
> On 2020-03-16 11:13 a.m., Swift, Daniel P. wrote:
>> I'm a little late to this party - is it possible to include font-weight on
>> the label and completely leave out 'strong'?
>>
>> Dan Swift
>> Senior Web Specialist
>> University Communications and Marketing
>> West Chester University
>> 610.738.0589
>>
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
>> Of JP Jamous
>> Sent: Monday, March 16, 2020 10:40 AM
>> To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Chrome 80 Bug
>>
>> Max,
>>
>> You are correct. I added role="presentation" to the <strong> and it was
>> read
>> by JAWS in Chrome 80. While I don't agree with the role="presentation",
>> as
>> it is not proper HTML semantic, at least it does solve the problem for
>> now.
>>
>> Thank you so much for sharing this.
>>
>>
>>
>> ==================================================
>> Jean-Pierre Jamous
>> Principal Digital Accessibility Engineer
>> Jepelsy LLC
>>
>> W: (952) 666-2930
>> M: (952) 666-2930
>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>>
>> "The only limitations in life are those we set for ourselves"
>> ==================================================
>>
>>

From: JP Jamous
Date: Mon, Mar 16 2020 12:38PM
Subject: Re: Chrome 80 Bug
← Previous message | Next message →

Thank you.



==================================================
Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC

W: (952) 666-2930
M: (952) 666-2930
= EMAIL ADDRESS REMOVED =

"The only limitations in life are those we set for ourselves"
==================================================

From: JP Jamous
Date: Mon, Mar 16 2020 12:41PM
Subject: Re: Chrome 80 Bug
← Previous message | No next message

Sandy and Dan,

Both of you are correct. However, the markup was pushed to prod. Making any
changes to it is not as easy as you may think, because of the nature my
client works. It could take multiple sprints for this to make a comeback.



==================================================
Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC
==================================================