CSS, HTML, Javascript

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. The desktop layout looks fine on my end, it just have a small white-space on the top part making the image not occupy the full height. For responsiveness, currently when you go into like 1005px upper, you will notice that the image is now overlapping the text on its left side. For mobile state, it looks great but I think 0px-1000px for the whole mobile state to occupy is too big.

  Some other suggestion would be:

  • It would be great to have a base styling of this:

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit
  }
  

  This way, handling an element specially its size will be easier because of the box-sizing

  • Change the div that holds the website's logo to use header, this way it will be its own landmark.
  • When using img tag, do not forget to add the alt attribute, whether the value is empty or not. Because by not including it, screen-reader will instead read the source path of the image which you don't want. So always include it.
  • Also, just to make sure that you use proper alt. On the website logo or in any site that you make, a website logo's alt should be the website's name. On this one, it should be using alt="Base Apparel".
  • Don't change the main tag display to unset. unset value removes or revert right? But for this, you don't really need to change the display just let it use its default value and also, you are using it as well on the margin width and height of the main as welll.
  • Your 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.
  • A label tag doesn't need to use a name attribute. name is used on input tags so that there will be groupings if it is a radio button or make it easier to extract values on input tags.
  • The error-message should not be using the aria-live on this one. The aria-live element could just be an independent element like a p tag. Then you use this element to announce something, maybe on what is the status of the form submitted by the user.
  • Your submit-button should have either aria-label attribute or sr-only text inside it which defines what the button does. It could be like aria-label="submit form".
  • Also, remember that when a button is placed inside a form element, it defaults to type="submit". So imagine if you have a close-button inside the form without specifying type="button" clicking the close-button will submit the form. Be aware of this kind of scenarios. For this, use type="submit" on the button so that it will be clear.
  • The img inside the button is only decorative. 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.
  • For a proper linking of error-messages to their respective input fields, you can look at this pseudocode on how it should be:

  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. Have a look at this simple accessible form snippet that I have If you have any question about this one, just let me know okay^^.

  • Lastly, maybe adjusting breakpoint and dealing with the issue that I mentioned at the beginning about the hero-image overlapping the hero-text.

  Aside from those, great job again on this one.

  Marked as helpful

  1