块链接：寻找完美的解决方案

克里斯（Chris）最近强调了“块链接”的可访问性和UX缺陷 - 将整个卡片元素包装在锚标签中。本文重新讨论了挑战，探讨了问题是否在于模式本身或其实施。我们的目标是创建一个解决这些问题的卡组件。在整个过程中，“卡”是指采用块链路模式的组件。

我们理想的卡组件应符合以下标准：

1. 完全可单击并链接。
2. 容纳多个内部链接。
3. 维护语义HTML以辅助技术兼容性。
4. 允许文本选择，例如标准链接。
5. 支持右键单击键盘快捷键。
6. 确保适当的选项卡订单以获取可聚焦元素。

这带来了重大挑战，因为浏览器缺乏标准卡小部件。让我们检查几种方法：

方法1：简单（但有缺陷）<a></a>裹

最简单的方法 - 将整个卡片包装成一个<a></a>标签 - 也是最不可能的。在实现基本可单击性和右​​键/键盘快捷键功能时，它在多个方面失败：

1. 防止卡中的嵌套链接。
2. 妥协可及性；屏幕读取器可能会毫不及格地宣布整个卡的内容。
3. 禁用文本选择。

这种方法显然不足。

方法2：仅链接必要的元素

这种方法通过仅链接需要链接的单个元素来优先考虑可访问性。这个成功解决了：

1. 多个内部链接。
2. 语义HTML。
3. 文本选择。
4. 右键单击/键盘快捷键。
5. 选项卡订单。

但是，它缺乏全卡可列击性的关键功能。

方法3：pseudo-Element方法::before

使用A ::before ::after可单击可单击的区域。但是，此方法仍然遭受：

1. 嵌套链接的限制；伪元素层阻碍了基础链接的点击。
2. 文本选择仍然有问题。

需要一个更强大的解决方案。

方法4：JavaScript增强方法2

在方法2的基础上，我们可以利用JavaScript进行逐步增强。我们将在卡中添加单击事件侦听器，并编程触发主链接的点击事件。为了防止干扰文本选择，我们将使用window.getSelection().toString()检查是否在触发链接之前选择文本是：

 const card = document.queryselector（“。卡”）;
const mainlink = document.queryselector（'。主链接'）;

card.AddeventListener（“ click”，handleclick）;

功能handleclick（event）{
  const isTextSelected = window.getSelection（）。toString（）;
  如果（！isTextSelected）{
    mainlink.click（）;
  }
}

//防止卡中可点击元素的事件传播
const clickableElements = array.from（card.queryselectorall（“ a”））;
clickablelements.foreach（（Ele）=>
  ele.AddeventListener（“ click”，（e）=> e.stoppropagation（））
）；

这种方法成功地满足了我们的所有要求。但是，内部链接和按钮上的潜在双事件触发可能需要进一步完善。

该解决方案提供了功能可访问的可单击卡组件。其他考虑因素，例如使用“阅读更多”链接或图像的处理卡，需要进行其他探索。

用于进一步阅读：

• Heydon Pickering的卡片
• Adrian Roselli的块链接，卡片，可点击区域，行等。
• 克里斯·科伊尔
• Dave Rupert的Card UIS的陷阱

以上是块链接：寻找完美的解决方案的详细内容。更多信息请关注PHP中文网其他相关文章！