Skip to main content
M
mattf66566554
Participant
April 7, 2017
Answered

Adding Visual Focus to Buttons in Captivate

  • April 7, 2017
  • 3 replies
  • 2723 views

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

    This topic has been closed for replies.
    Correct answer mferguson192291

    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.

    3 replies

    klospieli
    klospieli
    Known Participant
    November 15, 2019

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

    A
    adijeff
    Participant
    November 26, 2020

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

     

    M
    mferguson192291Correct answer
    Inspiring
    April 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.

      M
      mattf66566554Author
      Participant
      April 27, 2017

      Wow, that worked great. Thanks so much!

      Paul Wilson CTDP
      Community Expert
      Paul Wilson CTDPCommunity Expert
      Community Expert
      April 7, 2017

      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
        klospieli
        klospieli
        Known Participant
        November 15, 2019

        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)

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices