With the launch of the component, we gave a visually impaired person the feel of the surfing experience and gave us opinions, improvements, additions and changes.
One of the notes was that when filling out the fields in a wrong form, one of them was skipped and when the screen reader passed the wrong fields he read "Required field".
Which meant I did not know which field I did not do right, said the blind man.
Therefore, we found a simple way to overcome this problem:
First, add the following code above the form, name the error message above the [response] form and place a <label> tag on each field in the form.
Second, change the error message and add the required fields for example here
There were verification errors, please fill in the required fields – name, email, phone and try again. To move to the first incorrect field, click Tab
When we perform these operations, the blind user will hear which fields are incorrect and move to them using the keyboard (the focus returns to the fields)
And the wrong form will show this clearly:
