Clipboard Page ussing Flexblox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The layout in desktop is very good, however the responsiveness could be a lot better, there are sections which are being hidden, contents being squeezed and some overlapping one another. On mobile state however, it looks good.

  Some suggestions would be:

  • The alt text for the website logo in the header could have used only alt="clipboard". Avoid adding words that relates to "graphic" like "image, picture, icon, logo", assistive tech will handle those for you.
  • The alt text for the different company should use their names as the alt value, like alt="google" on the google img.
  • On the footer you are missing the background-color like on the original, adding that would be really great so that there will be some sort of color divider and not just all pure white.
  • footer website logo could use as well alt="clipboard".
  • The links in the footer section are missing their visual indicator in the :focus-visible state. Either having a outline border or box-shadow would be really great.
  • The links as well in the footer could be wrapped inside a ul element, so that screen reader users will know how many links there, since screen reader will announce how many items are there inside a list.
  • The social media links should be wrapped inside a tag since those are links, better using a tag. They could also be wrapped inside a ul element. Adding as well the aria-label for each a tag that will wrap them. An aria-label is a piece of text that screen reader will say if they encounter that element. Since there are no text in the social media link right, a screen reader can't say anything, but when an aria-label is associated on them, they will say that text. Example, the a tag that will wrap the facebook icon would have:

  <a aria-label="facebook">
    icon of the facebook
  </a>
  

  This will make your website more accessible.

  • Lastly, try to solve the responsive issue that has been state above. Always inspect you layout in dev tools, change the screen size, test if the elements are correct and in proper place.

  Aside from those, this is really great. The structuring is fine, just for those links right.

  Marked as helpful

  1

  ---

  

  Marialba Córdova•60

  @Marialba16Posted about 3 years ago

  @pikamart Totally grateful for your comment, the truth will help me a lot and I hope it will help me improve. I will consider your advice. Thanks for reviewing it and I'll be improving it.

  Thank you Raymart.

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 3 years ago

  The narration by @Raymart Pamplona is awesome , use dev tools and check your site between 451px and 800px . So far so good, just one more push.

  Marked as helpful

  0

  ---

  

  Marialba Córdova•60

  @Marialba16Posted about 3 years ago

  @ChamuMutezva Totally agree Chamu!. Sure, thank you very much also for your comment.

  0