May 16, 2017
Maintaining Keyboard Focus – Accessibility Tip
Comments
(5)
May 16, 2017
Maintaining Keyboard Focus – Accessibility Tip
Newbie 2 posts
Followers: 3 people
(5)

screenshot of css file with pasted codeWhen 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.

*:focus {outline: #FF0033 solid 3px;
}
.cp-frameset:focus {
opacity: 1 !important;
background-color: transparent !important;
}
5 Comments
2019-08-24 23:11:19
2019-08-24 23:11:19

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.

Like
2019-06-11 15:13:16
2019-06-11 15:13:16

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!

Like
2019-04-23 15:17:13
2019-04-23 15:17:13

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.

Like
2018-04-27 14:19:40
2018-04-27 14:19:40

Hi Mark,

Thanks for posting this! It helped me on some browsers, but I’m still unable to see the selection box when tabbing through items in Firefox Developer Edition or Chrome. Just wondering if you have any additional tips on this. Using Captivate 2017 and publishing to HTML5. Your styles helped ensure the selection box shows up in IE and Edge, but still having trouble with other browsers.

Thanks!
-Mark Rash

Like
(1)
>
markrash@ORAU
's comment
2018-06-19 01:25:40
2018-06-19 01:25:40
>
markrash@ORAU
's comment

Just needs an !important after focus:

*:focus {outline: #FF0033 solid 3px !important;
}
.cp-frameset:focus {
opacity: 1 !important;
background-color: transparent !important;
}

Like
(1)
Add Comment