Responsive mobile first sunnyside challenge

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

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

  Some suggestions would be:

  • The header should be containing the nav inside it.
  • Website-logo img should be using the website's name as the alt like alt="sunnyside". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • Also, almost all images in here are just decorations. Decorative image must be hidden at all times for screen-reader users by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • arrow-icon is just decoration hide it using the method above.
  • Person's img should be using the person's name as the alt like alt="Emily R". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • 4 images before the footer are all just decoration so hide them.

  FOOTER

  • Same for the website-logo it should use the website name as the alt value.
  • List of links could be using nav since those are still your navigational links.
  • 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.
  • Each iamge inside the social media link should be hidden since they are only decoration so use the method mentioned above.

  Just those only. The mobile layout's code in the navbar is great. Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Xavier192•110

  @Xavier192Posted about 3 years ago

  @pikamart Hey, Thank you for your feedback, I'll solve the acessibility issues and hopefully learn from them.

  1