I'm trying to embed both a web object and a YouTube video in a presentation and have either be accessible with keyboard navigation. In both cases, I can navigate my focus to the object using the tab key, but once selected, I cannot interact with the object using keyboard controls. With the web object, at least, if I click within the object with my mouse, I can then navigate within it using keyboard controls. I'm wondering if there is a way to be able to do that without having to first click on the object—perhaps a keyboard navigation command that will take me from having the objected focused on to being able to keyboard navigate within the object.
There isn't a way to force the focus within the actual web object - so you'll need to click inside the web object. I hope that if someone in the community has created similar they're able to share steps with you here.
I don't know if Douglas is subscribed, but you could message him using the "contact me" button on his profile to see if he's able to share any additional infor with on in regards to what he set up.
We are also struggling with this same issue with embedded YouTube videos as web objects. There seems to be no way to get keyboard focus to the video to make it play/pause, etc. Our only other option appears to be to import the video into the Story file and add closed captioning, which requires a little bit of authoring. Fortunately our video clips are pretty short so our Story file should remain a reasonable size, but for longer video clips this would not be a very good solution for us. It is really hard for my team to share 700 MB+ Story files since we work remotely and upload speeds are pretty slow compared to download speeds. That's why we wanted the embedded YouTube video option to work.
Articulate: Please make embedded YouTube videos keyboard accessible. That would make our lives much easier. And if web objects in general can be made keyboard accessible (obviously the web object itself must be accessible), that would be huge. Thanks.
Thanks for reaching out here - and you're welcome to share your thoughts in the form of a feature request as there isn't a way to change how it's accessing the web objects. I'm not sure this is something that could be accomplished based on their being linked to an external element - but it's worth mentioning as I'm certainly not a programmer or developer.
It doesn't look like this was resolved with Storyline 360. This makes it impossible for disabled users to view embedded videos via keyboard. Is there a known workaround for this?
Erich, We haven't looked at Storyline 360 yet. In Storyline 2 the only solution we have found is to import the video directly into the Story file and then create our own captions within Storyline. Note that this could be problematic if your video is lengthy (it makes the Story file hard to share with co-workers due to large file size).
There isn't a change to this behavior for videos that are inserted as web objects, as we're relying on the hosting site being linked in and Storyline can only select the entire web object container. As Jothan mentioned, inserting the actual video files would allow you to control it with keyboard elements.
I'm referring to videos embedded using the INSERT --> Video --> Video from website.
There are a lot of reasons for using this method:
We use Vimeo to host our videos so they load faster (distributed services like a CDN allow the learner to stream from the server closest to them instead of forcing the server hosting the course to stream everyone's videos)
Storyline doesn't provide an interface for adding captions like video CDN services do
As mentioned, adding videos to the .story file make the file unwieldy
When videos are published externally, the videos can be updated without republishing the course
Some videos already hosted on YouTube or Vimeo can't be downloaded and embedded because of licensing restrictions
For all these reasons and more, we prefer to use the "Video from website" method. If we make that choice, though, we're consciously discriminating against users for whom keyboard navigation is their only option.
Erich, we found that in Storyline 2 you actually can't insert a YouTube video using the method you described -- Storyline gives us a message that it can't insert the video from the embed code -- We had to do it by inserting a web object. But then as mentioned before you lose the keyboard accessibility. We haven't tried using Vimeo video yet in Storyline 2 so not sure if that has the same issue.
We also found the issue you described that there is no built-in captioning for videos, so you have to build your own captions using text boxes that display and hide at the appropriate time cue points. This is not so bad for short videos, but could be a lot of work for longer videos.
Just thinking out loud here: perhaps another work-around approach would be to use the web object method, but also have a link to an external HTML page with the YouTube or Vimeo video embedded on it that those with accessibility needs could access. This is not ideal, but might be acceptable as an equivalent facilitation approach, and solves some of the other issues you mentioned around importing the video directly into the Story file. For this to work well you might also have to remove the web object video from the tabbing order so keyboard users don't get stuck there, and instead have them tab into the alternative link. We haven't tested this approach so we're not sure how well it works, but it may be something to try. We also don't know how accessible embedded Vimeo videos are as we work exclusively with YouTube videos.
I had a similar problem with an html web object. I found a quick work around. The problem is that the keyboard focus is not going to the iframe that contains the webobject. I placed this javascript on a trigger when the timeline reached 2 seconds:
var iframeElements = document.getElementsByTagName("iframe"); iframeElements[0].focus();
Thanks so much for pointing the discussion in this direction!
I was having the same issue, and your solution worked great for me to get **into** a YouTube video player, but then when I'm using tab, I can't get **out** of the player controls (it just keeps looping around within the iframe). Any ideas?
FYI, Instead of the 2-second delay, I added a button offscreen that says "Click to access video controls", and put it in the tab order immediately after the video video title. This way screenreader users will know that they're entering the player controls.
Yep, I saw that problem as well. Once I got the keyboard focus down inside the web object I could only tab through the items inside the web object and I could not tab back out. I have not done it yet, but it should be possible to shift the focus back up to the parent, but I am unsure of the javascript syntax. Effectively, inside the web object html I would need to create a button that would have some kind of javascript on it that would be something like parent.focus(), but it may not be that simple. I don't think that solution helps with a youtube player though. But if you could put the video player on an html page and insert it as a web object, it may work.
In my case, I ended up adding a button down in the web object html that set a variable in the storyline player (parent.setVariable("myStorylineVar", go);) And in storyline I set a trigger to watch for a change of that variable. When it changed I advanced to the next slide. So, I ended up being able to tab out of the slide.
You could probably use that same method to set the focus to something on the page rather than jumping to a new slide.
Challenging. Let me know if you want to explore it more.
13 Replies
Hi Douglas,
There isn't a way to force the focus within the actual web object - so you'll need to click inside the web object. I hope that if someone in the community has created similar they're able to share steps with you here.
Has anyone figured this out yet? I am facing the same issue.
Hi Alex,
I don't know if Douglas is subscribed, but you could message him using the "contact me" button on his profile to see if he's able to share any additional infor with on in regards to what he set up.
We are also struggling with this same issue with embedded YouTube videos as web objects. There seems to be no way to get keyboard focus to the video to make it play/pause, etc. Our only other option appears to be to import the video into the Story file and add closed captioning, which requires a little bit of authoring. Fortunately our video clips are pretty short so our Story file should remain a reasonable size, but for longer video clips this would not be a very good solution for us. It is really hard for my team to share 700 MB+ Story files since we work remotely and upload speeds are pretty slow compared to download speeds. That's why we wanted the embedded YouTube video option to work.
Articulate: Please make embedded YouTube videos keyboard accessible. That would make our lives much easier. And if web objects in general can be made keyboard accessible (obviously the web object itself must be accessible), that would be huge. Thanks.
Hi Jothan,
Thanks for reaching out here - and you're welcome to share your thoughts in the form of a feature request as there isn't a way to change how it's accessing the web objects. I'm not sure this is something that could be accomplished based on their being linked to an external element - but it's worth mentioning as I'm certainly not a programmer or developer.
It doesn't look like this was resolved with Storyline 360. This makes it impossible for disabled users to view embedded videos via keyboard. Is there a known workaround for this?
Erich, We haven't looked at Storyline 360 yet. In Storyline 2 the only solution we have found is to import the video directly into the Story file and then create our own captions within Storyline. Note that this could be problematic if your video is lengthy (it makes the Story file hard to share with co-workers due to large file size).
Hi Erich,
There isn't a change to this behavior for videos that are inserted as web objects, as we're relying on the hosting site being linked in and Storyline can only select the entire web object container. As Jothan mentioned, inserting the actual video files would allow you to control it with keyboard elements.
I'm referring to videos embedded using the INSERT --> Video --> Video from website.
There are a lot of reasons for using this method:
For all these reasons and more, we prefer to use the "Video from website" method. If we make that choice, though, we're consciously discriminating against users for whom keyboard navigation is their only option.
Erich, we found that in Storyline 2 you actually can't insert a YouTube video using the method you described -- Storyline gives us a message that it can't insert the video from the embed code -- We had to do it by inserting a web object. But then as mentioned before you lose the keyboard accessibility. We haven't tried using Vimeo video yet in Storyline 2 so not sure if that has the same issue.
We also found the issue you described that there is no built-in captioning for videos, so you have to build your own captions using text boxes that display and hide at the appropriate time cue points. This is not so bad for short videos, but could be a lot of work for longer videos.
Just thinking out loud here: perhaps another work-around approach would be to use the web object method, but also have a link to an external HTML page with the YouTube or Vimeo video embedded on it that those with accessibility needs could access. This is not ideal, but might be acceptable as an equivalent facilitation approach, and solves some of the other issues you mentioned around importing the video directly into the Story file. For this to work well you might also have to remove the web object video from the tabbing order so keyboard users don't get stuck there, and instead have them tab into the alternative link. We haven't tested this approach so we're not sure how well it works, but it may be something to try. We also don't know how accessible embedded Vimeo videos are as we work exclusively with YouTube videos.
I had a similar problem with an html web object. I found a quick work around. The problem is that the keyboard focus is not going to the iframe that contains the webobject. I placed this javascript on a trigger when the timeline reached 2 seconds:
var iframeElements = document.getElementsByTagName("iframe");
iframeElements[0].focus();
It may not be supported, but it worked for me.
Allan:
Thanks so much for pointing the discussion in this direction!
I was having the same issue, and your solution worked great for me to get **into** a YouTube video player, but then when I'm using tab, I can't get **out** of the player controls (it just keeps looping around within the iframe). Any ideas?
FYI, Instead of the 2-second delay, I added a button offscreen that says "Click to access video controls", and put it in the tab order immediately after the video video title. This way screenreader users will know that they're entering the player controls.
Yep, I saw that problem as well. Once I got the keyboard focus down inside the web object I could only tab through the items inside the web object and I could not tab back out. I have not done it yet, but it should be possible to shift the focus back up to the parent, but I am unsure of the javascript syntax. Effectively, inside the web object html I would need to create a button that would have some kind of javascript on it that would be something like parent.focus(), but it may not be that simple. I don't think that solution helps with a youtube player though. But if you could put the video player on an html page and insert it as a web object, it may work.
In my case, I ended up adding a button down in the web object html that set a variable in the storyline player (parent.setVariable("myStorylineVar", go);) And in storyline I set a trigger to watch for a change of that variable. When it changed I advanced to the next slide. So, I ended up being able to tab out of the slide.
You could probably use that same method to set the focus to something on the page rather than jumping to a new slide.
Challenging. Let me know if you want to explore it more.
This discussion is closed. You can start a new discussion or contact Articulate Support.