Profile Card Component

Community feedback

• 

  Ken•4,915

  @kens-visuals

  Posted over 3 years ago

  Hey @MakMao 👋🏻

  I have some suggestions to help you fix the accessibility issues and some other things.

  • In your markup, <div class="card">...</div> should be <main class="card">...</main>and this will fix the accessibility issues. Only don't forget to generate a new repot once you fix the issues.
  • For the background pattern image, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here. Like so:

  <img src="images/bg-pattern-card.svg" alt="">
  

  • And for the profile picture, alt tag should have the name of the person, such as: <img class="avatar" src="images/image-victor.jpg" alt="Victor Crest">

  I hope this was helpful 👨🏻‍💻 other than that, you did an excellent job, well done. Cheers 👾

  10

  Marked as helpful
• 

  MakMao•180

  @MakMao

  Posted over 3 years ago

  Hi @Ken,

  Thank you for your feedback - I adjusted it all right away. I was not aware of the purpose of aria-hidden but now it's all clear to me:)

  00
• 

  Matia•20

  @Mahmoud-Atia-Abbass

  Posted over 3 years ago

  Great job,, to make it pixel perfect you need to make the Avatar "img" size match the design size.

  00