Mobile First Responsive Landing Page using HTML, SASS, JS, and Gulp

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, really nice work on this one. Layout in desktop looks really great, it is responsive and the mobile state looks really great as well.

  Some suggestions would be:

  • Website-logo img should be using the website's name as the alt like alt="sunnyside". 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.
  • Since you are making the website-log interactive by putting cursor: pointer to it on desktop, why not just make it an a tag so that it will be lot clearer what it does.
  • Those section tags should be inside the main and not sitting on their own row.
  • Using a tag rather than button on the learn more will suit more since on a real site, that would be another page for the user to "learn more" about a section.
  • Use only the person's name for the person's image as the alt, you can lose the profile.
  • Text after the person's name should not be a heading tag since it doesn't really add any information on what the section is all about. The person's name is the suited heading on this one. Though personally, if I were to do this, on my markup, it will be reverse, the heading is first and last is the testimonial text because if I focus on the heading right now via screen-reader, when I go to the next text I will assume that it is the testimonial but since the heading is last on the markup, I would traverse to the next testimonial card.

  image
  text
  heading # in here, after this, the next testimonial
  

  On my approach:

  image
  heading # after going to next line, I will know the testimonial content right away
  text
  

  FOOTER

  • Same goes for the website-logo, use proper alt and make it use a tag.
  • Social media links could be inside ul since those are "list" of links.
  • Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.
  • The social-media-image is just a decorative image so better hiding it, the a tag's label is enough to describe it.

  MOBILE

  • Hamburger menu should be using a button element since it is a control. Again, interactive components uses interactive elements. By using div you are making it not-accessible.

  SUPPOSING BUTTON IS USED

  • The button will be using the method I mentioned using aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="navigational dropdown menu".
  • The button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button.
  • The placement of the toggle and the dropdown is incorrect. The toggle should be placed "before" the dropdown in the markup, so that the focus will be next to the dropdown if the button has been toggled. Swap them up.

  Aside from those, great job again on this one.

  Marked as helpful

  2

  ---

  

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  @pikamart Thank you Raymart for always giving detailed feedback!

  1