We have been testing for keyboard accessibility and have found that the yellow highlight will occasionally disappear. The focus is still on the correct item and it is selectable, but without the highlight, there is no indication to the user that it is selectable.
We are using Storyline 360 and publishing HTML5 only.
Hey there, Steven. Thanks for sharing what's happening. We take accessibility seriously, so I'd like to get a few more details from you to help me troubleshoot:
Are you seeing this behavior in Preview, the published output, or both?
If in the published output, in what browser is this happening?
Is it disappearing from certain objects in particular, or is it different each time?
If you have an example file or a link to your output that you can share, I'd be happy to have a closer look!
I did some testing this morning and it's consistently one object, the MENU button. I can get the NEXT button to not highlight by using the menu to select the page I am already on (the first page of a section).
For the MENU button, when tabbing through the first time, all items highlight. If you tab through a second time, the MENU button does not highlight when tabbed to, but the focus is still on it and it is selectable.
* Are you seeing this behavior in Preview, the published output, or both?
I am seeing this behavior in both Preview and published output.
* If in the published output, in what browser is this happening?
IE 11.0.80 & Chrome 69.0.3497.92
The MENU button is on the Master Slide "Base Composition."
The NEXT button is on most pages.
I've included the template I've been developing. The problems show up when you preview and publish.
Thanks for looking into this, if you need anything else, let me know.
Steven Walsh
Thanks for sharing the additional details of what you are seeing.
You mention including the file that you are working on, but I'm not seeing that attached here. If you replied via e-mail, that could be why.
Be sure to click 'View' versus 'Reply' in your e-mail notification and attach your .story file via 'Add Attachment' in the bottom left of the reply window.
I went through more testing this morning and found that on occasion, the NEXT and/or BACK button did not show the highlight even though they had focus. This behavior was not consistent, or should I say, I did not find a pattern.
Yesterday when I tested, I found that the MENU button consistently does not highlight when you go through a second time. I can get the NEXT button to not highlight by using the menu to select the page I am already on (the first page of a section).
• Are you seeing this behavior in Preview, the published output, or both? I am seeing this behavior in both Preview and published output.
• If in the published output, in what browser is this happening? IE 11.0.80 & Chrome 69.0.3497.92
The MENU button is on the Master Slide “Base Composition.”
The NEXT and BACK buttons are on most pages.
I’ve included the template I’ve been developing since it's small. The MENU issue showes up there, but the NEXT and BACK may not.
Thanks for looking into this, if you need anything else, let me know. Steven Walsh
Thanks so much for sharing your file with me. I've done some testing, and I believe I'm seeing the same behavior you're seeing. Check out this 1-minute demo, and let me know if your experience is similar to mine.
In the meantime, I'm going to share this with our Support Engineers to see if I can get some further insight from them.
Yes, that is the behavior I'm seeing. However, the MENU button is selected on the second go round after the Audio (OFF) button, however it is not highlighted. You can verify this by pressing the Enter key when you are there.
As I have stated before, the NEXT and BACK buttons will occasionally show the same behavior, which is: be selected but not show the highlight.
I have a similar problem. I have an interactive question 7 people you have to click on (each person is a button with different states for hover and agree and disagree). the 5th one disappears if you hover over it and can stop you from completing the question. I have had to dummy up images to appear as stand alone ones so that the image never seems to disappear. I have tried deleting this one button several times and recreating it based on one of the other button but it still disappears.
I am finding the same problem in several different files that I am working on. I have items that are in the tab order but the yellow highlight does not appear when tabbing. Additionally, it is possible to select these items while tabbing, even though they are not highlighted with yellow. Has this issue been resolved?
I have not heard of a fix.
The work around I am using is to not use any "Picture Fills" in the button. My testing has shown that if I have a Picture Fill in any of the secondary states, Hover, Down, etc. that it creates the tabbing highlight visibility issue.
I do occasionally use a picture as a button (it may not be a button object), but it can only have the Normal state.
Let us know how you are creating the buttons.
Hope this helps,
Steve
I'm so sorry you're at the same roadblock, TIL Assistant.
I peeked into Steven's case where I see we have the following behavior as an open software bug: The yellow accessibility box does not appear when a custom Menu button is tabbed the second time – if the other states are added as a picture.
Steven is spot-on: While our team investigates this, one workaround is to add the Hover and Down states by editing the existing normal state and changing the fill.
If you're seeing something different, I'd like our Support Engineers to do a deep dive on your project. Would you mind sharing your .story file with us here?
Thanks for your replies. The software bug seems similar, but not exactly the same as the issue that I am experiencing. The yellow accessibility box does not appear when the button is tabbed on the first time. The items that aren't working are usually buttons inserted from your buttons options (not 'menu' items). I will check with the others on my team, and if I am able, send the file over.
Appreciate you circling back with this insight, TIL Assistant. Please do let us know!
In the meantime, could you share more detail on the built-in buttons you used in the course? Also, what version of Storyline are you using? I'll try to replicate the behavior in a test file.
Hi there, Javier. We are still investigating an issue where the yellow highlight doesn't appear when tabbing to a custom button a second time when its states include pictures.
Does that sound like your setup? If not, feel free to share specifics with me or privately with our support engineers, and we'll see what's happening in your project!
I am having the same issue when I tab to a text box for which I have three states: normal, hover and visited. The text box is a no-fill with white text. On the hover state I have filled the box with orange and applied soft edges so that it looks like the text has an orange glow behind it. On the visited state, the white text is changed to grey and the text box again has no fill. Basically, I have four of these text boxes laid over an illustration (which resides on the slide master) of four tabs. They have triggers applied to jump to different scenarios. So, since the yellow boxes don't show up, if the learner is using the keyboard, they would not know how to get to the scenarios.
Thanks for describing your setup, Miriam. I was able to reproduce the missing highlight box on my text box in the Visited state if it had a soft edge applied to the Hover state.
I'm writing this behavior up as a separate issue so we can explore a fix. In the meantime, removing the soft edge from the Hover state allowed the highlight to appear. Is that a workaround that you could use?
Yes it is.
Although note that to do that I had to create a completely new text box and create new states for it. If I just tried to edit the existing states, the slide would then not display in preview mode. It would hang up and just show a grey slide with the spinning circular rays. So that shed more light for your troubleshooters.
One more thing: I noticed some people said they could not insert an image in the states. I was able to insert a caption in the hover state and have it still highlight when tabbing. That might have something to do with the fact that it is an Articulate-supplied element, but might be helpful knowledge anyway.
Thanks!
Miriam
Hm, that doesn't sound like something connected to this bug, but more something in the file itself. Have you checked on these best practices to prevent odd behavior in your files?
Let me know if that helps, or if you continue to see some quirkiness while working!
I had this same issue with a template I created utilizing 25 "radio buttons". Storyline's built-in radio buttons do not offer much in the way of flexibility, so it is necessary to build my own. I created individual PNG files for each state, and surely enough, most of the buttons were not highlighted when using keyboard navigation.
The fix was to create a transparent square in Storyline as the button, create the required states, and paste the appropriate button image into each one. It was a fair amount of rework, but it works now.
Thank you all for continuing to share the crucial need for creating accessible content for all learners. While more work remains, we're at a point where we're confident the job done so far delivers meaningful real-world improvements for learners with accessibility needs.
I've included links below where you can find all the details on what this means for Storyline 360 Update 36:
This release makes it significantly easier for those users to perceive, operate, and understand content published with Storyline, while opening up more choices of the browser, assistive technology, and devices for the first time. Learners will benefit from the vast majority of these improvements, even when the course author is not designing their course for accessibility.
If you have any questions or concerns, let us know here or reach out to our Support team. We know there is more to do, so we'll continue to keep you posted about future releases.
We appreciate your patience while our team investigated this.
I am happy to share some great news! We fixed the issue some of you reported where: Yellow accessibility box does not appear when a custom Menu button is tabbed the second time if the other states are added as a picture.
24 Replies
Hey there, Steven. Thanks for sharing what's happening. We take accessibility seriously, so I'd like to get a few more details from you to help me troubleshoot:
If you have an example file or a link to your output that you can share, I'd be happy to have a closer look!
Ms. Horn,
I did some testing this morning and it's consistently one object, the MENU button. I can get the NEXT button to not highlight by using the menu to select the page I am already on (the first page of a section).
For the MENU button, when tabbing through the first time, all items highlight. If you tab through a second time, the MENU button does not highlight when tabbed to, but the focus is still on it and it is selectable.
* Are you seeing this behavior in Preview, the published output, or both?
I am seeing this behavior in both Preview and published output.
* If in the published output, in what browser is this happening?
IE 11.0.80 & Chrome 69.0.3497.92
The MENU button is on the Master Slide "Base Composition."
The NEXT button is on most pages.
I've included the template I've been developing. The problems show up when you preview and publish.
Thanks for looking into this, if you need anything else, let me know.
Steven Walsh
Hey Steven,
Thanks for sharing the additional details of what you are seeing.
You mention including the file that you are working on, but I'm not seeing that attached here. If you replied via e-mail, that could be why.
Be sure to click 'View' versus 'Reply' in your e-mail notification and attach your .story file via 'Add Attachment' in the bottom left of the reply window.
Ms. McKerchie,
I went through more testing this morning and found that on occasion, the NEXT and/or BACK button did not show the highlight even though they had focus. This behavior was not consistent, or should I say, I did not find a pattern.
Yesterday when I tested, I found that the MENU button consistently does not highlight when you go through a second time. I can get the NEXT button to not highlight by using the menu to select the page I am already on (the first page of a section).
• Are you seeing this behavior in Preview, the published output, or both?
I am seeing this behavior in both Preview and published output.
• If in the published output, in what browser is this happening?
IE 11.0.80 & Chrome 69.0.3497.92
The MENU button is on the Master Slide “Base Composition.”
The NEXT and BACK buttons are on most pages.
I’ve included the template I’ve been developing since it's small. The MENU issue showes up there, but the NEXT and BACK may not.
Thanks for looking into this, if you need anything else, let me know.
Steven Walsh
Hi there Steven,
Thanks so much for sharing your file with me. I've done some testing, and I believe I'm seeing the same behavior you're seeing. Check out this 1-minute demo, and let me know if your experience is similar to mine.
In the meantime, I'm going to share this with our Support Engineers to see if I can get some further insight from them.
Ms. Gomez,
Yes, that is the behavior I'm seeing. However, the MENU button is selected on the second go round after the Audio (OFF) button, however it is not highlighted. You can verify this by pressing the Enter key when you are there.
As I have stated before, the NEXT and BACK buttons will occasionally show the same behavior, which is: be selected but not show the highlight.
Thanks for looking into this,
Steve
I have a similar problem. I have an interactive question 7 people you have to click on (each person is a button with different states for hover and agree and disagree). the 5th one disappears if you hover over it and can stop you from completing the question. I have had to dummy up images to appear as stand alone ones so that the image never seems to disappear. I have tried deleting this one button several times and recreating it based on one of the other button but it still disappears.
Hi William,
Thanks for reaching out and sharing what you are seeing.
It sounds like this may be a different issue than was initially reported here with the keyboard accessibility.
I'd love to be able to take a look at the .story file you are having difficulty with if you could share it here.
Hello Alyssa and Steven,
I am finding the same problem in several different files that I am working on. I have items that are in the tab order but the yellow highlight does not appear when tabbing. Additionally, it is possible to select these items while tabbing, even though they are not highlighted with yellow. Has this issue been resolved?
Thanks for your help!
I have not heard of a fix.
The work around I am using is to not use any "Picture Fills" in the button. My testing has shown that if I have a Picture Fill in any of the secondary states, Hover, Down, etc. that it creates the tabbing highlight visibility issue.
I do occasionally use a picture as a button (it may not be a button object), but it can only have the Normal state.
Let us know how you are creating the buttons.
Hope this helps,
Steve
I'm so sorry you're at the same roadblock, TIL Assistant.
I peeked into Steven's case where I see we have the following behavior as an open software bug: The yellow accessibility box does not appear when a custom Menu button is tabbed the second time – if the other states are added as a picture.
Steven is spot-on: While our team investigates this, one workaround is to add the Hover and Down states by editing the existing normal state and changing the fill.
If you're seeing something different, I'd like our Support Engineers to do a deep dive on your project. Would you mind sharing your .story file with us here?
Hello Steven and Katie,
Thanks for your replies. The software bug seems similar, but not exactly the same as the issue that I am experiencing. The yellow accessibility box does not appear when the button is tabbed on the first time. The items that aren't working are usually buttons inserted from your buttons options (not 'menu' items). I will check with the others on my team, and if I am able, send the file over.
Thanks!
Appreciate you circling back with this insight, TIL Assistant. Please do let us know!
In the meantime, could you share more detail on the built-in buttons you used in the course? Also, what version of Storyline are you using? I'll try to replicate the behavior in a test file.
Hi Guys, have there been a fix for this yet? I have several buttons on my projects that randomly do not highlight.
Thanks!
Hi there, Javier. We are still investigating an issue where the yellow highlight doesn't appear when tabbing to a custom button a second time when its states include pictures.
Does that sound like your setup? If not, feel free to share specifics with me or privately with our support engineers, and we'll see what's happening in your project!
I am having the same issue when I tab to a text box for which I have three states: normal, hover and visited. The text box is a no-fill with white text. On the hover state I have filled the box with orange and applied soft edges so that it looks like the text has an orange glow behind it. On the visited state, the white text is changed to grey and the text box again has no fill. Basically, I have four of these text boxes laid over an illustration (which resides on the slide master) of four tabs. They have triggers applied to jump to different scenarios. So, since the yellow boxes don't show up, if the learner is using the keyboard, they would not know how to get to the scenarios.
Thanks for describing your setup, Miriam. I was able to reproduce the missing highlight box on my text box in the Visited state if it had a soft edge applied to the Hover state.
I'm writing this behavior up as a separate issue so we can explore a fix. In the meantime, removing the soft edge from the Hover state allowed the highlight to appear. Is that a workaround that you could use?
Yes it is.
Although note that to do that I had to create a completely new text box and create new states for it. If I just tried to edit the existing states, the slide would then not display in preview mode. It would hang up and just show a grey slide with the spinning circular rays. So that shed more light for your troubleshooters.
One more thing: I noticed some people said they could not insert an image in the states. I was able to insert a caption in the hover state and have it still highlight when tabbing. That might have something to do with the fact that it is an Articulate-supplied element, but might be helpful knowledge anyway.
Thanks!
Miriam
[UTK
Hm, that doesn't sound like something connected to this bug, but more something in the file itself. Have you checked on these best practices to prevent odd behavior in your files?
Let me know if that helps, or if you continue to see some quirkiness while working!
I had this same issue with a template I created utilizing 25 "radio buttons". Storyline's built-in radio buttons do not offer much in the way of flexibility, so it is necessary to build my own. I created individual PNG files for each state, and surely enough, most of the buttons were not highlighted when using keyboard navigation.
The fix was to create a transparent square in Storyline as the button, create the required states, and paste the appropriate button image into each one. It was a fair amount of rework, but it works now.
Has this been resolved? It's been a long time, but we're seeing this issue now.
Hi, Jason!
I'm so sorry you've come across this bug. We're still looking into its cause, and promise to update this discussion on any new developments.
In the meantime, let me know if any of these workarounds fit for your course:
Hi everyone,
Thank you all for continuing to share the crucial need for creating accessible content for all learners. While more work remains, we're at a point where we're confident the job done so far delivers meaningful real-world improvements for learners with accessibility needs.
I've included links below where you can find all the details on what this means for Storyline 360 Update 36:
You'll also see our general FAQ on accessibility in Articulate 360 tools here.
This release makes it significantly easier for those users to perceive, operate, and understand content published with Storyline, while opening up more choices of the browser, assistive technology, and devices for the first time. Learners will benefit from the vast majority of these improvements, even when the course author is not designing their course for accessibility.
If you have any questions or concerns, let us know here or reach out to our Support team. We know there is more to do, so we'll continue to keep you posted about future releases.
Hi, everyone.
We appreciate your patience while our team investigated this.
I am happy to share some great news! We fixed the issue some of you reported where:
Yellow accessibility box does not appear when a custom Menu button is tabbed the second time if the other states are added as a picture.
Be sure to install the latest Storyline 360 update (Build 3.49.24347.0) to take advantage of all the recent features and fixes.
If the problem happens again, please let us know, or you can always work directly with our support engineers here.