1728889 - setting display non on an element using the backdrop pseudo selector does not remove backdrop from screenreader availability when element in full screen

Status: RESOLVED DUPLICATE of bug 1767561

(Core :: Disability Access APIs, defect, P3)

Description

[Bryan Rasmussen]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:92.0) Gecko/20100101 Firefox/92.0

Steps to reproduce:

You need to use a screen reader, I was using voiceover on mac.

Go to https://mdn.github.io/css-examples/backdrop/index.html
Add text in paragraph before video like so <p>some text here</p>
Change Css in css field to be video::backdrop {
display: none;
}
Change video to full screen, the backdrop is now white and I do not see the paragraph - so I believe there has been some effect from the display: none. Now start voiceover, it will be somewhere among the video controls when it starts to read - I believe by the full screen button in fact. Go backwards with it, in a bit you will get to an element that reads off "some text here" - in other words the text in the paragraph that is outside of our full screen element and is somewhere in the backdrop of that full screen element.

Actual results:

Screen readers in full screen element mode read everything that is hidden by the full screen element, even if the backdrop pseudo selector is used to set display of backdrop to none.

Expected results:

I would expect that by using the backdrop with display none that everything outside the actual full screen element would be hidden from the screen reader. On the other hand in Chrome the backdrop seems to have no default because it hides whatever is outside the full screen element from the screen reader by default, which I think is evidently wrong by the specification, but really sensible.

Comment 1

[Bryan Rasmussen]

In the specification it says

5.2. ::backdrop pseudo-element

Each element in a top layer has a ::backdrop pseudo-element. This pseudo-element is a box rendered immediately below the element (and above the element before the element in the set, if any), within the same top layer.

The ::backdrop pseudo-element can be used to create a backdrop that hides the underlying document for an element in a top layer (such as an element that is displayed fullscreen).

It does not inherit from any element and is not inherited from. No restrictions are made on what properties apply to this pseudo-element either.

---

that part about hiding the underlying document leads to me to assume that I can actually display none that document and thus remove it from the screenreader.

If this is difficult to implement, which it sounds like the kind of thing that might hit basic assumptions that cannot just be rewritten, is there a way I can remove things from the screenreader's purview using css when an element is in full-screen and the things we want to remove are obviously outside that full screen element.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Disability Access APIs' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 3

[Bryan Rasmussen]

thinking about it I think the spec is somewhat underspecified re: accessibility so I have put an issue up https://github.com/whatwg/fullscreen/issues/197

Comment 4

[Eitan Isaacson [:eeejay]]

Changing severity to S3 because this blocks non-critical functionality.

Comment 5

[James Teh [:Jamie]]

Firefox now removes content outside of a full screen element from the accessibility tree, similar to Chromium. That happened in bug 1767561 (Firefox 112), but we neglected to update this bug at the time.