Clipboard landing page Solution

Community feedback

• 

  P

  Jairo Valderrama•420

  @jairovgPosted over 1 year ago

  Hi @chabandou, congrats on your solution; here are some comments that might help you to improve it:

  Accessibility and semantics

  • This is your heading map:

  Frontend Mentor | Clipboard landing page
  
  1 A history of everything you copy
  2 Keep track of your snippets
  3 Quick Search
  3 iCloud Sync
  3 Complete History
  2 Access Clipboard anywhere
  2 Supercharge your workflow
  3 Create blacklists
  3 Plain text snippets
  3 Sneak preview
  2 Clipboard for iOS and Mac OS
  

  This heading map is correct, but there is an axe-core ruleset that can be improved. It's related to the document title, in this case, the best practice that may be applied is Put all unique information first. ...company’s name or brand ... should go after the unique content.. So the suggested document title should be Clipboard landing page | Frontend Mentor

  • The footer links should be created using a navigation landmark. Here is a sample you can check.
  • The social icons should be treated as links.
  • You're not allowing to change the font size to small devices (less than 375px) as you've set a fixed base size of 14px.
  • Even if you're setting an alt text to content images, try to add a real description of them as it's the text that the assistive technology will read out loud.
  • Probably you may enhance the button text for assistive technology also, something like Download Clipboard for iOS.

  Styles

  • Consider adding a cursor pointer for the buttons when the user hovers his/her mouse.

  I hope you find it useful. I'm happy to take another look at your solution if you make some other changes.

  Marked as helpful

  1

  ---

  

  chabandou•70

  @chabandouPosted over 1 year ago

  @jairovg Thank you for your feedback! I'll try to fix those remarks

  0

  

  chabandou•70

  @chabandouPosted over 1 year ago

  @jairovg

  Hey, I've tried to fix the issues you mentioned, but I'm not sure how to fix allowing the font to change on small devices. Is it because I have set html font size in px in the media query?

  0

  

  P

  Jairo Valderrama•420

  @jairovgPosted over 1 year ago

  Hey @chabandou, that's right; setting the html element (base font size) to a fixed value overrides the browser setup, so you should handle its value using % or em.

  I suggest setting your base font size once and then modifying its different versions in the rest of the elements using rem units.

  By the way, I think I messed up the original comment before publishing it; sorry about that, so I updated it with the rest of the items.

  Marked as helpful

  1

  

  P

  Jairo Valderrama•420

  @jairovgPosted over 1 year ago

  It's the system, I guess. It's removing the rest of my comment.

  1