Storyline 360 Accessibility - Focus Order and keyboard navigation

Dec 03, 2020

Hi team, 

Storyline 360 Accessibility - Focus Order and keyboard navigation

I've added text (text box) to the "focus order" that I would like read by a screen reader but don't want keyboard access to it. However some of the text (text box) is being read as "clickable" and is being highlighted when using the tab key.  How can I overcome this?

37 Replies
Lauren Connelly

Hello Susan!

I'm happy to help! Screen readers use keyboard navigation to read different parts of a webpage, slide, etc. For a screen reader to read off a text box, you'll need to navigate the text box using arrow keys, specifically up/down.

Are you using NVDA or JAWS? I've seen others notice that NVDA reads "clickable" very often, whether you're in a Storyline course or on the web. From what I've noticed, it seems like a quirk in NVDA that I haven't noticed when using other screen readers.

Lauren Connelly

Hello Derek!

It sounds like you have objects in the Focus Order that you can't access using the arrow keys. Would you mind sharing more about which objects aren't shifting correctly? 

You're right, we did make changes! Adjusting the keyboard navigation keys allows learners to control when the screen reader announces content. Learners simply use their screen reader navigation keys (e.g., the Down and Up arrows) to move through items on the slide. The TAB key is used to jump from one interactive object to another, skipping text and images. Interactive elements include buttons, hotspots, and data-entry fields. 

Leslie McKerchie

Hi Sara,

Thanks for reaching out and sharing that you are unable to access the arrows in your project when using keyboard navigation.

With your permission, I'd like to take a look at your project file to investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

Leslie McKerchie

Hi Lisa Parker and welcome to E-Learning Heroes. 😊

Thanks for reaching out and sharing that you are experiencing difficulty deleting items from your focus order. 

I'd be happy to take a look. 

With your permission, please share your project file. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

Leslie McKerchie

Hi Lisa,

Thanks for reaching out and sharing that you're having a similar problem to Sara.

With your permission, I'd like to take a look at your project file to investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

Maki Wiering

We are having trouble navigating a Storyline workshop by the Tab key in FireFox. Is anyone else having that issue? We cannot activate the Play overlay or our buttons with simple tabbing the way we can in Chrome. It is as if the tab is stopping at tens of invisible spots. We tested on ScormCloud in case it was unique to our LMS, but it doesn't work there either. What are we missing?

UPDATE: There are 24 invisible tab stops before the Play overlay can be activated. Likewise, we have 24 invisible tab stops between the first interactive button on our slide and our LMS page. This is only in FireFox, but might be impacting VoiceOver on the iPhone too.

Another Update: We would really love some insight into this issue. We have narrowed it down. The number of tab stops is related to the number of video files in the Storyline piece. We wanted to post a two-slide sample, but could not replicate the number of tab stops. A 2-video pieces has 3 empty tab stops, a 5-video piece has 7 empty tab stops, a 22-video piece has 24 empty tab stops! Again, this is only in FireFox, although we wonder if it might be causing an issue with VoiceOver too.

Lauren Connelly

Hi Maki!

It sounds like you're seeing a different experience when using Firefox and Chrome. Are you testing with a screen reader too, or are you just testing using keyboard navigation?

Also, are these elements that you're tabbing too listed in the Focus Order?

If you can share your .story file, it would give us a better idea of what you're experiencing on your end. You can share it in this public discussion or upload it privately in a support case.

Maki Wiering

Hello, Lauren,

Yes, we tested with screenreaders, too--same experience (JAWS, NVDA). I posted this on a thread by itself--https://community.articulate.com/discussions/articulate-storyline/firefox-keyboard-accessibility-issue--and the file is accessible there. My colleague also has a support case in on this. The invisible tab stops are not in the Focus Order.