Hover as Interactive Element in Card Preview

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Katherin!

  🎉 Congratulations on finishing this challenge! It's also good to know that you're taking your time to write the README. Good job! 👍

  I have some feedback on this solution:

  • Accessibility
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
    • For this section, you can minimize the code and at the same improve the accessibility.

  <div class="container">
    <a href="#">
      <img class="card-img" src="images/image-equilibrium.jpg" alt="image of equilibrium">
    </a>
    <div class="overlay">
      <img src="images/icon-view.svg" alt="Eye Icon">
    </div>
  </div>
  

  • You can use pseudo-element to create the overlay and make the alternative text more useful for screen reader users. You can check my solution and read the README where I show my process on how to do it.
  • The clock and Ethereum icon are just decorative images. So, for any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images.
  • For a person image, in this case, you should use his/her name as the alternative text.
  • You should not put the word photo, image, picture, icon, graphic, and any other words that are relative to image. It's already using the img tag, so the screen reader will pronounce it as an image.
  • The Equilibrium #3429 has :hover effect, which means that it is an interactive element. It's commonly a link that will navigate the user to another page.
  • Visual
    • The clock and Ethereum icon are not positioned correctly.
    • The Creation of Jules Wyvern should be vertically in the middle.
    • Don't limit the height of your web page, by setting a height: 100vh;. You can see the issue if you see your website on the mobile landscape. Use min-height instead.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  1

  ---

  

  Katherin Meganis Phang•70

  @kmeganizPosted almost 3 years ago

  @vanzasetia Wow, very useful suggestions from you. Thank you for giving your time to go through my code and typing in your brain. Really appreciated. Love all of the comments from you. I will apply them now.

  0