Contact Form

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 19 days ago

  Well done on this, it looks pretty good overall. I have some accessibility suggestions though.

  • it's unnecessary to use aria- required and required on the inputs. It's not a problem having it, and it helps the fieldset but on others you can just use the required attribute if you wish.
  • the fieldset for query type should have its role set to "radiogroup" so that the required attributes work.
  • the error messages are currently all being announced by screen readers by default. Aria still reads things that are hidden using the hidden attribute. It's still good to use, BUT ideally you should be populating the error message text dynamically when it's relevant. Or you can hide the content inside those errors with an extra element and display none. This is partly why it's valuable to test with a screen reader to learn how these things work.
  • the error messages should each be wrapped in an aria-live region, or focus should move to the first input that has an error to ensure it gets read out when it occurs.
  • Moving focus would have the added benefit of ensuring the error is visible (scrolled into view) for people using mobile or zoomed screens.
  • I recommend you either add a line of text to the start of the form that states "required fields are marked with an asterisk" or wrap the stars in an aria-hidden span. They are currently being announced with the labels.

  Marked as helpful

  1

  ---

  

  Andres Lamar•300

  @AndresLamarPosted 18 days ago

  @grace-snow Thanks so much for your feedback!

  It was my first time using WAI-ARIA, i'll correct all the points you suggested, and take them in consideration for future projects so i won´t make the same mistakes.

  0