Stop treating visibility as none

[DalisonCPU]

Is your feature request related to a problem? Please describe.

In some situations, developers choose to customize form fields, such as checkboxes. When doing this, we can use display: none; or visibility: hidden;. However, NVDA ignores the field in question. For this reason, I would like NVDA to only ignore fields with display: none; and not those with visibility: hidden;.

Describe the solution you'd like

Add to elements with visibility: hidden; in CSS properties are not ignored by NVDA.

Describe alternatives you've considered

There are solutions, but if you don't know or have advanced knowledge or don't know some CSS properties, you won't find them easily.

Additional context

I believe this implementation could help the community with the development of more accessible websites.

[seanbudd]

I think this is a duplicate of #13897

You can see the discussion there, particularly in #13897 (comment) for more information

[DalisonCPU]

I think the situation is different. In my case, I would like it to be visible to screen readers when visibility: hidden; is used, as it is visible to users but not to screen readers. I don't know if this would be the best option, but it was the only one I found.

[Adriani90]

@DalisonCPU I cannot reproduce your issue. Take for example this:

<h1>hello</h1>
<span class="icon icon-star star-4">
  <span class="visuallyhidden">4 out of 5 stars</span>
</span>

NVDA reports the visually hidden text.
Can you provide an minimal test case in Codepen which shows that this does not work?

[ramoncorominas]

I would like it to be visible to screen readers when visibility: hidden; is used, as it is visible to users but not to screen readers.

If an element has visibility: hidden then all its contents are also visually hidden, only the blank space of the container is preserved. Screen readers must hide the content as well, this is the expected behavior. If developers want that content to be read by the screen reader then they should use other techniques like the CSS visually-hidden classes.

[Adriani90]

Ah thanks @ramoncorominas for this hint, I was indeed missing the difference between visibility:hidden and visually-hidden. Good point.
I am closing this issue as invalid.