Huddle Landing Page with SASS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Though I had to zoom out since you are using 1440px as the desktop breakpoint which is larger on a traditional 1366x768 resolution that lots of user uses, the 1440px on the design doesn't mean it is the breakpoint, lowering it down would be really great. The mobile layout however looks great.

  Some suggestions would be:

  • When using section tag, it always expect to have a heading tag inside it, maybe changing some section in here that doesn't have a heading tag into a div so that errors won't fire.
  • The hero-image could use an aria-hidden="true" so that it is totally hidden for screen-reader users or just in general, adding aria-hidden="true" to decorative images.
  • If you remove the outline property of an element, make sure to add another custom visual indicator on the element's :focus-visible state. Try using tab on your keyboard to navigate the site, you will have a hard time since there is no indication on where you at.
  • 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.

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  John Phillips•350

  @john-k-phillipsPosted about 3 years ago

  @pikamart Thank you for taking the time to type these notes out, this is great not only for this project but future projects... I feel like my "accessibility" is a little lacking and perhaps needs a revisit.

  I'll be sure to reference this whenever I work on a new project!

  Thank you pikamart <3

  1