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?
Has there been any progress on this? This is basically a stop work issue for us if I cannot verify that non-button type items that are in the tab order are accessible with the keyboard.
Hi, Jessica! Are you referring to the specific FireFox issue? If so, I believe the engineers at Articulate are working on it. Have you been able to replicate? It seems to happen when there are videos embedded.
It's in Chrome as well. Nothing is accessible with the tab key unless it is a clickable item (even if it is in the focus order). I'm using NVDA for my screenreader.
Here is a sample. Buttons are accessible - even if there is no trigger attached. But any other object is not accessible using NVDA and the tab keys. It skips over them unless there is a trigger attached to them. This sample has no videos:
I have two buttons (one with a trigger, one without) both are 'tabable.'
I have a textbox - not tabable.
Shape with text - not tabable.
Transparent shape (with alt text) - not tabable.
Transparent shape attached to a trigger (with alt text) - tabable.
I need all objects that I put in the focus order to be accessible by screen readers. So all of the above should be accessible with the tab key. Is this a recent change?
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.
I am still very new to Storyline but had a question about tab order and drop-and-drag. My intent had been to create a drop-and-drag and with the focus order, allow the user to tab to the term and then to each of the three dropbox choices. I had thought I could set that up using the focus order but I am only allowed to put the dropboxes in the focus order one time. Is there a way around this or could you point me to a resource to help.
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.
In addition, I have a couple of questions in order to assist you better:
1. Are you able to hear any audio while using NVDA?
2. Would it be possible for you to share the project file so I can take a closer look on my end? I can test with NVDA and JAWS to see if I can replicate this behavior.
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.
Should keyboard users be able to move through content using the up and down arrow keys as well as tab in Storyline?
I have tried to create an accessible drag and drop activity and want the user to be able to select a word and then select the space to move that word to. I have been able to create this in Storyline but it only works with the tab key, so the user has to keep pressing tab to move through all of the objects to get to where they want to move the word to once they have selected it, which is fine in Storyline because it will keep moving through the objects but when I publish to Rise it will move on to other blocks or items on the page, which is not ideal. It would be better if they could use the arrow keys to move between objects. I downloaded the accessible drag and drop example (https://community.articulate.com/download/storyline-accessible-drag-and-drop-chat-interaction?_ga=2.103025152.1843277742.1673450864-131558992.16629010160 ) where they say that you can use the up and down arrow keys to move through content but it doesn't work in either Storyline or Rise, I still have to use tab. You can use the arrow keys instead of tab to move through answers in a knowledge check in Rise, so I'm just wondering why it won't work in this Storyline block.
Another problem I have is when using a screen reader (I just used the Windows narrator to try this out), when the user selects a word, moves to the space they want to move it to, and places the word with space or enter it then focuses on the title of the Storyline block and you have to move through all of the objects again to continue with the activity. Can it not just move to the next object in the focus order?
I'm not sure if this is the correct place to ask these questions but it regards Storyline 360 Accessibility - Focus order and keyboard navigation. Thank you in advance for any help with this, it is greatly appreciated.
Hi Tora, and welcome to the E-Learning Heroes Community! 🎉
Thanks so much for reaching out!
Keyboard users have the ability to use Tab and Shift+Tab to move from one interactive object to another on the slide. They can press the spacebar or the Enter key to activate an item.
Sorry to hear you are having this issue with your Storyline Block. Storyline blocks are keyboard accessible, but you will need to ensure the embedded content is accessible as well.
Would you be able to share your file in this thread or privately in a support case? We’d be happy to take a closer look in order to better assist you!
37 Replies
Has there been any progress on this? This is basically a stop work issue for us if I cannot verify that non-button type items that are in the tab order are accessible with the keyboard.
Hi, Jessica! Are you referring to the specific FireFox issue? If so, I believe the engineers at Articulate are working on it. Have you been able to replicate? It seems to happen when there are videos embedded.
It's in Chrome as well. Nothing is accessible with the tab key unless it is a clickable item (even if it is in the focus order). I'm using NVDA for my screenreader.
Here is a sample. Buttons are accessible - even if there is no trigger attached. But any other object is not accessible using NVDA and the tab keys. It skips over them unless there is a trigger attached to them. This sample has no videos:
https://360.articulate.com/review/content/fac5246a-89d3-4440-afa4-e6d4895726e7/review
I have two buttons (one with a trigger, one without) both are 'tabable.'
I have a textbox - not tabable.
Shape with text - not tabable.
Transparent shape (with alt text) - not tabable.
Transparent shape attached to a trigger (with alt text) - tabable.
I need all objects that I put in the focus order to be accessible by screen readers. So all of the above should be accessible with the tab key. Is this a recent change?
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.
Thank you for the quick response!
Hi Leslie,
I am still very new to Storyline but had a question about tab order and drop-and-drag. My intent had been to create a drop-and-drag and with the focus order, allow the user to tab to the term and then to each of the three dropbox choices. I had thought I could set that up using the focus order but I am only allowed to put the dropboxes in the focus order one time. Is there a way around this or could you point me to a resource to help.
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!
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 Stéphanie and welcome to the E-Learning Heroes Community! ✨
Thanks for checking in. Happy to help!
First off, I wanted to confirm with you that NVDA is a compatible screen reader. Here is a link to our System Requirements for Articulate Storyline 360 Courses for your reference.
In addition, I have a couple of questions in order to assist you better:
1. Are you able to hear any audio while using NVDA?
2. Would it be possible for you to share the project file so I can take a closer look on my end? I can test with NVDA and JAWS to see if I can replicate this behavior.
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.
Hi,
Should keyboard users be able to move through content using the up and down arrow keys as well as tab in Storyline?
I have tried to create an accessible drag and drop activity and want the user to be able to select a word and then select the space to move that word to. I have been able to create this in Storyline but it only works with the tab key, so the user has to keep pressing tab to move through all of the objects to get to where they want to move the word to once they have selected it, which is fine in Storyline because it will keep moving through the objects but when I publish to Rise it will move on to other blocks or items on the page, which is not ideal. It would be better if they could use the arrow keys to move between objects. I downloaded the accessible drag and drop example (https://community.articulate.com/download/storyline-accessible-drag-and-drop-chat-interaction?_ga=2.103025152.1843277742.1673450864-131558992.16629010160 ) where they say that you can use the up and down arrow keys to move through content but it doesn't work in either Storyline or Rise, I still have to use tab. You can use the arrow keys instead of tab to move through answers in a knowledge check in Rise, so I'm just wondering why it won't work in this Storyline block.
Another problem I have is when using a screen reader (I just used the Windows narrator to try this out), when the user selects a word, moves to the space they want to move it to, and places the word with space or enter it then focuses on the title of the Storyline block and you have to move through all of the objects again to continue with the activity. Can it not just move to the next object in the focus order?
I'm not sure if this is the correct place to ask these questions but it regards Storyline 360 Accessibility - Focus order and keyboard navigation. Thank you in advance for any help with this, it is greatly appreciated.
Hi Tora, and welcome to the E-Learning Heroes Community! 🎉
Thanks so much for reaching out!
Keyboard users have the ability to use Tab and Shift+Tab to move from one interactive object to another on the slide. They can press the spacebar or the Enter key to activate an item.
Here is a detailed list of what Screen Reader Users and Keyboard-Only Users can utilize to navigate a course.
Sorry to hear you are having this issue with your Storyline Block. Storyline blocks are keyboard accessible, but you will need to ensure the embedded content is accessible as well.
Would you be able to share your file in this thread or privately in a support case? We’d be happy to take a closer look in order to better assist you!
I hope this helps!