• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Adding Visual Focus to Buttons in Captivate

Community Beginner ,
Apr 07, 2017 Apr 07, 2017

Copy link to clipboard

Copied

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

Views

1.6K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Participant , Apr 26, 2017 Apr 26, 2017

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.

Likes

Translate

Translate
Community Expert ,
Apr 07, 2017 Apr 07, 2017

Copy link to clipboard

Copied

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

Paul Wilson, CTDP

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 15, 2019 Nov 15, 2019

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 26, 2017 Apr 26, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 27, 2017 Apr 27, 2017

Copy link to clipboard

Copied

Wow, that worked great. Thanks so much!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 03, 2017 May 03, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 03, 2017 May 03, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 04, 2017 May 04, 2017

Copy link to clipboard

Copied

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."

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 04, 2017 May 04, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 04, 2017 May 04, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 10, 2019 Oct 10, 2019

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 15, 2019 Nov 15, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 26, 2020 Nov 26, 2020

Copy link to clipboard

Copied

LATEST

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;
}

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines