Component - Media - not keyboard operable

[GGD4V]

Issue: The video widget is not native HTML, which causes some problems. Most of the player functions can be done with the keyboard, but it's inconvenient and not intuitive like the default HTML one and the sound volume can't be changed using just the keyboard. Solution: I would advise using HTML 5's default video player.

[LIT-EIA-OWNER]

Future project - we've often talked about making a custom component.

To look at MS Streams - is it accessible? How easy to make a component out of it? IFrame? Something better?

https://github.com/zarek3333/adapt-azure Does it only use Azure Media Player?

[LIT-EIA-OWNER]

Melissa will look at MS Streams

[mtremblay131]

In no particular order a mini report on some video players. Also saved in SharePoint https://014gc.sharepoint.com/:w:/r/sites/MeD/Shared%20Documents/Accessibility/Accessibility%20Testing/General%20A11Y%20testing/A11Y-mini-report-videoPlayers.docx?d=wa92ceb73bafa4849af5426304c7a05e1&csf=1&web=1&e=jMcW75.

HTML5 player

https://www.w3schools.com/html/html5_video.asp Pro:

• Buttons seems to all work well with the keyboard and with and without JAWS.

Cons:

• Missing captions button/option (fails WCAG 1.2.2)
• The player seems to be in an i-frame which is missing a “frame-title”

Note: need to accommodate a transcript (an accordion immediately below the video would work)

Azure player (for Adapt)

https://azure.microsoft.com/en-ca/resources/videos/home/ Pros:

• There are options for the video quality (optional) and the playback speed (optional – but this would be good for us).
• The player buttons are always visible when the player is paused.

Cons:

• When the focus is on the progress slider, if I press the up or down arrow the volume (not in focus) will be adjusted. But if I press the left or right arrows the progress slider is adjusted. And vice-versa, if I am on the volume buttons the left right buttons mover the seek slider (progress slider), but each time I press the right arrow key JAWS announces stuff to the right of the button (captions button).
• The player seems to be in an i-frame which is missing a “frame-title”

Note: need to accommodate a transcript (an accordion immediately below the video would work)

Microsoft Stream

https://web.microsoftstream.com/video/16bb718c-a92b-4726-8bf2-15c8a4b7bf19?list=trending Pros:

• The volume slider and the progress slider are operated independently. The one in focus can be operated by all 4 arrow keys.
• There are extra options for the video quality (optional) and the playback speed (optional – but this would be good for us).
• Transcript is searchable (which is neat). Just need to make sure that the transcript is complete and contains more than only the captions.

Cons:

• The settings menu was difficult to use; in the sense of when to use an arrow key or press tab. -- The focus does not remain in the “captions/subtitles setting” menu when we use the arrow keys. We have to use the tab key to navigate through the menu options. It seems inconsistent; maybe this is a learned experience (I would have to do more research). -- When we close the settings menu with the keyboard, the focus doesn’t always go to the settings button, but sometimes goes to the “fullscreen” button.
• The transcript seems to have an issue with “aria-required-children” -- Path: .scrollable-content -- Snippet: <div class="scrollable-content" role="listbox" aria-label="This is a list of captions." ng-style="$ctrl.scrollTransform" id="" style="position: absolute; transform: translateY(0px);">
• The player buttons disappear (fade away) after about 2 seconds if the mouse does not move over the video or if
• The focus on the “play button” to activate the video player is only partially visible, it uses the “outline” colour to indicate the focus. (it could be better, depending on the content of the thumbnail the white outline fails contrast.)
• The transcript of this video is missing the text displayed on the screen. (content issue) Have to make sure that the transcript can be edited to contain everything (such as the text displayed on screen).

Ideally for any media player the player buttons should not be on top of the video (hiding part of the video), but below it.

[TimbroVince]

Back in the latest report - to call Maxim to talk about it