Set focus on input/textarea/select elements that utilize client side format validation when error is detected
I have a requirement to set focus on the input/text area/select elements (that utilize client side validation) when an error is detected.
Currently, when an input element has a client side error detected (i.e. when a required field that is empty and user clicks out of the required field) an error label appears on the bottom of the field. Then, when the user clicks the submit button on the form, a browser alert pop up appears informing the user to correct the error.
I would like to utilize the follow approach for accessibility:
Approach 1: When the user tries to tab out of a field and a client side validation error is detected (i.e. required field that is empty), the focus indicator will remain on the required field until the property conditions have been met.
Approach 2: When the user tries to tab out of the field and error is detected, the browser alert pop up appears and when user closes the alert, focus falls on the field with error detected.
Approach 3: When user doesn't meet conditions of the client side validation for a field and tries to submit the form, the alert pop up appears and when the user closes the alert, focus falls on the field with error detected.
Which of these approaches is a better practice for accessibility? Are there other suggestions on how to achieve this task, possibly with Pega OOTB?
If your perspective is coming from an accessibility point of view, have you tried/considered/tested with accessibility enabled?
You can do this from the access group (it will prompt you to import the PegaWAI RS as well).
With accessibility enabled, if you fail a client side required validation focus will remain on the field to prompt the user to correct. It will not tab into the next field at all and will be interrupted.
Is that the type of behavior you are looking for?