Interactive Video | Captions hidden by interactive elements (Web Accessibility Issue)
The captions track is hidden by interactions added to the videos (pop-up boxes) and causes a web accessiblity issue. Captions added to videos are intended to make the video and also make it more accessible to viewers who may suffer from hearing issues and others.
The laywering might be an issue, since the player (the application that runs the video) is "under" the overlay of interactions added. However, it should be fairly easy to allow content creators to set the captions to appear under the video (instead of covering the lower portion of the video) or try an implement a more complex solution in which the player will display captions on top of any interaction on the screen (which may require to content creators to ensure that information isn't hidden). Alternatively, perhaps it would be possible to add a transcript of the captions (if added) below the video element (such as the ones available in LinkedIn Learning and other platforms).
The preference should be for the captions to be visible since they support the content (spoken words) that are the audio track.
Detailed steps to reproduce the bug:
- Create an Interactive Video
- Add a captions/subtitles track (.vtt file)
- At a point where the captions are showing, add an interaction and position it over the placement of the captions track. The interaction can be a full screen (see Issue 03.png attached) or a partial screen (see Issue 01.png and Issue 02.png attached).
- The viewer will not be able to see the captions track.
Platform and version number:
This issuse manifests itself in all platforms.
Mobile or Desktop:
Any, the issue is with the layering of the components of the Interactive Video, the captions track is "under" the interactions layer.
H5P plugin version:
Persistent since the element was added to H5P.
H5P content type and version (if a content type was used), and a sample URL or attached H5P.
Any browser console errors:
Any PHP errors:
Screenshots if it's a visual problem:
Attached (3 screenshots)