Responsive Landing Page with Manual Email Validation Form using JS

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, great work on this one. Desktop layout looks great, it is responsive but when you transition to mobile at point 983px, the website-logo seems overlapping the hero-image but seeing on mobile view, it looks great.

  Hmm, I don't really know to be honest, but you can use :invalid selector for input element and adding required to the input. Though this would always fire when user gives focus on input even without typing anything.

  Some suggestions would be:

  • Don't add width: 100vw as this adds an extra horizontal scroll since this doesn't account the scrollbar's size.
  • The header itself should be using position: absolute and not the website-logo.
  • Website-logo img should be using the website's name as the alt like alt="base apparel". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "logo" and others. An img is already an image/graphic so no need to describe it as one.
  • Do not directly type the wordings as uppercase on the markup, if you do this, screen-reader will read the text letter-by-letter and not by the wordings. Use only the lowercase version to write in the markup and instead use text-transform: uppercase on it.
  • The form error only works right now visually and not being associated to the input properly. A pseudocode of a proper error-implementation looks 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.

  • Also, it would be great to have an aria-live element that will announce if the form submission is a success or not. Just an addition if you want to add more accessibility feature. If you confused on these suggestion of mine, you can have a look at this simple snippet of mine about accessible form. If you have any queries just let me know^^
  • error-icon is just decorative image. Decorative image must be hidden at all times for screen-reader users by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • button should have type="submit". Always be explicit on what your button should act when it is inside a form element.
  • When wrapping a text-content do not just use div to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.

  Aside from those, great job again on this one.

  00