Flexbox, sass, js,

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout both desktop and mobile is good and it is responsive as well.

  Suggestions would be:

  • On the body tag, your background declaration is wrong. You should use url("images/bg-intro-desktop.png") your images has Images that is why the background is not loading.
  • The blue component above the form is just a simple text and does not need to be an interactive element like a button div would be fine.
  • The images being used as the error-message-icon should have alt="" since it does not really add any content.
  • input elements inside the form lacks a label on it. label element are necessary when using input because this adds more info about what the input does. The label on this could be sr-only or instead, you could use aria-label on each input indicating what it does. For example on the first name:

  <input type="text" name="firstName" id="firstName" required aria-label="Enter Firstname!" placeholder="First Name"
  

  You need to add all the necessary attributes on the input like the id name, those are needed especially when using the form in javascript, it makes easier to target every input.

  • Addition to the input, when the user uses wrong input, add as well a aria-invalid="true" to the input element:

  if ( input is invalid ){
    input.setAttribute("aria-invalid", "true");
  } else {
    input.removeAttribute("aria-invalid");
  }
  

  • One great more addition to the input. Those error messages, add their own id attribute. This id will be used by the input element aria-describedBy attribute. This way, the user will know what error has the user had done, because the error message will be linked in the input. A pseudocode will be:

  if ( input is invalid ) {
    input.setAttribute("aria-describedBy", idOfTheErrorMessage);
  } else {
    input.removeAttribute("aria-describedBy");
  }
  

  This makes the whole component accessible.

  Other than those, great work.

  Marked as helpful

  0