绝对锚标签与具有绝对跨度的锚标签

Question

我见过两种将 link 拉伸到 card/container/div/whatever 上以使整个内容可点击的方法。

第一个选项将 <a> 标记定位为绝对元素。

第二个选项保持 <a> 不变，并在其中放置一个绝对 span 标签 - 导致 a 扩展并填充容器。

其中一个优于另一个有实际原因吗？

.card {
  height: 100px;
  background: green;
  position: relative;
  margin-bottom: 50px;
}

.absolute-a, .absolute-span {
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="card">
  <a href="#" class="absolute-a">
    Using absolute on anchor
  </a>
</div> 

<div class="card">
  <a href="#">
    <span class="absolute-span">
      Using absolute span
    </span>
  </a>
</div>

Answer 1

与一切一样，这取决于您的需要。最后你只是想要一个 link 来填充一个区域。它甚至不需要 absolute。这完全取决于偏好。

.card {
  height: 100px;
  background: green;
  position: relative;
  margin-bottom: 50px;
}

.absolute-a, .absolute-span {
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

a.alt {
  height:100%;
  width:100%;
  display:inline-block;
  border:1px dashed yellow;
}

<div class="card">
  <a href="#" class="absolute-a">
    Using absolute on anchor
  </a>
</div> 

<div class="card">
  <a href="#">
    <span class="absolute-span">
      Using absolute span
    </span>
  </a>
</div>

<div class="card">
 <a class="alt" href="#">Hi</a>
</div>

Answer 2

从可访问性的角度来看，使用绝对锚标记与使用绝对跨度标记之间的主要区别是当任一元素具有焦点时出现的可见焦点矩形。

对于绝对锚定卡片，可见焦点矩形覆盖整个卡片：

对于绝对跨度卡，可见焦点矩形没有出现（Chrome），或者非常小（Firefox）：

为了满足 WCAG 2（请参阅 guideline 2.4.7: Focus Visible），具有焦点的元素必须具有可见的焦点矩形。

我用 JAWS 2022 测试了两个卡片示例，它在任何一种情况下都正确地宣布了 link。

附带说明一下，蓝色 link 文本与绿色背景的颜色对比度为 too low to satisfy WCAG 2，因此您需要将对比度至少提高到 4.5:1使其易于访问。我确定示例现在就是这样，但我认为值得一提，因为您询问的是可访问性。

绝对锚标签与具有绝对跨度的锚标签

Absolute anchor tag vs anchor tag with absolute span

html

css

accessibility