1683053 - Keyboard and screen reader access for Closed Captions menu is not intuitive

Status: RESOLVED FIXED

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

Description

[James Teh [:Jamie]]

STR (with the NVDA screen reader):

1. Go to about:config and set media.videocontrols.keyboard-tab-to-all-controls to true.
2. Open https://www.iandevlin.com/html5test/webvtt/html5-video-webvtt-sample.html
3. Tab to the Closed Captions button and press space.
   • Expected: NVDA should report that a menu has opened or similar.
   • Actual: NVDA says nothing.
4. Try to access the CC controls with the keyboard.
   • Expected: You should be able to get to the CC options with one press of down arrow or at least tab.
   • Actual: You have to tab to the Full Screen button and then tab again to get to the CC options.

Here's one possible solution:

1. Give the CC menu role="menu" and aria-haspopup="menu". Give its children role="menuitem".
2. When the CC menu is open, up/down arrows should focus the CC items.
3. When the CC button or a CC item is focused, escape should dismiss the CC menu, restoring focus to the CC button if it was focused before mousedown.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

Going to set a severity of S2, since this makes it really difficult for users with screenreaders to get to captions with our built-in video controls.

Comment 3

[Bernard Igiri]

Attachment: screen-recording.mp4

Comment 4

[Bernard Igiri]

When I test this I am able to access the CC controls by using tab and the space bar. I do find that I cannot use the arrow keys as one might expect, but tab and space bar provide access to all of the menu options.

Comment 5

[James Teh [:Jamie]]

(In reply to Bernard Igiri from comment #4)

When I test this I am able to access the CC controls by using tab and the space bar. I do find that I cannot use the arrow keys as one might expect, but tab and space bar provide access to all of the menu options.

Right, which is as I described in comment 0. However, this is not at all intuitive, and it's especially bad for screen reader users because they are completely unaware that a menu has appeared. They would have to guess that a menu has appeared and then guess that they could get to it with the tab key, neither of which are remotely intuitive. This is the reason for the high severity.

Comment 6

[Bernard Igiri]

Attachment: Bug 1683053 - Keyboard and Screen Reader access for CC improvements r=ayeddi!

Improved keyboard and screen reader accessibility for video closed captions menu by adding ARIA attributes, keyboard arrow navigation, and focus behavior to take the user into and out of the CC menu as it opens and closes.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/55b737b06eeb
Keyboard and Screen Reader access for CC improvements r=ayeddi,kpatenio

Comment 8

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/55b737b06eeb