clipboard landing page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. A quick note though, the background-image is covering the whole page:>. Desktop layout looks great , the site is responsive and the mobile state looks great as well.

  Some suggestions would be:

  • Remove the background-size from the main tag so that the image won't be covering the whole page.
  • Change the section tag into just using div. section alone is not informative as a landmark unless it is labelled using aria-labelledby attribute.
  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="clipboard".
  • Other images alt could be improved. For example, on the computer-image, you could use something like alt="clipboard application on computer". Describing more the image.
  • article is not needed as well since you mainly want an article to contain contents that are to be distributed with different page of the site, hence it is independent content.
  • Those 3 icons after the tablet images are just 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.
  • When using img tag, you don't need to add words that relates to "graphic" such as "icon and others, since img is already an image so no need to describe it as one.
  • Use only the company's name as the company img tag alt value.

  FOOTER

  • Since you are treating the website-logo as a link. Website-logo-link a tag should have either aria-label attribute or sr-only text inside, that describes where the link would take the user. Usually, website-logo directs user to homepage so use homepage as the value like `aria-label="homepage".
  • Same with the company logo, use a more proper alt value.
  • Add a aria-label="footer" on the nav tag inside the footer so that it will be clear what nav the user is navigating.
  • 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.
  • Social-media image should be hidden since it is only a decorative image so use alt="" and aria-hidden="true".

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  Jimmy Hoang•750

  @JimmyHoang296Posted almost 3 years ago

  thank you so much. I will read more on aria-label to get that done perfectly on next project.

  1