Responsive one-section page with flex and sass

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, really nice work on this one. Desktop layout looks really great, the site is responsive and the mobile state looks great as well.

  Well, if you don't really need to change the svg's color by the fill stylings, then using the svg path as the src for img would be nice, on the other hand if you need to change an svg appearance/color, using inline svg would be really nice.

  Some other suggestion on the site would be:

  • It would be great to have this markup:

  <header /> # logo
  <main />
  <footer /> # social media 
  

  This way, all content of your page will be inside their own respective landmark element.

  • Use only huddle as the website-logo alt text. 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.
  • The hero-section image is only a decorative. 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.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • Those social-media links could be inside a ul element since those are "list" of links.
  • 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.

  Marked as helpful

  0

  ---

  

  Denis Dn•100

  @denisdindarPosted about 3 years ago

  @martpika Thanks a lot. Suggestions about markup and especially accessibility are very helpful. Appreciated.

  1