Forum Discussion
Storyline Keyboard Navigation not working with Buttons
Hello everyone! Can anyone help resolve this accessibility issue?
I am creating a scenario interaction where the user selects 1 of 3 answer choices. The selection and submit interaction work with keyboard and mouse, but when I try to navigate on the keyboard using the "Tab" key, I can only select the first (not second or third) button. I duplicated the second and third from the first button, so I don't know what happened/why it is not selectable with the keyboard?
- The buttons are not stacked on top of each other
- They have the "visible by accessibility tools" enabled
- Triggers include: emphasize, hover for audio, hover for character state changes, and submit interaction but those are the same for the functional first button
Anyone have ideas on how to fix this? I would prefer not to have to recreate the buttons and relink all the triggers/recreate the feedback layers. Storyline file is attached.
EricSantos SSchwai
I've just got off with support. The buttons once you arrive to the first one, you then use arrow keys to select the button you want after that.
But SSchwai You need to include a submit button to submit the interaction. You buttons when you hit the arrow key will automatically on first selection submit the first button in the interaction.
I've been having the same issue and only just learnt this today that is how the selection of buttons in button sets work.
9 Replies
Hello SSchwai,
Thanks for sharing your file and describing what you’re seeing! I tested your Storyline course and experienced the same issue with keyboard navigation. I also looked at the focus order in your sample file and can see that all three buttons are listed there.
To dig deeper, I tried this in a brand-new Storyline course by adding one button, then duplicating it twice. After publishing the course to Review 360, I was able to navigate all three buttons with the Tab key without issue.
Here’s the Review 360 course link from the attached sample Storyline file I used for testing.
I’m curious if you see the same result in a quick new file on your side with one button duplicated twice. That will help us rule out whether the problem comes from a corrupt element in the original file you shared.
Looking forward to your response.
EricSantos the only reason why yours works, is because button set is set to none.
If you set as freeform quiz, then select your objects/buttons as answers. It groups them together as a button set, which with pick one, you'd want this option.
If you use tab or tab + shift, in SSchwai case it will select either first (tab) and then it skips button 2 and 3, or if you go backwards (tab+shift). It selects 3 and skips 1 and 2.
I had a look at the freeform question templates (pick one (Focus)). If you look at your template (pick one (tectonic) this has the same issue that SSchwai does)
Firstly this is surely a bug that needs to be fixed as I refuse to believe that you'd make that mistake (not you personally), but provide templates that are not accessible.
But if you do it manually, the workarorund in SSchwai case, set it as a button set. Then create 3 separate random shapes that can be hidden behind the button. Just makes sure they aren't selectable. Group each shape with a button. So you now have group 1, group 2 and group 3.
Once you have done it in this way, can the buttons be selectable via tabbing. If you are using buttons in a quiz. The only bug on this, is the first tab or tab+shift, you need to press twice as it's treating the button set as a group before selecting each actual button.
Hope that helps and looking forward to this being fixed. 🙂Thanks for your test Storyline! I replicated it on my slide and I was able to tab between the duplicates. However, when I added the new buttons to the Form View/Submit interaction, they became un-Tab-able again. It looks like when I add the buttons to the "Pick Many" interaction, the keyboard controls can only select the first button in the interaction.
Hi EricSantos,
This conversation string has helped with one of my keyboard navigation/screen reader issues but is there a reason I'm not understanding as to why the question isn't being read or even identified by a screen reader unless there is an existing audio clip (as SSchwai has in their file)? I have a sample slide that contains no audio and a screen reader should identify and read the question text but it doesn't. I've tried using tab and arrows; I've even tried the templates provided in Articulate and nothing seems to allow the screen reader to identify the question then tab to the group of possible responses. Suggestions? Advice on what I'm doing wrong? I've attached the sample file. Thanx!
Hi MirandaManni257,
I understand you're having trouble navigating your sample Storyline project with a screen reader. Here's a closer look at my test with your sample file.
- What screen reader are you using to view your sample course?
- What environment are you viewing your course in? (ex. Review, Published Output)
Here are some helpful tips for basic screen reader commands:
- Use the Arrow keys to move through the slide content.
- Use the Tab key to jump directly to interactive elements.
- Press the Down Arrow key to have the screen reader read the text before each answer option.
- When you’ve reached the desired option, press the Spacebar to select it.
If you're still having trouble, feel free to share a screen recording of your experience when using a screen reader. You can also share the order of keystrokes you are utilizing so we can better assist! We can continue the conversation in this thread or privately in a support case.
Looking forward to hearing from you!
EricSantos SSchwai
I've just got off with support. The buttons once you arrive to the first one, you then use arrow keys to select the button you want after that.
But SSchwai You need to include a submit button to submit the interaction. You buttons when you hit the arrow key will automatically on first selection submit the first button in the interaction.
I've been having the same issue and only just learnt this today that is how the selection of buttons in button sets work.Found this that explains it better than me.
This is totally correct! Thank you!
When I Tab to the first button, I am able to use the arrow keys to select the other two buttons. And I added the Submit button which is also selectable and completes the interaction.
Do you know why the buttons are grouped like this? Are they considered a button set or group?
It's a button set, as pick one automatically groups them together this way. Not to be mistaken for a group though. They are two separate things.
It's so when you've make a selection let's say button A, then select button B, it will unselect button A.
When speaking to online support. The directional keys was introduced (based on the link I added above it was introduced nearly 2 years ago.) to simplify navigation for keyboard users and screen reader users.
You can manually set the button set to none and put some triggers in to unselect other buttons when another button is selected and the tab method would then work that way, but again speaking with online support. Although I'm not a regular keyboard user and trying to make our learning more inclusive. It was designed for those who are regular users.
Happily will let Staff add to the answer, but that's what I learnt yesterday 😊
