Yellow Tabbing Highlight Disappearing

I've built a course in Storyline 3 that needs to be fully accessible, so users need to be able to go through the entire course using only the keyboard.

Strangely, when I tab through the course, the yellow box that highlights the active part of the screen disappears on certain elements. For example, it will be visible when I tab to one button, but if I tab to the next one, it disappears. I'm still able to interact with and click on the buttons where the highlight isn't visible, it's just that the highlight can't be seen. 

Also, this problem is only in Chrome. When I use Internet Explorer, everything works as expected.

Has anyone come across this problem before?

 

Thanks.

7 Replies
Andrew Baloga

Hi, Jon.

I encountered this issue when I developed a multiple question true or false activity with custom "radio buttons" created from PNG images. Storyline does not recognize the graphic file within its various states. Fortunately, the way to circumvent the problem was simple once I figured it out.

Are your buttons created from images?

If they are, using the built-in button insertion menu and selecting your image(s) as the fill will fix this problem.

Jon Merifield

Hi Andrew,

Thanks for responding, but it doesn't seem to be an issue of the buttons being custom or not. Even the built in buttons are experiencing the same issue. Strangely enough, everything works fine in preview, and everything works well in Explorer. It's just when I run the course through Chrome that the tab box disappears. 

Lauren Connelly

Hello Jon!

Happy to help! There are a few questions that will help me begin troubleshooting.

  • How are you publishing the course?
  • Where are you viewing the course while using Chrome? (LMS, website, etc.)
  • What version of Chrome are you using?

Would you mind sharing your file with us? You can do so by using the "add attachment" button in this discussion. Or you can share the file privately with our Support Engineers by using this link.

Jon Merifield

Hi Lauren,

Thanks for getting back to me.

I'm publishing for the LMS using the Storyline Player. HTML 5 (Flash fallback), SCORM 1.2. I'm viewing the course in Chrome Version 78.0.3904.87 (Official Build) (32-bit), and I'm experiencing this problem both when I view it from my desktop and from the LMS. 

I wish I could share the file, but unfortunately, my company's privacy policy doesn't allow me to share work outside of the company or our business partners. 

Lauren Connelly

Hi Jon!

Thank you for including these helpful details! We can try to iron out these details without seeing the file.

By chance, are you using layers? Can you make sure that "Prevent the user from clicking on the base layer" is unchecked in the Slide Properties?

Also, which elements are not lightboxed? I wonder if we can find a common theme!

Jon Merifield

Hi Lauren,

I was able to mock up a non-branded example that I can share (attached). When you publish and play the Story_HTML5 file in Chrome, you'll see that the yellow tabbing box will go to most of the buttons that it should, but the next and previous button won't highlight. Strangely enough, you can still interact with them and click on them, but the highlight box just doesn't show up for those buttons.

In my larger course, the box also shows up for the first 3 of the 4 buttons on the left hand side, but not the last one. When I made this example version, it looks like that was mysteriously fixed, though I have no idea why :)

Andrew Baloga

Jon,

I tested your Example.story file as published from Storyline 3 with Google Chrome and the tab order and highlight does indeed function properly. I attached a screen recording to illustrate this.

I am currently working with a government agency with their clearly defined 508 requirements. Is there any reason you would not want to set up the tab order like this?

  1. Course title
  2. Base Layer text box
  3. Button 1
    • Slide Layer 1 text box
  4. Button 2
    • Slide Layer 2 text box
  5. Button 3
    • Slide Layer 3 text box
  6. Button 4
    • Slide Layer 4 text box
  7. Back Button
  8. Next Button