Responsive nft preview card using cube css

Community feedback

• 

  T

  Josh•400

  @burrijwPosted over 1 year ago

  This looks really good. ✨ Just a few things mostly related to your HTML that could use some improvement.

  • You need a <main> element to wrap your main content. This helps with accessibility and ensures that all content is properly structured.
  • The image at the start of the show should have an appropriate alt text. "Equilibrium" isn't very descriptive and doesn't give any information about the image. Make sure you use concise but descriptive text to describe the image.
  • The "view" icon is interactive, so it needs to be a <button> or <a> element in order to have hover styles. Since it likely opens a larger version of the image in a modal, a <button> would be the best choice here. Additionally, it should be focusable by keyboard as well as clickable with a mouse, so that all users can access the interaction.
  • To make the icons accessible, you can try hiding them from screen readers. This can be done by setting the content to an empty string and using background-image to set the image. Alternatively, you can use the images inline and leave the alt attribute blank. WAI has a great tutorial on accessible images that you can check out here: https://www.w3.org/WAI/tutorials/images/.
  • You may also want to look into how you can better describe the ETH price of the NFT to someone using a screen reader. Could some visually-hidden text around it help clarify what it is? Maybe aria-description?

  Keep up the good work!

  Marked as helpful

  1

  ---

  

  Hanane Boukhalfa•40

  @Hanane05Posted over 1 year ago

  @burrijw Hello Josh! Thank you so much for your remarks, I'm new to most of them. I really appreciate your help. I'll do my best to correct my mistakes even though I don't really understand the last two points but I'll try. Thank you again, and I'm seeking to receive your feedbacks in the future :)

  0