Given This Row Of Product Cards:
Should the whole card just link to the product, or would it be better to:
Link The Brand Name to mo...
For further actions, you may consider blocking this person and/or reporting abuse
The whole card should be clickable for the sake of UX, but ideally only the title (and maybe short description) should be linked. Then you may style the
a:after
with CSS to cover the entire card.This link has a nice explanation and several solutions: inclusive-components.design/cards/
I'll definitely look into making the whole card clickable, and thanks for the Inclusive Components link. Accessibility is definitely something I need to focus more on in my work.
I would honestly go for the whole card a button linking to the product page. This is kind of bias, but if I see something like that in a product page, I just click anywhere in the card to see more details not worrying if I clicked the title or the image, etc. If I need to see more details such as reviews, chances are it is already somewhere in the detail page. Amazon does the same thing too.
I'm interested in this too. What I've been doing a lot in the last year is adding an absolutely position overlay block link on top of the entire card and having hidden screen reader text inside of it that says it's a link for the thing. I'm not sure if it's the best approach though, so I'm excited to see what answers come up here.
Slightly different scenario, but on DEV the whole item on list views is clickable to the article and other links like author, etc. are clickable links to those places.
Could you please share the JS magic you used to achieve that?