Block Links: The Search for a Perfect Solution

Chris recently highlighted the accessibility and UX drawbacks of "block links"—wrapping entire card elements within anchor tags. This article revisits the challenge, exploring whether the problem lies in the pattern itself or its implementation. We'll aim to create a card component that addresses these issues. Throughout, "card" refers to a component employing the block link pattern.

Our ideal Card Component should meet these criteria:

1. Fully clickable and linked.
2. Accommodate multiple internal links.
3. Maintain semantic HTML for assistive technology compatibility.
4. Allow text selection, like standard links.
5. Support right-clicks and keyboard shortcuts.
6. Ensure proper tab order for focusable elements.

This presents a significant challenge, as browsers lack a standard card widget. Let's examine several approaches:

Method 1: The Simple (but Flawed) <a></a> Wrap

The simplest approach—wrapping the entire card in an <a></a> tag—is also the least effective. While achieving basic clickability and right-click/keyboard shortcut functionality, it fails on several fronts:

1. Prevents nested links within the card.
2. Compromises accessibility; screen readers may announce the entire card's content indiscriminately.
3. Disables text selection.

This method is clearly inadequate.

Method 2: Linking Only Necessary Elements

This approach prioritizes accessibility by linking only individual elements needing links. This successfully addresses:

1. Multiple internal links.
2. Semantic HTML.
3. Text selection.
4. Right-click/keyboard shortcuts.
5. Tab order.

However, it lacks the crucial feature of full card clickability.

Method 3: The ::before Pseudo-element Approach

Using a ::before or ::after pseudo-element positioned absolutely over the card provides a clickable area. However, this method still suffers from:

1. Limitations on nested links; the pseudo-element layer obstructs clicks on underlying links.
2. Text selection remains problematic.

A more robust solution is needed.

Method 4: JavaScript Enhancement of Method 2

Building upon Method 2, we can leverage JavaScript for progressive enhancement. We'll add a click event listener to the card and programmatically trigger the main link's click event. To prevent interference with text selection, we'll use window.getSelection().toString() to check if text is selected before triggering the link click:

const card = document.querySelector(".card");
const mainLink = document.querySelector('.main-link');

card.addEventListener("click", handleClick);

function handleClick(event) {
  const isTextSelected = window.getSelection().toString();
  if (!isTextSelected) {
    mainLink.click();
  }
}

// Prevent event propagation on clickable elements within the card
const clickableElements = Array.from(card.querySelectorAll("a"));
clickableElements.forEach((ele) =>
  ele.addEventListener("click", (e) => e.stopPropagation())
);

This approach successfully meets all our requirements. However, potential double-event triggering on internal links and buttons may require further refinement.

This solution provides a functional and accessible clickable card component. Further considerations, such as handling cards with "Read More" links or images, require additional exploration.

For further reading:

• Cards by Heydon Pickering
• Block Links, Cards, Clickable Regions, Rows, Etc. by Adrian Roselli
• Block Links Are a Pain (and Maybe Just a Bad Idea) by Chris Coyier
• Pitfalls of Card UIs by Dave Rupert

The above is the detailed content of Block Links: The Search for a Perfect Solution. For more information, please follow other related articles on the PHP Chinese website!