Forum Discussion
iFrame video becoming a keyboard trap
We have several Rise tutorials that use YouTube content embedded using iFrames. Doing accessibility testing, we recently discovered that these become keyboard traps. Users can tab into the content and play it, but the standard guidance of using esc to navigate out of the video isn't working and tabbing through also doesn't seem to work. Does anyone have insight into what we need to do to make this content fully keyboard accessible? Has anyone else had this issue? Thanks!
7 Replies
The keyboard trap issue with YouTube iFrames in Rise has been causing me a headache when building accessibility into my Rise Canvas course which I recently shared in the ELH ‘share examples’ section. I have a solution in final testing that I hope to implement into it soon…
Rise Canvas handles it in two ways:
1. A skip link appears before the video when keyboard users Tab to it, letting them bypass the player entirely if they choose.
2. For the related videos / “More videos” panel issue specifically — Rise Canvas uses the YouTube iFrame Player API to detect when the video ends (state 0). The moment playback finishes and YouTube would normally surface that panel, focus is automatically redirected out of the player and back into the Rise course. My script calls .focus() on it directly, pulling focus out before the related videos panel can grab it. Keyboard users never have to tab through those hidden items. This hopfully means the Rise Canvas exported code you drop into Rise’s code block is fully keyboard accessible…
Hi MettaLash & CallumHaskins,
Sorry to hear that you're struggling with keyboard navigation in Rise.
With Rise course playback, the Esc key is typically used for canceling an action or closing an object. Such as a dialog window, menu, or ToolTip. Learners should be able to progress through a Rise Lesson containing embedded videos solely with the Tab key.
The experience may feel like a "keyboard trap" with interactive elements such as embedded YouTube videos. However, when testing, I found that YouTube videos also display a collapsed menu of "More videos" at the bottom of the player.
Those hidden items are still receiving keyboard focus. Learners are forced to progress through all of them before they can move on to other content within Rise itself. Unfortunately, there is no setting in Rise to override that behavior coming from 3rd-party video hosting platforms.
If you're comfortable sharing the embed links you've been working with, we're happy to investigate further. Feel free to provide those here in the discussion or privately in a support case.
Hi StevenBenassi thanks for the reply. I will log a support case with the issue.
I have just revisited this and can see that if you 'tab' a further 37 times after a visible key board selection on the video it then shifts the keyboard focus out of the video player.
I appreciate its a tricky one but would this be classed as a closed loop as i think most users would assumer after 5 tabs that the navigation loop was broken. Is this something that is being worked on to counter this?
I just want to understand this, as if that is the case then it would mean embedding video's would no longer be a viable option if its not accessible under the WCAG regulations.What you’re seeing is coming from the YouTube player itself, not something Rise can control. The keyboard behavior and tab order are built into the embedded player.
One small improvement you can make is to limit the number of suggested videos (which reduces extra tab stops at the end). You can do that by adding a parameter to your embed:
<iframe src="https://www.youtube.com/embed/[yourvideo]?rel=0"></iframe>
This keeps suggested videos within the same channel, which can help simplify navigation a bit.
I tested using the direct link from YouTube as well and the issue was the same. For reasons of working with Blackboard we were using the iframe.
Currently having exactly the same issue. I have tried using youtube URL and using the youtube embed code as well and its just getting stuck in a loop.
