Tutorial: Change the Focus Outline Colour

Feb 03, 2019

Have you ever wanted to change the outline colour of the lovely yellow box that pops up when you hit TAB in Storyline? You know the one... it shows which object has focus for those who are using their keyboard to navigate a course.

By default, it looks like this:

While that is a good colour and is accessible against most backgrounds, at times it is less than ideal.

In this tutorial, we will look at how to change the colour of the focus outline that appears when you press tab when viewing a Storyline course.

Click here to see the tutorial, here to see a demohere to download the source file and here to grab a cheat sheet.

Let me know if you have any questions, comments or are stuck with implementing any of this. I'm happy to help where I can.

15 Replies
Amy Hengst

This is cool, I have been trying to learn some Javascript but was understanding there were limitations that you couldn't get document elements from within SL, only adjust variables. Is there new JS support in SL or maybe I just don't know enough JS yet to really get it? 

Luckily I was able to use Storyline features alone in my recent course functionality.

Jackie Waskewicz

This is great! We use a lot of white backgrounds and are looking to achieve Level 2.1 standards as it pertains to graphical objects and user interface components. Our team as asked multiple times about this as the yellow doesn't pass that standard. I had been looking for something to change within the published manifest file, but this is great!

Sarah Hodge

Hi Glenda! Great question! The yellow box is designed to ensure that learners using a keyboard to navigate can always see what they’re selecting. You can change the order, edit, or remove the accessibility box. To edit the box, you have two options:

  • Edit the colors – If you want to just change the color of the box, we just released a new feature that allows you to edit the focus colors so learners can see what they’re selecting no matter what color the background.
  • Turn it off – If you want to remove it altogether, you can turn off the yellow accessibility box for an object by removing the object from the slide's tab order or by unchecking the accessibility visibility box on the Size and Position window

I hope that helps!