Adding Visual Focus to Buttons in Captivate

[mattf66566554]

Hi,

For accessibility purposes, I'm trying to figure out if it is possible to add visual focus to buttons and other elements in Captivate. What I mean by this is adding some sort of visual indicator around a button when you tab between them, so people who are using a keyboard know which button currently has focus. I can't figure out a way to do this, does anyone have an ideas?

Thanks

[Paul Wilson CTDP]

It is there but it's only one pixel wide and could easily be missed, especially if the person who uses only a keyboard also has a visual impairment. you might want to suggest this as a feature enhancement. Perhaps tabbing could activate the rollover effect on multi-state buttons. If you would like to suggest it as a feature click the link below...

http://www.adobe.com/products/wishform.html

[klospieli]

Paul... i follow you on youtube. (thank you for all your help!) Any idea how to make focus indicators work on the buttons on the page and not just on the playbar? (see bottom 2 replies on this thread)

[mferguson192291 · Accepted solution]

When you publish your Captivate course, Go into Assets folder -> CSS folder -> and open CPLibraryAll in Notepad. Copy and paste the following lines into your published course output.

*:focus {outline: #FF0033 solid 3px;

}

.cp-frameset:focus {

opacity: 1 !important;

background-color: transparent !important;

}

Then save. Now you have a very visible keyboard focus indicator for your course. You can change the Color Code and Size at your leisure by changing the color code above, etc.

[mattf66566554]

Wow, that worked great. Thanks so much!

[mattf66566554]

Hi, one quick question/update. This code works great in Internet Explorer, but I've noticed that it is not working in Chrome or Firefox. Do these browsers have CSS that is overriding this? Do you know of any way around this? Thanks.

[mferguson192291]

It works fine for me in Chrome. In Firefox though I have noticed the focus field extends all the way across the page when tabbing through from button to button. I am using custom navigation buttons in my courses by the way, never really used the default playbar. It probably is a CSS issue with the browser or perhaps with the way Captivate is interacting with the browser. I don't know enough code to troubleshoot, but if you have someone on your team that does you can use Windows Inspect or Accessibility Viewer Tool to view the code on your browser screen while your Captivate course is playing to figure out the issue.

If you find someone who figures it out, let me know!

[mferguson192291]

Here's some good information I found recently. According to Adobe website here, "Output generated with the Enable Accessibility option is displayed by all supported browsers. However, your output may not be Section 508-compliant unless it is viewed with Internet Explorer. Internet Explorer is the only browser with support for MSAA (Microsoft Active Accessibility)."

I found more information about the relationship between Screen Readers and browser usage here. "Programming accessible interactive components is not easy, and depending on the browsers and OSs that are used to test these components during development, accessibility results will vary between screen readers.Therefore, the best way to ensure the highest level of accessibility for the highest percentage of screen reader users, is to program complex interactive components using the most widely used screen readers to test this functionality in the Operating Systems where they are most widely used. Currently, this is within the Windows OS using JAWS and Internet Explorer, and using NVDA in Firefox for laptops and desktops. For mobile devices, the most widely used screen reader is Voiceover in iOS devices."

[mattf66566554]

Thanks, this is good information to have. My only worry is that adding the visual focus to buttons is really more meant for people who are not using a screen reader. They have sight but need to use a keyboard to navigate due to something like a mobility impairment. In this case they could be using really any browser.

[mferguson192291]

Yeah. There is probably some sort of code out there to fix it. Just like there is probably something to fix the issue I have with Firefox's weird focus field glitch. But accessibility is not a zero sum game. Yes, strive to make something as accessible as you can. But recognize that when dealing with different independent software and browser systems, there will always be exceptions. Captivate itself has inherent limitations. I have to use smartshapes as buttons rather than text captions in order to have my course text put in the tab order and read by screen readers. We adapt and so can our users. You have an accessible solution for those individuals, use a different browser that works. Nothing in WCAG 2.0 requires that everything work on every browser and every system configuration, that would be crazy. But if you find a solution to fix the other browser, then that's just gravy. And share it with me too!

[asgarofano]

Hi, mferguson192291. This soultion is only partially working for me. The CSS adds a colored outline to the Play bar menu buttons (play, back, forward, etc.), but not to the buttons on teh screen. The screen reader is reading them, but no focus. I'm using Captivate 2019 and NVDA on Chrome to test. Any help would be MUCH appreciated!

[klospieli]

I'm having the same issue asgarofano mentions. Any help would be appreciated!

[adijeff]

Captivate adds a number of inline css styles to buttons, including this one:

style="outline-style: none;"

 Because it's inline, it takes precedence over the outline-style rule you add into Assets/CSS/CPLibraryAll.css

If you amend the rule to this it should work:

*:focus {
    outline: 3px red solid !important;
}

 If you want to target elements further to only highlight buttons, replace the * with [role=button]:

[role=button]:focus {
    outline: 3px red solid !important;
}