Clipboard landing page challenge hub

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, there is just a horizontal scrollbar, I am using 1366x768 screen resolution btw. The site is not responsive at the moment and there is no mobile state.

  Some suggestions would be :

  • Always have a main element to wrap the main content of your site. On this one, the .template should use main instead of div.
  • Instead of using width: 1440px on the .template use max-width: 1440px, by using the latter, this will make the element more responsive as it will not have a fixed width which causes that horizontals scrollbar that I mentioned.
  • Since you aren't using the top-part image as background-image add an width: 100% on the img tag. Also use alt="" and add aria-hidden="true" attribute on it. If an image is just a decoration, hide them at all times by using that method, only use meaningful alt if the image adds content to the site.
  • Website-logo should use alt="clipboard" on the img. A website logo should always use the website's name as the alt value.
  • Also, when using alt, avoid using words that relates to "graphic" such as "logo", img is an image so no need to describe it as one.
  • All download for ios and download for mac should be using button element. An interactive component needs to use interactive element.
  • Avoid using multiple h1 on a page. Use only 1 h1 per page.
  • Other images if only decoration, add aria-hidden="true" to make it invisible for all users.
  • Each of the company icons should be using their name as the alt value like alt="google".
  • Your .footer should be using the footer element.

  ON THE SUPPOSED FOOTER

  • Website-logo should use the website-name as the alt value.
  • Those 5 links could be wrapped inside nav element since it looks like it is your website's navigational inks.
  • Use a tag for each of those links. When tackling challenges or creating site in general, always try to think if a component is a link, a control or just an interactive element, because like that, a typical footer contains link, so why not make those link right, those questions or thoughts.
  • Each social media should be inside a a tag since those are links as well.
  • Each a tag that wraps the social media should have aria-label attribute or an screen-reader text inside the a tag. The value will be the name of the social media like:

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

  This way users will know where this link would take them. You typically do this if there are no text-content inside the element where an assistive tech can read.

  Aside from those, great work again on this one.

  Marked as helpful

  1
• 

  Ahmed Eid•380

  @ahmeDeid67Posted about 3 years ago

  Very very thank you, For all these tips. I will put it in my mind Again thank you.

  0