1

We've got a few inputs in various places, which are of type text but their display property is set to none. Something like this:

<input type="text" style="display:none" value="someValue" />

And another input something like:

<input type="file" class="dz-hidden-input" style="visibility:hidden" .... />

The second input is append to body by a library. While running a test with WAVE extension for chrome, it shows these inputs as not having a label.

My question is, from an accessibility point of view do these inputs need to have a label as they are not in the visual flow of the page and are also hidden from screen readers? https://webaim.org/techniques/css/invisiblecontent/

I know the correct thing to do here is to change input type text to input type hidden, but due to reasons this cannot be changed easily.

Thanks.

Improve this question

1 Answer 1

Reset to default
1

From the same page you're linking:

display:none or visibility: hidden

These styles will hide content from all users. The content is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you want hidden from all users.

From https://developer.mozilla.org/en-US/docs/Web/CSS/display#accessibility_concerns

display: none

Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

So as you can see, by using "display:none;" you're doing it right, screen readers will ignore it. It doesn't matter what WAVE extension says, WAVE is known not to handle the CSS display property very well

Improve this answer
3
  • 1
    I just want to caveat here that the page says "use it for content you want hidden from ALL users". If you're only hiding it from certain users then you need to be very careful about the legal implications wherever your website/product is intended to serve. Personally, I can't imagine why you'd want an input field hidden from ALL users but, I guess, if that's what you want then you're doing it the right way!
    – Roux Martin
    Commented Mar 22, 2023 at 15:54
  • 1
    @RouxMartin I just used it in an implementation yesterday! In my case, it simply has a default value for a campaign name defined via a backend. This is very useful for 3rd party implementations like marketing platforms, CRM, mailing services and the like. Users don't need to know that info and it's useless for them, but it's really useful for admin users
    – Devin
    Commented Mar 22, 2023 at 16:38
  • 1
    Thanks both, this helped. We've got something similar to @Devin, inputs hold values that are needed for the backed but are of no use the user.
    – Ultram
    Commented Mar 22, 2023 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.