Frontend Mentor - Huddle landing page with single introductory section

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Jerry!

  🎉 Well done on completing this challenge! I have some feedback on this solution:

  • Accessibility
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tabs) easily.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only, except the logo image. But, for the social media icon, it's okay to have alternative text.
    • For the logo image, you can use the company as your alternative text. alt="Huddle".
    • I would recommend swapping the section with div, since a section always needs a heading as a label (this also will remove the HTML issue).

  <div class="backg-image">
    <img
       src="./images/illustration-mockups.svg"
       alt=""
       aria-hidden="true"
    />
  </div>
  

  • I would recommend keeping the root (html) font size as it is (100%). Changing the root font size can cause serious issues in some cases and it's also an unnecessary thing to do. See what an accessibility expert (Grace Snow) has said about this.
  • Other
    • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. In my desktop view (1280px * 650px), the company logo get cut off. Use min-height instead.
    • I would highly recommend writing your stylesheet with mobile-first approach. It's a common approach to do this day and often leads you to write less CSS code.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  0

  ---

  

  Jerry Reis•190

  @Jerry-ReisPosted almost 3 years ago

  Hey @vanzasetia, thank you for your full feedback! I'm gonna fix that points about your observations. :)

  0