huddle landing page with single introductory section html and scss

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hey there, Kim Song! 👋

  Just wanted to say—I think you've done a very nice job on this challenge! 👏 As far as the design goes, everything looks on point and responds well! 👍 The way the design looks on larger screens (with the box-shadow around it) is actually kind of cool, too! 😀

  Well, keep coding (and happy coding, too)! 😁

  1

  ---

  

  Kim Song•205

  @CaptKrakenPosted over 3 years ago

  @ApplePieGiraffe thanks! i think so, too haha

  1
• 

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  This looks great to me!

  Nice semantic html too.

  The only issues I see are:

  • alt text needs rewriting. You don't want to say 'image of' as these are already images. On the logo, it should just be saying the name of the product. Logos are usually wrapped in links too, so I tend to go for (on the anchor tag) aria-label="Huddle - Home" or similar
  • All interactive elements need visible focus states (and these should be more than just color)

  Good luck. Great job on this

  1

  ---

  

  Kim Song•205

  @CaptKrakenPosted over 3 years ago

  @grace-snow thanks for the suggestions! I just finished adding those things. not sure if i did it right tho lol check it out: https://captkraken.github.io/huddle-landing-page-with-single-introductory-section/

  0

  

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  @CaptKraken nearly. The aria-label="Huddle - Home" goes on the anchor tag not the image. The image gets empty alt text like alt="" so screenreaders know its been left intentionally blank and can be ignored

  As apple voiceover has a bug where it still reads out svg images even when their alt attribute is empty, it's probably worth adding aria-hidden="true" to that logo image as well.

  1

  

  Kim Song•205

  @CaptKrakenPosted over 3 years ago

  @grace-snow done. thank you so much. 🙏

  0