Accessible error recovery

  • Thank you so much for a great plugin!

    I’m trying to make my customer’s site accessible and noticed that the way errors are handled could be improved. A screen reader gets only a general notification which says: “One or more fields contains an error. Please check the fields and try again.” Firstly, the focus should be automatically set to the notification so that the user finds it immediately. Secondly, there is a list element in the screen reader notification which repeats “This field is required” but does not specify which fields are missing content. Just adding the field name in the beginning would go a long way (for example “First name: This field is required”). There should also be an anchor link to the field which needs attention. See the guide here: https://webaim.org/techniques/formvalidation/#error (“Errors on top” example).

    Any plans to implement these? ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Thanks for the suggestions.

    Firstly, the focus should be automatically set to the notification so that the user finds it immediately.

    This is what Contact Form 7 avoids by intention. That may confuse the user if the focus moves without their intent.

    Just adding the field name in the beginning would go a long way (for example “First name: This field is required”).

    This is not possible with the current implementation because there is no method to know the field label. I’m planning to improve the form editor implementing Block Editor, and that may make that possible. Please wait for it.

    There should also be an anchor link to the field which needs attention.

    If the form-tag for the field has the id: option, an anchor link to it will appear.

    Thread Starter la_ri_za

    (@la_ri_za)

    Thank you for your quick answer!

    This is what Contact Form 7 avoids by intention. That may confuse the user if the focus moves without their intent.

    I generally understand your point, but this contradicts the WCAG 2.1 guidelines: “The “Errors on top” approach displays the error message above the form. When presented, focus should be set to this error message to allow screen reader and keyboard users to immediately access the error message without having to find it amongst the rest of the page contents.”

    I had a blind person testing my site and this was a real problem for him.

    I also personally think that when a user clicks Send button, it is logical and helpful that the focus goes to the Success/Error notification. Though with CF7 there is a problem that the visible notification is under the form while the screenreader notification is on top. They should be in the same place for this to work.

    This is not possible with the current implementation because there is no method to know the field label. I’m planning to improve the form editor implementing Block Editor, and that may make that possible. Please wait for it.

    Ok, I understand!

    If the form-tag for the field has the id: option, an anchor link to it will appear.

    Oh, great! This helps a lot!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Accessible error recovery’ is closed to new replies.