Product cards are complex elements that are used in almost every page of an eCommerce website. They are used in pages like: home page , listing pages, search result page, category listing page. They also appear in carousels components: recommended products, recently viewed, frequently bought with.
They can contain multiple interactive elements, for example: product image, product name, brand name, ratings, colour picker and add to cart button.
These interactive elements most likely will have different behaviours for each of the states: hover, focusand blur. For example: when using the colour picker buttons, when should the image and product name link be changed? on hover or click?.
The desired interaction for each interactive element must be defined and documented in early stages of the program to reduce the confusion created later for developers y testers.
During a11yTO Conf 2020 Rian Rietveld gave a great presentation on Product Card interactions. Please refer to my a11yTO 2020 notes on her talk and to her playground Cards example code.
Default cards
In this example I have made every element in the card clikable. Image the impact this will have when trying to navigate with your keyboard in a Search Result Page.
Users will have to use TAB or SHIFT TAB at least 7 or 8 times before they are able to add elements in the card.
Instructions: Use your keyboard & mouse to activate the product card interactive elements.
Less clickable elements
One possible optimization for keyboard and screen readers users could be to remove or hide clickable elements using tabindex="-1" and aria-hidden="true" on interactive elements in the component.
In the following cards the product image, brand name, reviews have been modified. Only the colour pickers, product name and add to cart buttons awere left as per default behaviour.
All the elements remain clickable using mouse, but now the elements are not actionable using Keyboard or Screen Reader.
In this card the product name link has a <span> element that covers the complete card, making the card inner elements not selectable when using keyboard, and for mouse users the entire card is clickable.
One impact of this solution is that no longer the colour pickers or the add to card are clickable elements.