Intro component with sign up form: CSS Grid + JS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks really great, it is responsive and the mobile layout is great as well.

  Some suggestions would be:

  • On the form I wouldn't use a ul on it really or if you insist, do not include the button inside it since it will be confusing since it is supposed to be "list" of inputs and not with the button.
  • For extra accessibility, right now the error-message is only seen visually but not connected to the input properly. A pseudocode looks like these would be great:

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", id of the error-message);
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy.

  • Also, to make it accessible just a suggestion, it would be great to have an aria-live element that will announce if the form submitted is a success or not. This way users will be informed right away about the form.

  If you have trouble about the suggestion, have a look a this simple snippet I made for accessible form. Though I used screen-reader only label on this which you can use as well if you want well it depends on the design right.

  Just those above, again great work on this one.

  Marked as helpful

  1

  ---

  

  Thiago Santos•295

  @thiago-hdsPosted about 3 years ago

  @pikamart Thank you very much for the detailed feedback! It is really helpful. I'll implement your suggestions and learn more about accessibility. :D

  1