Product Preview Card Component with Flexbox

Community feedback

• 

  fr4nbtt•100

  @fr4nbttPosted about 2 months ago

  The solution looks great, both on desktop and mobile.

  Here’s a little input from me:

  • ARIA Labels: Adding ARIA labels to interactive elements, such as buttons, can enhance accessibility.

  • ARIA Hidden: If the images are purely decorative, consider using aria-hidden="true" to prevent them from being announced by screen readers, ensuring a smoother experience for users relying on assistive technologies.

  • Headings Hierarchy: Placing an <h4> on top of an <h1> is not considered best practice. You may want to keep the <h1> as it is and change the <h4> for "Perfume" to a <p> to maintain a proper heading hierarchy.

  • Use of <button>: Instead of using a <div> for the button, consider using a <button> element for better semantics and accessibility. This enhances the experience for screen readers and improves keyboard navigation.

  Keep up the great work, and best of luck!

  0