1

Lately I've been seeing a lot of product cards without buttons. The idea is that the whole card is the button. Generally it looks card-like and clickable (has a drop shadow on the whole card). I have a few a11y questions.

  1. Is this user-friendly for sighted users?
  2. What are the potential a11y issues for screen reader users?
  3. What are the rules about links within a clickable space? (I seem to see it a lot, but I've heard it breaks some rules)

Obviously I recognize the pitfalls of not having a button, but it seems intuitive to me for a whole space to be clickable. When in doubt, click on it, right?! When my mouse hovers and changes, I know to click it. Maybe not everyone does. I'm wondering just how bad it is to remove buttons, or if there are issues I'm not thinking of.

I'm mostly referring to desktop, since product cards are so common on handheld. But I welcome any insights about handheld as well, especially the question about links. Product Card Examples

  • There is the concept of a card as a design pattern, and the concept of a card as a component. It seems like a lot of people use the card design pattern but implement it as a container-like component, whereas they should be sticking to the design pattern as it is originally intended. For references on this component you can look at this previous question: ux.stackexchange.com/questions/78798/… – Michael Lai Aug 1 '18 at 6:43
1

Since you're selling something. I would say a call to action (a click) would be better.

Otherwise you might potentially lose customers who're not "tech-savvy" or haven't learned that this is how many webpages work.

0

What are the rules about links within a clickable space?

It's invalid html to have an <a> nested in an <a> but there's nothing preventing you from having a click/keyboard event handler on a <div> that has a nested <a>, but it wouldn't be necessary. You can have your card with the button and the link but still have the entire card clickable.

(I'm not sure if you have both a button and a link in your sample. The "or Pay Monthly..." feels like a link to me because blue has traditionally been a link color, even if it's not underlined.)

The user will probably try to click on the link or the button because that's where the affordance is (even if the card has a shadow) but in reality, if your handler is on the card, it won't matter if they slightly miss, or click the star, or click the kitty.

From a keyboard perspective, if you keep the link and the button, they should still be keyboard focusable. I should be able to tab to them and press enter or space to select them (which, again, would send the event to your card).

So I think you can have both worlds - a clickable card and a button.

From a screen reader perspective, if you allow tabbing to the link and the button, they will still need to have their proper roles. If using a native <a> and <button>, you're ok. But if you have a non-semantic element such as a <div> or <span> that is styled to look like a link or button, you will need role="link" or role="button" on those elements.

  • That all makes sense to me. I like the idea of the card being a div that is clickable; you're right that the "pay monthly" is a link. The links, buttons, and card div itself would all be focusable. – Laurel Aug 1 '18 at 17:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.