我见过两种方法可以将链接延伸到卡片/容器/div/任何东西上,使整个东西都可以点击.

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

第二个选项让<a>保持不变,并在里面放置一个绝对span标签——导致ainflating 并填满容器.

有没有一个真正的原因导致一个超过另一个?

.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>

推荐答案

从可访问性的Angular 来看,使用绝对锚定标记和使用绝对跨度标记之间的主要区别在于,当任一元素都有焦点时,会出现可见的焦点矩形.

For the absolute anchor card, the visible focus rectangle covers the entire card: Card using absolute link styling

For the absolute span card, the visible focus rectangle doesn't appear (Chrome), or is very small (Firefox): Card using absolute span styling

为了满足WCAG 2的要求,有焦点的元素需要有一个可见的焦点矩形(见guideline 2.4.7: Focus Visible).

我用JAWS 2022测试了这两个卡片示例,它正确地宣布了两种情况下的链接.

另一方面,蓝色链接文本与绿色背景的 colored颜色 对比度为too low to satisfy WCAG 2,因此您需要将对比度至少提高到4.5:1,以便访问.我相信现在的例子就是这样,但我觉得值得一提,因为你问的是可访问性.

Html相关问答推荐

XPATH text()函数遇到困难

使用网格时图像溢出容器高度

react :事件和转发器在特定代码段中不起作用

Firefox和Chrome在文字装饰和文字阴影方面的不同优先顺序

无法从路径参数获取ID

如何在HTML中适当地为单选按钮网格添加标签?

页面文件夹内的 HTML 页面未加载主目录的 style.css

如何使用 HTML 将对象数组发送到 Nodejs Express

jquery向单词中的一组字母添加跨度

图像如何能达到 HTML 表格的全宽?

并排对齐两个文本区域列

获取链接到功能的网页表单

如何使用 CSS 应用带有笔划的文本阴影?

如何消除线性渐变线的模糊?

您如何动态更改 Vue 中更高级别的标签的 CSS

HTML画布放大/缩小算法与CSS(图像处理)

水平对齐两列中的两个按钮 同一级别

嵌套固定定位的 Div 滚动条渗透到前景中的 Div

为什么我的动画会向 Moz Firefox 中的微调器添加人工制品?