search

hypothesis / product-backlog

Where new feature ideas and current bugs for the Hypothesis product live
118 stars 7 forks source link

Handling form validation errors in a more accessible way #1535

Closed dwhly closed 5 months ago

dwhly commented 5 months ago

The final VPAT item (3.3.1) which is about how we handle form validation errors, needs another review from us to see if we can resolve the issue they flagged without causing the problems that Alejandro identified in https://github.com/hypothesis/lms/pull/6040. This will come up with other UI in future, so it is worth understanding generally how to solve it.

For reference: Adding the alert role to the error message causes assistive technologies to announce the error twice when the text input is focused. Some accessibility guides recommend not using this as long as this issue remains. The text input is marked as invalid, so assistive technologies announce the error anyway.The notes at https://github.com/hypothesis/lms/pull/6042 and https://github.com/hypothesis/lms/pull/6040#issuecomment-1935946769 explain our approach.

I think the crux of the issue here is that if one enters invalid data and presses the submit button, nothing happens for non-sighted users. No announcement is made and one has to navigate back into the form to find that there’s an error. I understand the desire to avoid duplicate announcements, but the issue here is the lack of immediate feedback to non-sighted users when an error occurs, which forces the user to have to search through the page to discover that a) an error has occurred; and b) what the error is.

robertknight commented 5 months ago

I'll respond to this comment to clarify what we've changed:

I think the crux of the issue here is that if one enters invalid data and presses the submit button, nothing happens for non-sighted users. No announcement is made and one has to navigate back into the form to find that there’s an error.

We have now modified our form controls so that pressing the submit button (or otherwise submitting the form) focuses the first field with an error, if there is one. This will cause screen readers to announce the error as part of describing the field. This mirrors how native HTML validation works. We adopted the approach from React Aria. Behind the scenes the visually presented validation error is also communicated to the browser via the native form validation API.