Reviewing different solutions for clickable cards

Example 1

This is a standard card, with multiple links inside. What are the possible issue with this card?

1. Multiple links with the same accessible name?

Laughing kookaburra

The laughing kookaburra is well known both as a symbol of Australia’s birdlife.

Kookaburra - Wikipedia

Example 2

The <a> element has been wrapped around the card. What are the possible issues?

1. Do you have to turn off default behaviours for the links?
2. Is the accessible name very verbose?
3. What if there are multiple interactive elements inside the card?

Kangaroo

Kangaroos possess powerful hind legs, a long, strong tail, and small front legs.

Example 3

The <a> element has been positioned over the card using CSS. What are the possible issues?

1. Can you select any of the text inside the card?
2. What if there are multiple interactive elements inside the card?

Emu

The emu is the second-tallest living bird after its ratite relative the ostrich.

Example 4

JavaScript has been used to create a click event on the card, taking the link from the <h2>. What are the possible issues?

1. What if there are multiple interactive elements inside the card?

Wombats

This large, stocky mammal is a marsupial, or pouched animal, found in Australia and on scattered islands nearby.

Features of the delegated-click JavaScript pattern

This JavaScript approach gives users the ability to click anywhere on the card, while still keeping the UI accessible and predictable. It includes several safeguards to make the pattern robust.

1. Uses the main link inside the <h2>

The card is not made focusable. Instead, clicking the card triggers the real link inside the heading. This avoids creating multiple interactive elements with the same accessible name.

2. Allows normal behaviour for interactive children

If the user clicks a link, button or form control inside the card, the script does nothing and allows that element to behave normally.

3. Prevents accidental navigation during text selection

If the user is selecting text (for example, dragging a mouse or long-press selecting on mobile), the script detects this and prevents navigation.

4. Works for mouse, touch and stylus users

Pointer events anywhere on the card (except on interactive children or during text selection) activate the main link.

5. Keeps keyboard behaviour native

Keyboard users tab directly to the real link in the heading. The card itself is not turned into an extra focusable element, avoiding duplicate focus stops or confusing semantics.

6. Degrades safely if JavaScript is not available

If JavaScript fails or is disabled, the internal link still works normally. The card never becomes unusable.

7. Strictly limited to “single-primary-link” cards

The pattern is intentionally restricted to cards with one main link and optional text or images. It teaches developers that cards with multiple actions should not be made fully clickable.

Testing home