Huddle landing page with a single introductory section

Community feedback

• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  This looks good. Nice job.

  Add an aria-label="Facebook link" or whatever the link is to the .socials a tags and it should clear the accessibility warnings.

  Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

  Hope this helps.

  Marked as helpful

  0

  ---

  

  Anna•110

  @jussi777Posted almost 3 years ago

  @brodiewebdt Thanks a lot for your feedback!

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, nice work on this one. The desktop layout I think looks nice, the site is responsive and the mobile state looks good.

  David Turner already gave a feedback on this one, just going to add some suggestions as well:

  • Avoid using height: 100vh on a large container like the body as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to. Also, just in general avoid using vh unit in the height so that it won't limit the element.
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo, illustration" and others, since img is already an image so no need to describe it as one.
  • On the hero-section's image, if you look at it, the image doesn't really give any information on what it is showing since it is just almost an empty vector, meaning it is just a decorative image. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.
  • Those social-media links should be living outside the main tag and should be inside the footer.
  • Change the social-media from using section into using ul since those are "list" of links. Also, section tag is not informative treated as a landmark unless it is labelled by aria-labelledby to which points to the id of the heading tag. You could use it also on a part or section of the layout where there is already a visible heading text.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.

  Aside from those, great job again on this one.

  0

  ---

  

  Anna•110

  @jussi777Posted almost 3 years ago

  @pikapikamart Thanks a lot for your feedback! It's very helpful

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  @jussi777 Glad that you found my review useful^^

  0