Improve video accessibility

[BorghildSelle]

Look into more accessibility options for video

• [ ] Does this video have captions? →
• [ ] Is this video audio-described? →
• [ ] Does video without audio have an accessible alternative? →
• [ ] Is there an alternative to the visual content in this video? →
• [ ] Can the audio be switched off? →
• [ ] Is it clear which page element has focus from the keyboard? →

[padms]

Potential Issues

1. Does this video have captions?

Video captions are useful for users who cannot hear or when a user wants to watch a video muted ( for example in a library). Here is a check-list for captions https://www.w3.org/WAI/media/av/captions/#checklist which says we need not provide captions for video-only content.

• For Looping Video Banner and Full width Video: We must ensure that we use video-only videos strictly on Looping Video Banners and Full Width Video content as mute, loop, autoplay are enabled by default in these components. Video-only videos have the speaker option disabled like the screenshot below. We can safely ignore siteimprove potential issue for missing captions for these components.

• For Video Player and Horizontal Scroll Video Player: As I observed most of our videos have captions embedded in them. Siteimprove might be checking for presence of captions by checking the <track> element in the <video> element. Since the video element is embedded within the video file, and <track> elements are not present, siteimprove complains it as a potential issue. It is relatively easy to review these potential issues manually, than trying to look for alternative fix like adding Webvtt file either in the Quickchannel console or in the sanity video asset file. If we add Webvtt file for each of our videos without embedding them, we can provide option to control captions - option to switch language there by adding more languages for captions, turn on/off captions etc. QuickChannel (aka Screen9) has option to create/edit or upload captions/subtitles. When subtitles are added to a video there, captions toggle button appears automatically in the video player in the web page.

Is this video audio-described? / Does video without audio have an accessible alternative? / Is there an alternative to the visual content in this video?

https://www.w3.org/WAI/media/av/description/ Screen9 console has option to add audio described version of the video, when uploaded the player will display the AD ( Audio Description) option while playing the video.

• [x] Can the audio be switched off? → The video tag was missing the muted attribute, even if the video was muted. So added this attribute explicitly to turn off this potential issue.
• [x]

  Actual Issues

• [x] Role with implied hidden content has keyboard focus - Moved the play pause out of the div with image role.
• [x] Visible label and accessible name do not match → Related to search button.

[padms]

@meols
We have replaced HSL video player, with VideoJS player. This affects all the video components. VideoJS player supports audio description track, which means we can provide audio described in screen9 console and the player automatically detects the track. I have provided a test track here in screen9 and the AD options shows on the video on my test page below.

Also instead of having the subtitles embedded in the video, we can add the subtitle track in screen9 console, which will show caption option in the player. This is helpful in cases where the captions get obscured because of the size of the video container. For example in my test page , the captions are clipped in the looping banner video.

[meols]

Thanks for a very thorough answer @padms - this is a difficult/intricate topic to me :smile: Very good that you have investigated screen9/quick channel - I assume more questions will come :wink: (We have done manual checks in Siteimprove, but so far it seems that the issues are flagged as potential again at the next crawl.) I suggest that we implement the updates/actual issues you mention above :thumbsup: - and we'll probably have more discussions on this topic.