Tab Order Color

Dec 15, 2017

Was the tab order highlight box "color" ever addressed or put in as feature request?

The current "Yellow" color does not meet Section 508 if the slide background color is similar or white. It doesn't meet the contrast ratio requirements.

Feature request would be to allow that color to be editable within the player options.

And just for fun, why is it RED in the tab order preview but YELLOW when published?

18 Replies
Bob O'Donnell

I think Articulate needs to include it.

That "Red" tabbing color is built inside storyline. Its the tabbing order pre-check before publishing or "previewing". Sorry, should have chose my wording better. It has nothing to do with your browser settings at all since you're working inside the Storyline program and not inside a browser window.

Changing the tab color after the file is published is not a great option. Especially considering we need to turn our master file over to the client. Asking them to take extra steps outside of the program if they make a change is not a great solution. Option yes, solution no.

I'll submit a request.

Zsolt Olah

Try this: in the /html5/lib/scripts/app.min.js


i.setStyles(this.borderEl,{position:"absolute",left:0,top:0,border:"3px solid yellow","pointer-events":"none","z-index":99999})

Change the "yellow" to whatever you want. for example red: 

i.setStyles(this.borderEl,{position:"absolute",left:0,top:0,border:"3px solid red","pointer-events":"none","z-index":99999})

Let me know if this helps!

Zsolt Olah

Sure! I always wanted to be a legend! By the way, if anyone is trying to crack down something like that:

1. I use ColorZilla to identify colors on the screen.

2. Then search for all files (and within files) for the rgb or hexa code.

3. This one is a two step process because I found the definition of "yellow" in one file first. Then I reran the search for yellow instead of the hexa color code. Found three instances.

4. Changed them one by one and see which one makes a difference.

I'm not sure if this also works on the non-html5 version.

Jessica Rodrigue

Hi there! Has anyone been successful with a double border on this code? I would like to have a darker border and then a lighter border so regardless of my background color, I can meet contract requirements...I have been experimenting unsuccessfully by altering this code:

if (/_html5.html/.test(window.location.href)) {
if (!window.changeFocusColor){
var sheet = document.createElement('style');
sheet.innerHTML = ".tab-focus-box{border: 3px solid #000000 !important;}";
window.changeFocusColor = true;

This discussion is closed. You can start a new discussion or contact Articulate Support.