Forum Discussion
Storyline 360 Accessibility - Focus Order and keyboard navigation
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?
I'm really struggling to work this out also.
It would be absolutely fantastic if Articulate did a demo video of Storyline Working with JAWS or NVDA.
Hi Howard,
I know that we have an open case, so we can look at your course together.
Community examples of accessibility is something on our radar, but I do not have a resource to share at this time.
Hi Jessica,
I appreciate you chiming in and sharing what you are currently experiencing.
Prior to January 2020, screen reader users and keyboard-only users tabbed to every object on each slide. That method was technically accessible, but it was tedious. So we optimized slide navigation to make it more familiar to screen reader users and reduce the number of keystrokes required for keyboard-only users.
- Screen Reader Users:
- Learners use their screen reader navigation keys (e.g., Down and Up arrows) to move through all text and interactive objects on the slide, listening to each item along the way.
- Keyboard-only Users:
- Since keyboard-only users can see text and images, these objects get skipped when tabbing through the slide content. This reduces the number of keystrokes needed to navigate the slide.
Hi Leslie,
Is NVDA still compatible with the latest version of Storyline 360? I cannot use the up and down arrows to navigate through texts and have it read by the screen reader. The texts are in the focus order and I do have the latest version of Storyline. It concerns all of my projects, not just one in particular. Unfortunately, I cannot try with JAWS as I don't own it, so I don't know if this issue comes from a Storyline update (I'm pretty sure I remember being able to use the up and down arrows but cannot remember when it was). This is problematic as we are trying to make our modules as accessible as possible.
Thanks for your help !
Stéphanie
Hello,
We use NVDA and JAWS and just ran through a course that worked with NVDA. Despite it working it does not work how it should meet all aspects of WCAG how I would like it to. You have to tab through and then when you get the "Back to top" coming into focus hit the space bar and then use the down arrow and it should begin to read the main portions of the slide. The focus areas are not as good as they used to be but still work.
- Screen Reader Users:
Hi Rhonda,
I'm sorry the focus order while using drag-and-drops isn't working exactly how you would have hoped! Drag-and-drop interactions are not currently keyboard accessible in Storyline 360. Here is a link to drag-and-drop interaction with accessibility in mind.
Storyline: Accessible Drag-and-Drop Chat Interaction
Thanks for reaching out!
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.
Hi Lauren, thank you very much for your reply. I've been using NVDA. I did discover last night that somehow the text boxes I added had a "visited" state assigned to them, so once I deleted the state it sorted the issue. Thanks again.
I can't find the Focus Order menu- with Slide View open- looking under Home.
Hi Online Support!
It's called Tab Order in the version you're using. In our latest update, it's called the Focus Order.
You can update Storyline 360 in your Articulate 360 desktop app!
Why did this change from using tab? Even using the arrow buttons the focus is not shifting correctly. Despite it being correct in the "focus order" in 360.
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.
I have a follow up question regarding arrows. I have images and text boxes in my focus order (which it seems from previous answers isn't necessary anymore) but can't access them with either tab key or arrows. Wy is that? Using google chrome.
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.
I'm having the same problem as Sara. All non-button objects that I have in focus order are skipped during keyboard navigation (tab key), and the arrow keys with NVDA don't work at all.
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.
I need to delete some items in focus order in slides but the delete button is greyed out. I have tried using F4 and going into slide master and unticking the boxes for each shape for accessibility but I still can't remove the items from the slides. How can I get around this?
Hi Lisa Parker, do you have Create a Custom Focus Order selected at the top first? Once you do that, you should be able to select an item and the trash can will become active.
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.
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.
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.
