Notification
Newbie
2 posts
When it comes to accessibility, people usually first think of closed captions and alternative text. But a major issue often overlooked is the importance of keyboard focus. There are individuals out there who are unable to use a mouse and rely exclusively on the keyboard to navigate on the computer. When you storyboard and develop your courses in Captivate, ensure that you have a visible keyboard focus indicator in the browser(s) that your organization/company is using!
I had this problem not long ago with Internet Explorer and there being a very faint keyboard focus field when testing a published Captivate course. Firefox and Chrome also, in my opinion, have faint focus indicators. As far as I could tell, Captivate does not have an internal mechanism to change focus field color or size (only an option to hide the focus field). So, us lowly Captivate users have to resort to external code and manipulation to get the desired result.
Using the following HTML code, copy and paste it in your published Captivate course folder -> assets -> css -> CPLibraryAll … by opening it with notepad and select save. Then when you open the index.html of your Course, there should be a bolder red focus field. You can change the color or size by manipulating the code below.
}
.cp-frameset:focus {
opacity: 1 !important;
background-color: transparent !important;
}
When it comes to accessibility, people usually first think of closed captions and alternative text. But a major issue often overlooked is the importance of keyboard focus. There are individuals out there who are unable to use a mouse and rely exclusively on the keyboard to navigate on the computer. When you storyboard and develop your courses in Captivate, ensure that you have a visible keyboard focus indicator in the browser(s) that your organization/company is using!
I had this problem not long ago with Internet Explorer and there being a very faint keyboard focus field when testing a published Captivate course. Firefox and Chrome also, in my opinion, have faint focus indicators. As far as I could tell, Captivate does not have an internal mechanism to change focus field color or size (only an option to hide the focus field). So, us lowly Captivate users have to resort to external code and manipulation to get the desired result.
Using the following HTML code, copy and paste it in your published Captivate course folder -> assets -> css -> CPLibraryAll … by opening it with notepad and select save. Then when you open the index.html of your Course, there should be a bolder red focus field. You can change the color or size by manipulating the code below.
}
.cp-frameset:focus {
opacity: 1 !important;
background-color: transparent !important;
}
You must be logged in to post a comment.
- Most Recent
- Most Relevant
Thank you! I’ve been struggling with using smart shapes as buttons and keyboard navigation for a number of reasons. The first barrier involved having custom shortcuts on buttons that are initially hidden. Prior to removing the shortcuts, keyboard navigation was nonfunctional. Now, I can see what I’m tabbing to. Yay! Now to figure out why my tab key is not being restricted to the stage despite my project settings indicating otherwise. 🙂
I appreciate your help.
Thank you for this! I just tested a course (created in CP2017) in the most current version of JAWS and in Firefox, Chrome, and MS Edge, and the highlight is green and much more visible than the previous version combos (older JAWS, older browser versions) I’ve tested in. It’s great to have a snippet in my toolbox that I can use in the future if I find that I want to change the highlight specs!
Thank you, this helped us fix an issue we were seeing! I’m hoping Adobe fixes this since we will want to publish more and more projects without Flash. Since this was a couple of years ago, I wondered if you had found a workaround for Chrome and Firefox as well? The fix works for IE as you noted, but not the other browsers.
