Newsletter sign-up form with success message

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  This looks nice

  The main areas you could improve this are in terms of form accessibility like

  • programmatically linking the error message to its input. The best way to do that is wrapping the hidden error in an element with an aria-live attribute and unique ID, and using aria-desciribedby on the input pointing to that ID
  • wrapping the thank you in an aria-live div
  • making sure focus moves to the thank you. I'd probably use tabindex -1 on the heading and move focus there on successful submit (and a similar approach on dismiss/reset)

  Steps like this really helps assistive technology users

  Marked as helpful

  1

  ---

  

  Josh•1,110

  @josh76543210Posted over 1 year ago

  Thank you @grace-snow for the feedback. Much appreciated!

  0