Clickable card with 'button' best practice for accessibility

Design help General
1

Hi all,

I’m implementing a design for a client. In the Figma file, they have a card with an image and a button inside of it, but they want the whole card to be clickable.

I’m aware that link blocks can’t have other links or buttons inside of them. Assuming I can’t change the client’s design, what’s the best practice for implementing this design, keeping accessibility in mind?

I’ve seen two options, but maybe there are more:

  1. Place an empty link block in the card with absolute position that covers the cards contents:
  • Make the card a div with relative position
  • Add a clickable button in the card, using the button element
  • Add an empty link block in the card
  • Position the link block absolute, and stretch it to cover the whole card’s contents
  1. Use a link block for the card, and make a ‘fake’ clickable button
  • Make the card a link block
  • Add a div in the card and style it like a button

Weighing the options:

  • The client thinks the first solution is fine, but it sounds a bit fishy to me.
  • Then again, this webflow tutorial on link blocks says placebo buttons aren’t good for accessibility.

Which of these two options is the better approach? Or is there a better way to implement this for accessibility?

Here is my site Read-Only: https://clickable-card-demo.webflow.io/

2

hi @Raz_Pulurian I can just give you my opinion. Firstly placing link inside link it is not possible as you have noticed and it have its reasons.

When you will make link from card wrapper (div) element, cursor will change to pointer when visitor hover over the card. It is a good enough indicator that card is clickable and button can play just visual part. You can also add shadow to card on hover or some another visual element to distinguish clickable card.

According to Web accessibility Guidelines you can apply to card screenreader rules so you can fulfil WCAG recommendations.