base apparel coming

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. I think the hero image looks fine though. Desktop layout is great but responsiveness is missing on this one. If you try to inspect the layout and change the screen-width, you will notice that the site is not really responding well and the content is being hidden thus creating horizontal scrollbar. Mobile state looks fine but your breakpoint of 360px is too little, other smartphones have higher width on that.

  Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .main should be using the main instead of div.
  • 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, I would use header on this one to wrap the logo to be honest:

  <header />
  <main />
  

  • The we're coming soon could be just wrapped in a single h1 and for it make the text wrapped on another row, you could just use max-width on it and adjust until you get the desired look.
  • Wrap the input and the button inside a form so that the markup will be clearer.
  • Your input tag lacks an associated label tag on it. Since there are visible-label, the label would be a screen-reader only label, meaning it would make user of like sr-only class. The text-content should describe what the input needs like the value on the placeholder.
  • Use button on the submit. Remember that interactive components needs to use interactive elements, by using div on that, the toggle is only limited for mouse and you can't use keyboard or other peripherals to toggle it.
  • Right now, the error-message is being show only visually and not really connected to the input a proper way of doing it, looks like this pseudocode:

  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

  • Another idea to implement to further improve accessibility is to have an aria-live element that will announce if the form submission is a success or not.
  • Also, if you are having trouble about my suggestion about the form, have a look at this simple accessible form snippet that I have if you have queries about this, just let me know okay.
  • For other images that are using alt="" add an extra aria-hidden="true" on the img so that it will be completely hidden for all screen-reader users.
  • Lastly, making the site more responsive and adjusting the mobile breakpoint.

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  Jimmy Hoang•570

  @JimmyHoang296Posted about 3 years ago

  OMG... I have never think this would get detail advice like this. Thank you so much.

  1