clipboard landing page using HTML CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

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

  Some suggestions would be:

  • Do not include the header inside the main element as this renders the header not visible as a landmark. Primary landmark elements needs to sit on their own markup row:

  <header />
  <main />
  <footer />
  

  • Website-logo should only be using alt="clipboard" lose the word logo. Avoid adding words that relates to "graphic" when using alt values like those ones.
  • The 3 icons after the tablet image should be hidden using alt="" and add an extra aria-hidden="true" attribute on the img. Decorative images needs to be hidden at all times by using the method.
  • Each company logo should only use their names as the img's alt value.
  • Also, when using section it always expect to have a heading tag inside it.

  FOOTER

  • Website-logo needs to only use alt="clipboard".
  • Those 5 links could be inside a ul element, since those are "list" of links. Also, use display: grid on those so that you could put each li element in their own row. Do not make separate container for them because all 5 links are related and need to be grouped as one.
  • Social media links could used ul since they are also "list" of links.
  • Each social media should have an a tag that wraps them since they are supposed links.
  • Each a tag that wraps the social media should either use an aria-label attribute or an sr-only element inside the a tag. The value for method you will use should be the name of the social media, example would be like:

  <a href="facebook.com" aria-label="facebook" >
    svg in here
  </a>
  

  This way, users will know where this link would take them. You typically use this kind of method if there are no text-content inside the element, by using the method, you are providing a text that assistive technologies can read for users.

  • The svg for the social media should be hidden since they are only decorative images. Use aria-hidden="true" attribute on the svg element.

  Aside from those , really great work on this one.

  Marked as helpful

  0

  ---

  

  Musa•170

  @its-me-musaPosted about 3 years ago

  @pikamart thank you. this is very helpful. much appreciated

  0