Intro-Component-with-Sign-Up-Form

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, nice work on this one. The desktop layout looks fine, just needed for the form to be bit wider/larger than the current, for responsiveness, I think the .wrapper width is too little because if you go to like 800px, you will see that the layout is somewhat squished. Mobile state looks great though.

  Some suggestions mainly on the markup would be:

  • Of course, making the .wrapper's max-width to be a bit bigger so that it won't feel squished when resizing the screen.
  • You could change the blue-container's text to just using p tag instead of heading tag since it just looks like a regular text rather than heading text.
  • Trying to use tabs on my keyboard, I noticed that skimming on the input, it already shows the error even though I haven't typed anything, I just set focus on it. For me, I prefer to only show error-messages "after" submitting the form. Check > validate > show errors. This way, you could for example trigger an aria-live element that will announce that there are errors made by the user after submitting the form and it is much better in terms of ux.
  • Each input right now currently lacks associated label to it or an aria-label to which will define the purpose of the input element. Always include it so that user will know what they need to give on each input. Make sure that label is pointing to the id of the input as well.
  • The error-icon that you are using is only acting as decorative image. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • Also, when using img tag, you don't need to add words that relates to "graphic" such as "icon" and others, since img is already an image so no need to describe it as one.
  • Currently, the error-message is only seen visually but not really linked to their respective input. A proper way of doing like a validation would look something like this:

  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.

  For the javascript part, for now I won't look at your code but I will share this simple accessible form snippet that I have. Feel free to ask any queries about this one^^

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Muhammad Mahmoud•340

  @MuhammadM1998Posted almost 3 years ago

  @pikapikamart Wow really an amazing feedback thank you very much.

  • Width problem happens as i measure the content in the deign image then devide it by the image total width (1440px) and use that percentage or a little higher just to get the page close to the site design, that's why I'm asking about a better ways of measuring JPGs design images.
  • You're absolutely right about the using of p instead of h3 I just missed that. Won't happen again hopefully.
  • I haven't really got used to make my code aria-friendly but sure from the next one i'll begin to. I'll do some research about the using of tabs and how to make the site flow right with it,
  • Most of the comments apart from the width and p problems at heart is because of aria. I'll have to do a better job with it next time. I hope u could give me feedback on my next challenge to check wether I upgraded or not. Thanks again for the amazing feedback,

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  @MuhammadM1998 Glad that you found my review useful^

  Sure, I gave you a follow so that I could see whether you submitted a challenge. Looking forwards to it!!

  1