Tutorial: Change the Focus Outline Colour
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 demo, here 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.
14 Replies
Thank you Matthew as comprehensive as ever!
Thanks Phil.
This is cool Matthew, but yellow is the highest visibility colour which is why it is used for the focus indicator. Not sure if changing it would violate any accessibilty standards.
You are right, but we also need to consider the colours that it is shown against. I'm working on a course at the moment that uses a lot of yellow and the outline gets lost, so changing it improves the accessibility.
Funny, I am working on a course with a lot of yellow right now and didn't even consider how the focus indicator looks against it. Thanks for the reminder and I am definitely going to try your method.
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.
It can be tricky to interact with a lot of the document elements, however, you can change them by using a similar approach to the above. Essentially, I'm adding new CSS to the file at runtime and forcing it to overwrite the default CSS.
Thanks! Yeah it's a little hacky, but hey it works! I'll keep studying Js then, inspiring.
I'm a big fan of hacky!
Good luck with your learning Amy, yell out if you ever get stuck and need a hand.
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!
Glad it is helpful for you Jackie.
Note that due to changes in Storyline, the code:
if (/_html5.html/.test(window.location.href)) {and it's closing
}should be removed from this solution.I am working on a software simulation that uses the TAB key as part of its native functionality. Having the yellow box appear (seemingly) out of nowhere, is distracting for my users. Is there a way to turn it off or set it to "no color"?
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:
I hope that helps!