可点击卡片模式与反模式

Source: Dev.to

嵌套交互元素的问题

• HTML 规范 – 超链接（带 href 的 <a>）属于交互内容。根据 HTML Living Standard，交互元素不得包含其他交互或可聚焦元素作为后代，这就禁止在超链接内部放置 <button>、<input> 或另一个 <a> 等元素。
• 辅助技术问题 – 屏幕阅读器和键盘导航会遇到两个具有重叠点击区域的链接。Tab 键的切换行为变得不可预测，且屏幕阅读器朗读的链接名称会变成卡片的全部内容。

作者: Jamil.

推荐做法：拉伸链接模式（Stretched Link Pattern）

目标是让主要链接（例如卡片标题）与次要交互元素分离，同时使用 CSS 将主要链接的点击区域扩展到整个卡片。内部链接或按钮放置在拉伸链接之上，从而保留它们自己的交互优先级。

HTML 结构

<div class="card">
  <a href="/article/123" class="card__main-link">
    <h3>Article Title</h3>
  </a>

  <img src="thumbnail.jpg" alt="Article Thumbnail">

  <p>Author: <a href="/authors/jamil">Jamil</a>.</p>
</div>

关键 CSS 属性

CSS 实现

/* 1. 父元素的上下文 */
.card {
  position: relative;
  /* 其他样式（边框、内边距等） */
}

/* 2. 拉伸的点击区域 */
.card__main-link::after {
  content: '';
  position: absolute;
  inset: 0;               /* top: 0; right: 0; bottom: 0; left: 0; */
  z-index: 1;            /* 小于内部交互元素的层级 */
  pointer-events: auto;  /* 确保该区域可点击 */
}

/* 3. 内部交互元素的优先级 */
.card p a,
.card button {
  position: relative;
  z-index: 2;            /* 位于拉伸点击区域之上 */
}

使用 拉伸链接模式 可以解决设计意图（让卡片整体可点击）与技术合规性（避免嵌套交互元素）之间的冲突。通过保持正确的 HTML 语义并管理堆叠上下文，开发者和设计师能够创建健壮、完全可访问的组件，提供可预测的用户体验。

图片来源: gabby‑k