How to have focus indicator in the terms and conditions widget?

  • AJH89
    Asked on June 18, 2018 at 10:19 AM

    Good afternoon..

    Do the widget fields use focus indicators for accessibility when users navigate the form using the keyboard?

    For example, in this form you work through the form using the keyboard and each field is highlighted. 

    When you reach the terms and conditions tick box this is not the case and it's unclear whether you're on the field.

    https://www.pearson.com/uk/about-us/permissions/alternative-formats.html

    Thanks

    James

  • Kevin Support Team Lead
    Replied on June 18, 2018 at 11:35 AM

    The widget does not have a focus effect due to how the check box element is manipulated, if you want to have the effect you may inject this code to the widget: 


    #userInput{

        opacity:1 !important;

        margin-left: 2px !important;

    }


    .icheckbox_minimal.hover{

        width: 16px !important;

        height: 16px !important;

        margin-left: 1px !important;

    }

    Guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    Result: 

    How to have focus indicator in the terms and conditions widget? Image 10

    Please kindly test it and let us know if it works. 

    Thanks. 

  • AJH89
    Replied on June 18, 2018 at 11:54 AM

    Thanks for the reply. 

    Is there a way the whole section can be highlighted? Much like the boxes above. 

    Is that the same why the checkbox in dropdown widget doesn't have a focus effect?

    https://qualifications.pearson.com/en/forms/a-level-drama-theatre-component-text-choices.html

  • BJoanna
    Replied on June 18, 2018 at 1:09 PM

    Unfortunately, it is not possible to highlight the whole section because it is not possible to focus the fields that are inside of an iFrame. 

    The only possible solution that I found is to use on hover option. 

    1529341461hover Screenshot 10

    Here is my demo form - https://form.jotform.com/81684754271969 

    If you want to use on hover effect add this CSS code to your form:

    li#id_60:hover {

        border: 1px solid blue;

    }

    How to Inject Custom CSS Codes

    Is that the same why the checkbox in dropdown widget doesn't have a focus effect?

    Yes. 

  • AJH89
    Replied on June 19, 2018 at 6:10 AM

    Thank you for the response. 

    Unfortunately, that hover option only works when using a mouse. 

  • Kiran Support Team Lead
    Replied on June 19, 2018 at 10:22 AM

    Yes. The hover property works with the mouse only. I am not sure if we can have an iframe field focused using CSS. Let me check on this and see if I can get any information in this regard. I'll update you here on this thread as soon as I have any news for you.

    Thank you for your patience.