Built using React with Vite & Styled using TailwindCSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

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

  This is a good site tbh.

  Some suggestions would be:

  • Website-logo-link should have either aria-label attribute or a screen-reader only element inside it, describing where the link would take them, since you are using href="/" the value could be homepage.
  • Website-logo svg should be using a screen-reader only title element inside it, the text-content will be the name of the website, sunnyside.
  • Arrow-icon svg should be hidden since it is just a decorative image so use aria-hidden="true" attribute on it.
  • The person's position should be inside a p tag or wrap the small with p tag since it is a text-content.
  • The last 4 images at the very bottom could be hidden since it is only a decorative image and there are no text-content giving information about it so using alt="" with aria-hidden="true" attribute on it would be really great.

  FOOTER

  • Same goes for the website-logo-link and website-logo, use the method I mentioned at the beginning.
  • The 3 link after the logo could be inside a nav since it is still your website's navigational link.
  • Those social media icons could have used ul element since those are "list" of links.
  • Each a tag that wrap the social media icon should be using the same method as well with the website-logo. You do this method if there are no text-content inside the element where assistive tech could read to give meaning about what the element contains.
  • Each svg of the social media should be hidden since they are only decorative so use aria-hidden="true" on it.
  • The .attribution would be great to be inside footer or aside so that it is inside a landmark element as well.

  MOBILE

  • Hamburger toggle should also use the same method with using either aria-label attribute or screen-reader only element inside it, since the button have no text-content inside.
  • svg inside the button should be hidden as well aria-hidden="true".
  • The button needs to have an aria-expanded="false" as a default attribute, it will be set to "true" if the users toggles the button and vice-versa.
  • The placement of the hamburger toggle and the dropdown is incorrect, you must always place first the toggle before the dropdown so that the focus of element , the dropdown is next to the button and not the other way around.

  Again, this is really a great site and it feels great. Just those and still really great job on this one.

  Marked as helpful

  2

  ---

  

  Imad Atyat-Allah•285

  @imadatyatalahPosted about 3 years ago

  @pikamart Thank you!

  0