My contact form solution with React.js and React-Hook-Forms

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 25 days ago

  There's one accessibility failure I can see quickly looking at the code: Most of these form fields are collecting personal data, but none have used valid autocomplete attributes. These are essential on common fields like this.

  For the rest, I'd need to test it properly. Particularly

  • missing required attributes
  • because alert has been used for all errors instead of always-linked aria-live regions I think only the last error will be announced when multiple are present and they won't be consistently announced when focused on the fields.
  • there are conflicting aria-live AND role attributes on the thanks toast and nested aria-live inside aria-live.
  • I'm not sure aboht the would be focus on the toast so need to check that too. UPDATE: Voiceover keeps focus on a h2 "message sent" after it disappears, which I'm then unable to exit.
  • the email error appears to show up as soon as I type one letter into the input which is not an accessibility failure but is a usability problem (likely to annoy people). I didn't see this happening on other fields, just that one.

  Toast alerts like in this design are inherently less accessible than just showing a thank you message or dismissable modal anyway. But sometimes we have to build these things as per the design, so it can't be helped.

  Marked as helpful

  0

  ---

  

  P

  Gümrah Sindar•490

  @gumrahsindarPosted 25 days ago

  @grace-snow Thank you for your feedback. I really appreciate it. 😊 I took into account all your comments and did my best to address them.

  • Added aria-required instead of required (I didn't want the browser's default behavior to show because I handled it with RHF).
  • Changed aria-alert to aria-live.
  • Fixed the toast overflow issue on mobile screens. Some of the other issues you mentioned didn't occur on my browser or with VoiceOver (or I might have misunderstood the issue), but I tried to fix them as well. The quality of my form has significantly improved thanks to your suggestions. Thank you so much again 💐

  0