Clipboard Landing Page using HTML CSS (Grid & Flexbox, No JavaScript)

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. The desktop layout looks fine, it's just a bit taller and some white-spaces could be reduced as well. The site is responsive and the mobile state looks great.

  Here are some suggestions for the site:

  • Adding a max-width on the body or in a container that holds content. If you try to zoom out on your screen, the content stretches along with the resize. Adding that max-width will prevent that and makes sure that the content will be consistent for the user.
  • 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".
  • 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".
  • Also for the site-logo, if you use tab through it, you will notice that it creates extra outline for the img since it is using margin-bottom which pushes it from the container. Use that styling on the a tag instead.
  • On general, using section is not bad but you can just replaced it with just div if there is already an existing visible heading tag on that section ( not section tag ) since if you traverse the site using screen-reader with landmark, when the screen-reader traverses the section tag, it doesn't read out a label text that signifies it as a landmark, unless you are using like an aria-labelledby if you want the element given an importance to.
  • Change those repetitive h1 into just other heading tag. Using h1 inside a section, article is not bad as well but hey, we just want to stick out with the semantic markup :>
  • For the images, you can add the clipboard app on the description since each images has the clipboard logo inside it, for example, alt="clipboard app running on mac desktop".
  • Those 3 icons on the workflow section are all just decorative images. Decorative images are just images that doesn't contribute to the overall content of the site. They 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.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • Also, When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
  • Use only the company's name as the alt and remove the word logo.

  FOOTER

  • Same for the site-logo, use the suggested method above about the link and the alt value.
  • Those 5 links should all be nested inside a single ul tag since those are related links. The ul could be wrapped inside by a nav tag since those are still your navigational links.
  • 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.

  11

  Marked as helpful