Firefox Overlay is Not Keyboard Navigable

Hi Nick,

Our team noticed this as well with the play button not being accessible in any of the browsers where it displays. 

It's odd that you're only seeing this on Firefox though, and not Safari or Chrome. Although Firefox hasn't yet implemented the same autoplay rules, they plan on it and we applied that play button across the board for all browsers. 

Do you have a link to the course I could test in a few different browsers? Also it would help if you're able to share a copy of the .story file here with us! 

Our courses run in an LMS, so I am unable to share a link as they are password-protected. I have attached a snippet (first three slides) of one of the presentations.

The Storyline presentations simply open in a new tab (target="_blank") from our LMS, so I am not sure why it is only Firefox that is appending the play overlay from the LMS. We've tested with Firefox 60.0.2 (64-bit), Chrome 67.0.3396.87 (64-bit), and MS Edge 42.17134.1.0. 

It appears when using FF, there is a <div id="overlay-playbutton">  being shown after <div id="overlay">. In Edge and Chrome, it shows <div id="overlay-container-controls">, then "overlay-container", then "overlay". FF goes further and adds "overlay-playbutton" and "start-overlay shown".

At this point, we're more concerned about the lack of keyboard nav to be able to dismiss the prompt.

I think there is a bug in the results for the search function on the forums. When I went looking for a reply to this post (by querying "firefox"), the target URL is linking to the post above.

https://community.articulate.com/search?utf8=%E2%9C%93&q=firefox

When sorting results by Most Relevant, the target link for the first result actually points to the second post, the second post link goes to the third, etc. If you want to see a particular post, you need to click on the link above....

Firefox Overlay is Not Keyboard Navigable is currently the 6th results when I search "firefox", sorted by Most Relevant. To view that actual post, I need to click on the 5th result (currently "Rond bleu sous firefox (Storyline 3)".

Hi Nick,

Thanks for sharing your file with me here! I took a look at this in Storyline 360 Update 17, and noticed you had a pause media trigger at the start of your first slide. Based on that I published two copies of your course to test it out: 

Here's the copy without that trigger

Here's the copy with that trigger

Both of these played for me in Chrome/Firefox without that play button showing up. That was a fix we just rolled out, so I wanted to make sure you're on the latest update. 

As for the search results, it looks like you're just searching the word Firefox, and all those other responses have Firefox in the title too? Did you try searching for the specific title of this discussion? You can also find all discussions you participate in on your ELH profile page. 

Thanks Ashley - I am developing and publishing using Storyline 3, update 4. With my previous test, the overlay appears once the content is hosted in our LMS - any chance you can provide me with a .zip file of your tests so that I can upload and test it?

Hi Nick,

Sure! The two versions are attached. The Version 2 file is the one with your trigger.

Hi Ashley,

I've uploaded my own test file, and your two Storyline 360 publishes to our LMS. The slide triggers to pause the timeline on load are not the issue. Rather, there is a difference in the Storyline 3.4 publish versus the Storyline 360 publishes you have provided.

From the MP4 attached (a screen recording on playing the three files in our LMS), you can see that the two Storyline 360 files you provided above behave as expected. When I play the Storyline 3.4 file, you can see the play button overlay appears (in Firefox).

Perhaps this update in 360 will be rolled out to Storyline 3 in the near future.

Thanks for your help looking into this matter.

regards,
nick

Hi Nick,

Yes, the next update of Storyline 3 will include fixes we released for Storyline 360. I know our team was able to fix the issue where the play button was not accessible (for tabbing to it) in Storyline 360, so that fix will also be applied for Storyline 3 and we'll let you know here as soon as it's ready. 

Ashley, is there alt text or screen reader verbiage to adjust how the button is announced by JAWS? Right now, when I navigate to it with a keyboard, JAWS just says "Button. To activate press spacebar." so it not descriptive enough to tell the user what the button is actually for. I do not find it in any of the Text Labels fields. (I asked on another thread and am using Storyline 360 and Chrome but thought I would chime in here, too.)

Related to:

Fixed: The play button that allows courses with media on the first slide to play in Google Chrome and Safari wasn't keyboard accessible. Now learners can tab to the play button and press the spacebar or Enter key to activate it.

Hi Margaret, 

There isn't an option to adjust/modify that play button yet, but I know a few other folks asked for similar as they wanted to change things like it's color. 

Are you able to activate it by pressing the spacebar? 

Yes, it is keyboard accessible and activates the course with spacebar so I'm glad that was fixed. However, I'm concerned that the screen reader verbiage is so minimal. In having other courses reviewed for 508-compliance, we've been directed to have alt-text/screen reader verbiage as instructive as possible. And I wonder if this verbiage as-is would suffice for someone who cannot see the button. Since JAWS just announces "Button. To activate press spacebar." it could be a button for anything (or perceived as a glitch/error in the course). Just adding one word to the screen reader verbiage, making it "Play Button. To activate press spacebar." (or similar) would be a more critical fix to ensure accessibility of the courses than the option to change the color, in my opinion! Thanks so much for your reply.

Thanks Margaret.

I've shared your subsequent thoughts and ideas with our team as well.

Hey everybody. I'm excited to let you know that we just released update 5 for Storyline 3! It includes new features and fixes - check them all out here.

One of the fixes addresses an issue where the play button that you see at the beginning of your courses to address browser autoplay rules for media was not accessible.  Sorry for the oversight here!

Here’s where you can download and install the latest version of Storyline 3. Let me know how you make out!