Storyline 360 - Tab order resets when a slide layer is shown or hidden.

Aug 14, 2018

Hello,

I'm having an issue while trying to make a course accessible. Every time a layer is shown or hidden, the tab order starts from the top once again. In practice, if I have a button that shows a popup, the user will have to tab all the way to the popup again from the start. This can be half mitigated by putting all popup layers at the very top of the tab order, but once the popup is closed, the user will have to tab through the whole slide once again.

Attached is a small story file example that demonstrates my issue.

I am on version 3.18.16449.0

I have tried both in preview and publishing, on Firefox and IE, and on SCORM LMS.

 

 

39 Replies
Alyssa Gomez

Hello Kolton!

Our team is currently looking into an issue that surfaced with Update 17, where the tab order in the HTML5 output (and Storyline Preview) restarts from the beginning when a layer is opened. 

I'll include your experience in the report filed with our team, and I'll keep you posted on the issue here. If you need to roll back to an earlier update, please reach out to our Support team here, mention this issue, and they'll be happy to help. 

Alyssa Gomez

Great news!  We just released another update for Articulate 360, and included a few important fixes and new features that you’ll see in the release notes here.  

We were seeing a problem where the yellow focus indicator would jump back to the first object on the slide when a layer was opened. That issue is now fixed!

Just launch the Articulate 360 desktop app on your computer and click the Update button for each application. Details here.

Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly.

Douglas Harriman

Hi,

I'm using the most recent version of SL360 and experiencing similar screen reader behavior as Jason describes: after using a Hide Layer button (i.e., a button with a hide layer, this layer, when user clicks trigger), my screen reader focus skips past all the other content in the slide/Tab Order and ends up (in one course) at the end of the tab order or (in another course) at the very end of the player controls.

Oddly, I do have one course that is working how I'd expect -- i.e., after using a Hide Layer button, screen reader focus goes to whatever element comes after the Hide Layer button in the tab order -- and the only difference between it and the other courses I've tested is that it was built in earlier versions of Storyline and imported into 360.

Katie Riggio

Hi Douglas,

I'm happy to help and appreciate you sharing a sample file for testing!

To start, I published the slides to Web using Storyline 360 Update 40:

I'm unable to recreate any oddities in the course. Could you help me confirm a few more details?

  • What browser(s) are you using to test the output?
  • Are you using JAWS, NVDA, or both? Also, what versions are they running?
  • It looks like the video is unavailable — can you reshare it or create a Peek 360 screen recording of the behavior? 
Douglas Harriman

Hi Katie,

Apologies about the video. Let me try it again: https://www.youtube.com/watch?v=i1RxPDmDw9g

To clarify, I'm experiencing this behavior when using the arrow keys to direct my screen reader what to read. If I use the tab key only, I experience the same behavior you show in your video.

We publish to LMS instead of Web, but I've encountered the same behavior with both outputs.

I've encountered this behavior w/ these combos: Chrome + NVDA, FF + NVDA, Chrome + JAWS. I tested FF + JAWS as well but cannot get JAWS to read either of our outputs using arrow keys in FF.

And I'm encountering the same behavior with all those combos with the output you shared.

I know I'm update 40 of SL360. I'm not able to check my JAWS or NVDA at the moment; I'll add those asap and will be interested to hear, in the meantime, if you encounter similar behavior when using the arrow keys.

Thanks!

Douglas Harriman

To follow up on my last post:

My NVDA was a 2019 version, so I updated it to 2020.1; however, I'm still encountering the same behavior in Chrome (83) as described previously, and now NVDA won't read anything in FF.

I have two versions of JAWS: 2018.1811.30 and 2020.2004.66. The 2018 version produced the same results as both versions of NVDA in Chrome and didn't work in FF. The 2020 version is now working in FF and producing identical results in Chrome and FF, but those results differ slightly from what I described in my original post: the screen reader reading order (using the arrow keys) is still deviating from the Tab Order when I hide a layer or fire any sort of "change state of this object to Hidden when user clicks to this object" type trigger, but now my screen reader focus is going to the slide start instead of the slide end.

And with both versions of NVDA and both versions of JAWS, I'm often experiencing slightly different behavior when re-opening or re-closing a layer: i.e., my screen reader focus will land in a different spot on subsequent opens/closes.

Thanks,

Doug

Lauren Connelly

Hi Douglas!

I appreciate you sharing these extra details!

I've tested the file on my end, and I'm noticing the Back to Top button appears on the Statement layer; right before I can close the layer. I've checked with our team, and this is a bug that we are investigating.

However, you can still use SHIFT + TAB to jump to a previous item. This is a workaround to ensure the user can still close the layer.

I've recorded a Peek to show you this workaround. Here's the link!

Douglas Harriman

Hi Lauren,

Thank you for helping investigate this.

I get the same tab navigation behavior you show. Oddly though, I don't get that behavior on the other slide that uses pictures instead of buttons.

Were you able to investigate or replicate any of the arrow key-based screen reader behavior I described and demonstrated in my video? I'm even more concerned by that and our (or maybe just my)  potential inability to reliably predict and program screen reader reading order; I fear that could be a make or break issue for screen reader users.

Here's another video demonstrating more unexpected screen reader behavior, including not just unexpected screen reader reading order but also NVDA misreading content after hiding a layer:

Thanks!

Lauren Connelly

Hi Douglas!

Thanks for providing these detailed videos! I pulled in extra help from our Engineering team to understand exactly what you're seeing on your end. With their expertise, they confirmed this is a bug as the reading order when using a screen reader should match the order in the tab order dialog. I'm so sorry this is affecting your project.

I've created a bug report with your file and videos attached. This will give our Engineering team a file to test as well as visuals of the bug. I really appreciate you taking the time to create these videos!

Once I hear more information, I'll update you in this discussion! 

Douglas Harriman

Hi Lauren,

Great to hear they'll be following up with this. Thank you!

I took the opportunity to record a bit more inconsistent behavior we've been encountering; hopefully they can investigate it at the same time. You'll see that in the video included here.

Another thing we've experienced that I haven't captured yet in a video and would love the team to look into is behavior differing if you open/close a layer more than once during the same visit and behavior differing if you read backwards versus forwards. For instance, I've had a pop-up layer read normally, according to the defined Tab Order, the first time I open it, but then I re-open it (during the same slide visit; i.e., I haven't gone to a different slide and come back to this one), and my screen reader focus lands at an unpredictable spot in the tab order or player controls.

 

Lauren Connelly

Hi Douglas!

I'd love for our team to look at these videos as this is their area of expertise! The best way to do this is by using a support case so we can have more eyes on the project.

I want you to have the opportunity to share whichever files you're experiencing issues with as well as screen recordings of the issues in action. Here's a private upload link for you to start a case and share files. After taking a look, our team will continue communication in the support case!

Thank you so much for bringing these to our attention!

Leslie McKerchie

Hi Jason,

Thanks for letting us know that you're experiencing similar behavior. 

I took a look and I do not see where Douglas shared any files with our support team, so I do not have any additional information to share.

With your permission, I'd like you to share your project file with our support engineers to investigate what's happening. You can share it privately by uploading it here. It will be deleted when troubleshooting is complete.