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:
- 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
- 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/