Html 使用绝对链接覆盖而不是环绕链接的块级链接？ 摘要：是否有块级链接？

假设您想显示一个摘要，邀请您在新页面上查看更深入的文章。您可以使用卡片组件（

图像

+

标题

+

简短介绍

）来实现这一点，然后您可以使用两种解决方案：

用简单的方式实现：链接将图像和标题包装起来。你甚至可以在摘要的底部有一个“阅读更多”的链接

实现一个块级链接：将整个摘要包在一个链接中

这两种解决方案都是可行的，因为forever（）和不会给屏幕阅读器用户带来太多问题。Heydon Pickering在《包容性设计模式》一书中也提到了块级链接，并建议块级链接中不要包含太长的文本内容

无障碍问题 在我目前正在做的一个项目中，我收到一个屏幕阅读器用户的报告，说了一些更细微的东西。对他来说，浏览一组区块级的挑逗者是一种困惑，因为一切都是一个链接，因此不清楚潜在的动作是什么。加上屏幕阅读器不断重复你在一个链接内

当我使用VoiceOver进行测试时，一个块级链接的全部内容都被读取，而没有任何显示它是否在读取标题、图像或段落。你必须心甘情愿地进入链接内部才能更好地理解。也许链接到标题的

咏叹调标签是有用的


一个链接绝对超过了挑逗
我提出了一个解决方案，它看起来有点脏，但在所有情况下都应该使用
position:absolute
链接。这个实现实际上是一个好的块级链接摘要的两个解决方案的精确组合

绝对链接位于块上方，使摘要的行为方式与块级链接的行为方式完全相同。对于屏幕阅读器用户，链接也可以添加到图像+标题中，绝对链接包含一个仅适用于屏幕阅读器的适当操作调用文本，该文本将在其他摘要内容之后读取

此实现的另一个好处是，可以在摘要中包含其他链接，并在链接上方使用更高的z索引定位它们。例如，这对日期/作者/类别很有用


我的问题是：与块级链接或具有多个链接的简单摘要相比，这个解决方案在a11y、UX和一般代码质量方面是一个好主意吗？

这是我正在谈论的一个难题（）：


.card链接绝对值{
过渡：均为0.2s；
宽度：20em；
利润率：30像素；
}
.卡链接绝对值：悬停{
颜色：#014c8c；
盒影：0.4×0 rgba（0,0,0,0.2）；
}
.卡链接覆盖{
位置：绝对位置；
排名：0；
右：0；
宽度：100%；
身高：100%；
}
.卡链接前景{
位置：相对位置；
z指数：10；
}


关于这个问题，我的想法是：如果能提供最佳的屏幕阅读器体验，您可以完美地使用第一个解决方案（不要将所有内容都包装在链接中）。然后，如果您想给鼠标用户提供另一种体验，您可以使用包装器元素上的javascript
onclick
事件和“this is clickable”鼠标指针。只要可以使用键盘执行相同的操作，就没有任何东西表明链接必须相同。这几乎等同于您的
立场：绝对的
解决方案，但更容易实现

但我会保留这一点，因为它确实容易接近。如果它看起来不像一个链接，但行为却像一个链接，那么它可能会受到干扰

我还想说，如果其中有指向其他目的地的链接，这将使一些人感到困惑（这种实现并不专门针对屏幕阅读器用户）。
我的想法是：您可以完美地使用第一种解决方案（不要将所有内容都包装在链接中）如果这能提供最佳的屏幕阅读器体验。然后，如果您想给鼠标用户提供另一种体验，您可以使用包装器元素上的javascript
onclick
事件和“this is clickable”鼠标指针。只要可以使用键盘执行相同的操作，就没有任何东西表明链接必须相同。这几乎等同于您的
立场：绝对的
解决方案，但更容易实现

但我会保留这一点，因为它确实容易接近。如果它看起来不像一个链接，但行为却像一个链接，那么它可能会受到干扰

我还想说，如果里面有指向其他目的地的链接，这会让一些人感到困惑（这种实现并不专门针对屏幕阅读器用户）。
1。关于屏幕阅读器，有些会读出所有内容（如您所述），但有些不会。2.绝对链接是个不错的主意，但想想kbd用户——他们应该看到焦点风格吗？3.还考虑非鼠标用户，如触摸用户的提供。如果摘要看起来不像一个链接（没有光标变化）会让人困惑吗？如何支持这个覆盖（在您的代码中是
.card link overlay
锚定），查看悬停事件。当基本上悬停在覆盖上时，是否也会触发基础元素（在代码中为
文章
元素）的悬停事件？在firefox@ubuntu中是这样的。关于屏幕阅读器，有些会读出所有内容（如您所述），但有些不会。2.绝对链接是个不错的主意，但想想kbd用户——他们应该看到焦点风格吗？3.还考虑非鼠标用户，如触摸用户的提供。如果摘要看起来不像一个链接（没有光标变化）会让人困惑吗？对这个覆盖的支持（在你的代码中，
.card链接）如何