WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Computing a textbox's accessible name when its label is hidden using display:none

for

From: Bryan Garaventa
Date: Sep 2, 2022 6:57PM

Hi,
I'm not sure why the other tools you mentioned are not reporting the correct behavior, but the Chrome Developer tool is correct. There is no accessible name.

You can verify this here
https://whatsock.github.io/w3c-alternative-text-computation/Editable%20Live%20Input%20AccName%20Test.html

E.G. Copy and paste the following.

<label hidden for="test">Something Hidden</label>
<input id="test" placeholder="Whatever">

In this case there is no correct accessible name, though the placeholder is a fallback and reported as the name to ensure accessibility at the barest minimum.

However, if you do the following instead:

<label id="lbl" hidden for="test">Something Hidden</label>
<input aria-labelledby="lbl" id="test" placeholder="Whatever">

Then the accessible name is "Something Hidden"

The reason being is that only aria-labelledby and aria-describedby are allowed to reference hidden content according to the accessible name computation.
https://www.w3.org/TR/accname-1.2/

All the best,
Bryan


Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com