Huddle landing page with alternating feature blocks

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 5 years ago

  Thank you for your kind words Phut! I'm really happy you're enjoying the challenges. Great work on this first submission as well! 🙂👍

  Here are a few pointers after taking a look at your code:

  • With the phone and email icons, you didn't add text to the alt attribute. I would always recommend doing so. However, if the icons add no real value/context for screen reader users you could set aria-hidden="true" to their parent elements to make sure the screen reader skips over them. You could alternatively embed the SVG code directly in your HTML instead of using the img tag.
  • The alt attribute is also missing of for the header and footer logos. I'd recommend just adding ``alt="Huddle"` to each.
  • For your social icons, I'd recommend adding aria-label to the anchor tags to make them accessible, as they currently don't have any text inside. Here's a tweet I wrote about accessible icons for more info.

  Your page looks really good though and scales down well to mobile. Keep up the great work! 👍

  0

  ---

  

  Phut•455

  @phut-tranPosted over 5 years ago

  @mattstuddert Got it 👍 Thanks for your valuable advice, ~~I'll correct it soon~~. I fixed it.

  0