Sunnyside Landing Page using Flexbox

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. Layout in desktop looks really good, it responds well and the mobile layout is really good as well. This is a nice website.

  Some suggestions would be:

  • Lose the word "logo" on the img alt of the website logo, since it is already an image, no need to describe it as one, alt="sunnyside" would suffice.
  • On the learn more link, if you hover on the element of it in dev tools, you will notice that it doesn't have any height this is because you made the span inside position: absolute which makes it out of the flow. I suggest not using the span and just let the text inside that span be used by the a tag directly. That way, it will have dimension and have the outline it needed, since it is an interactive element.
  • When using blockquote make sure to add the name of the person inside it, so that it will be read out as well by assistive tech. Making the name of the person as well a heading tag would be good.
  • If you use a section that doesn't have any text embedded inside it, make sure to have atleast a screen-reader only text for that section, the text will be a heading tag, that has sr-only class. You could look up for some sr-only and use it.

  FOOTER

  • Like the above, lose the word logo on the website-image.
  • The social media links could have been wrapped inside a ul element, since those are "list" of social-media links.
  • Each a tag that wraps the social media icon should have text inside it so that there will be an extra information that the user will have. It could be a sr-only text inside the a tag, or use aria-label attribute on the a tag, to which the value of both approach will use the name of the social media that they are nesting.

  MOBILE

  • The hamburger menu should have used button element and not a checkbox. The button will have an aria-label="navigation menu dropdown" or other text, so that users will know what this button will do, and the button should be using aria-expanded attribute on it as well.
  • Also, when making a dropdown, make sure that the element or the dropdown is properly hidden to all. Using transform: scale(0) does not really hide it totally, visually it is hidden but it will be still pick up by assistive tech. Instead, use visibility: hidden on it as default, then just transition to visible when the user toggles the hamburger.

  Aside from those, really great work on this one.

  01

  Marked as helpful