Clipboard landing page

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 state looks great as well.

  Some suggestions would be:

  • Website-logo should be using alt="clipboard" so that it will be clearer, lose the word "logo" in it and avoid adding those words in the alt since img is already an image.
  • Adjust as well the :focus-visible state for the button tags since the default outline styling is not enough and it is hard to see where I am navigating at right now on the site.
  • Also, there are lots of usage of extra html element on the markup. Avoid nesting too much element so that it will be easy to handle and lookup the markup.
  • Images like for the computer could use a more descriptive alt , maybe like alt="clipboard app on a computer". Again, remove all words that relates to "graphic".
  • The 3 icons below before the company logos should be hidden. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • You could use ul on the company logos since those are "list" of companies.

  FOOTER

  • Website-logo should be inside a img tag. Interactive components uses interactive elements. By using div you are making it not-accessible, especially that you are using cursor: pointer to it, meaning it should be interactive hence the img should be inside a a tag.
  • The 5 links could be inside a nav element since those are still your website's navigation links.
  • Also you can use ul on the links since those are "list" of 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 svg inside the social media link should be hidden since they are only decoration so use aria-hidden="true" attribute on them.

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  Kasia Zaleska•200

  @kzaleskaaPosted about 3 years ago

  @pikamart thank you for your every suggestion - it is very helpful. I will apply it in my project. 🤗

  2