Hello, 

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?