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
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.
Thanks Bob for sharing your insight here and submitting that feature request to us right here. 😁
In case you're curious how we handle all the ideas we receive, take a look at this article!
i'd also like to see this feature. we have an urgent need to address the situation, and do NOT want to start messing with css.
Was there a solution found to this limitation of the Focus Indicator being yellow? Is there a way to change it?
Could you please point me in the right direction to the part of the css that needs changing?
Matthew, if you can't figure it out us mortals have NO chance :-)
Try this: in the /html5/lib/scripts/app.min.js
find:
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!
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.
If only I had that superpower... 😉
But Zsolt, you are truly a 🌟 - thanks for all your help here in the E-Learning Heroes Community. Especially with these custom design questions, really neat stuff!
Zsolt you are amazing, thank you! It was a bit messy using notepad++ to open the javascript, what would you use?
The master slide trick works perfectly, thank you so much!!
Rachel, the file is minified, that's why it looks messy. For quick changes I use Notepad++ as well.
Cool! Thanks
Hello
Can I get the current focused item (in tab orders) so that I can play a media file for the focused item?
Hi Ahmed,
I'm not sure I understand what you'd like to set up? If you've tabbed to an item that's a media object, are you having difficulty playing that? Try using the Enter or Spacebar keys to activate an item that you've tabbed too.
Thanks for sharing Zsolt Olah
Thanks for sharing Matthew Bibby
This post was removed by the author
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;}";
document.body.appendChild(sheet);
window.changeFocusColor = true;
}
}
This discussion is closed. You can start a new discussion or contact Articulate Support.