Closed Bug 1610334 Opened 3 years ago Closed 3 years ago

PIP feature in Firefox: The PIP close and un-PiP video buttons don't announce to NVDA/screen reader

Categories

(Toolkit :: Video/Audio Controls, defect, P1)

defect

Tracking

()

VERIFIED FIXED
mozilla75
Tracking Status
firefox-esr68 --- unaffected
firefox73 --- wontfix
firefox74 --- wontfix
firefox75 --- verified

People

(Reporter: Gijs, Assigned: Gijs)

References

(Blocks 1 open bug)

Details

(Keywords: access)

Attachments

(2 files)

+++ This bug was initially created as a clone of Bug #1608923 +++

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

Steps to reproduce:

I have a custom html5 video player that has audio, therefore, the new PIP button appears on hover.

In Firefox + Windows 10, turn on NVDA screen reader. I also use highlighter plugin on NVDA to see where focus moves, but you do you.

Hover the video and invoke the PIP.
PIP launches the video in focusTrap popup.
Tab onto this video.
Notice that NVDA focuses each video player button, but only announces "Button". Each time you tab to another button, NVDA says "Button".
The user doesn't know if they are on play, close, etc.

Actual results:

Using NVDA on a PIP video, the video player buttons do not announce. They only say "button"

Expected results:

Each button on the video player should announce its name to the screen reader. For example, if play button has NVDA focus, it should announce "Play"

A screen reader user would not know which button they need to use to control video playback or close the PIP video unless the buttons announce their proper names.


In this bug, we should come up with a label for the "close" button and the "un-PiP" button, ie the left-most button in the bottom control bar. Both buttons do the same thing: they close the PiP window and re-select the tab that originally contained (and will now once more contain) the video.

:mheubusch, could you help us come up with a text label for this button to be used in accessibility software? Something like "Close and re-select tab", or "Move video back into webpage" or something along those lines perhaps...

Flags: needinfo?(mheubusch)
Flags: needinfo?(mheubusch) → needinfo?(mwalkington)

Per Photon's accessibility guidelines, we should add a text label to all controls (i.e., add text to the icons in the PiP window): "Accessibility: All icons should have a text-based equivalent for screen readers. If your icon allows interactivity, give it a text label." source: https://design.firefox.com/photon/visuals/iconography.html

I believe that if we use a text label, we should not also have alt-text because a screenreader will read both text label and alt-text: "You should always have text labels next to icons. Assuming you do, the icon should not have an alt-text." source: https://axesslab.com/alt-texts/

Please see attached image for recommended text labels. Per the two buttons that close a PiP window:
-The two buttons that close PiP do not have the same functionality. The "X"/"Close" button closes the PiP window. It does NOT send the user back to the original tab and the original video should NOT be playing (the original video should be paused and a bug is being filed by Gijs).
-The "Send back to tab" button closes PiP window AND sends user back to original tab where the video IS playing.

Flags: needinfo?(mwalkington)

Per Photon's accessibility guidelines, we should add a text label to all controls (i.e., add text to the icons in the PiP window): "Accessibility: All icons should have a text-based equivalent for screen readers. If your icon allows interactivity, give it a text label." source: https://design.firefox.com/photon/visuals/iconography.html

I believe that if we use a text label, we should not also have alt-text because a screenreader will read both text label and alt-text: "You should always have text labels next to icons. Assuming you do, the icon should not have an alt-text." source: https://axesslab.com/alt-texts/

Please see attached image for recommended text labels. Per the two buttons that close a PiP window:
-The two buttons that close PiP do not have the same functionality. The "X"/"Close" button closes the PiP window. It does NOT send the user back to the original tab and the original video should NOT be playing (the original video should be paused and a bug is being filed by Gijs).
-The "Send back to tab" button closes PiP window AND sends user back to original tab where the video IS playing.

I am not, however, an accessibility expert and so I would like Asa to comment on my note above about not needing alt-text in addition to text label.

Flags: needinfo?(asa)

I filed bug 1611186 for "close should pause".

See Also: → 1611186

(In reply to Meridel from comment #2)

I believe that if we use a text label, we should not also have alt-text because a screenreader will read both text label and alt-text: "You should always have text labels next to icons. Assuming you do, the icon should not have an alt-text." source: https://axesslab.com/alt-texts/

Yep, just a text label for the button is sufficient here. I will add an aria-label (which is not visually accessible to sighted users).

Pushed by gijskruitbosch@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/ac2993473b87
add accessible labels to close/unpip buttons, r=mconley,fluent-reviewers,flod
Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla75

I assume this will ride to 75 given the new strings.

Flags: qe-verify+

Reproduced the issue using Firefox 74.0a1 (20200120154412) on Windows 10x64.
The issue is verified fixed with Firefox 75.0b7 on Windows 10x64.

Status: RESOLVED → VERIFIED
Flags: qe-verify+

Bugbug thinks this bug is a regression, but please revert this change in case of error.

Keywords: regression
You need to log in before you can comment on or make changes to this bug.