One of the most common accessibility mistakes in web design involves clickable cards and content groups.
When you wrap a card or group of content with a link, you physically contain multiple pieces of content within the link. This is inadvisable for two reasons:
- Nesting block content (images, headings, etc.) within inline elements (a link) is bad practice.
- Grouping more than one piece of announced content within a link creates poor accessibility.
When users with assistive technology focus on your link, the assistive technology will do one of two things: It'll try to announce all announceable items, or it'll simply read out the hyperlink with no additional context. Both outcomes are confusing and annoying to users. Additionally, your link will have no technical or semantic meaning because it contains too many different items.
The Approach
You can't wrap a group of content in a link, but you still need the entire group of content to be clickable, right? To accomplish this, we need to add a link to the heading of the content group and then extend its clickable area to fill the entire card.
This is done using an absolutely positioned pseudo-element.
The easiest way to implement clickable parent is with the ?clickable-parent recipe. Simply apply the recipe to the parent element that contains your link (like your card).
If you have more than one child link, your block will need special handling. It's possible to modify the recipe in these situations, but it's also often not advisable to use clickable parent when multiple links are present. If you need help with your situation, ask in the support community.