-
AJH89Asked 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 LeadReplied 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:
Please kindly test it and let us know if it works.
Thanks.
-
AJH89Replied 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
-
BJoannaReplied 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.
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.
-
AJH89Replied 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 LeadReplied 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.