Question

Teasers：块级链接与否？

假设您要显示一个预告片，邀请您在新页面上查看更深入的文章。您可以使用卡组件（image + title + short intro）来实现这一目标，然后可以使用两种解决方案：

以简单的方式实现它：链接包装图像和标题。你甚至可以在预告片的底部有一个“阅读更多”链接。
实施块级链接：将整个预告片包装在一个链接中。

这两种解决方案是可行的，因为永远（HTML5 Doctor article by Bruce Lawson）和不应对屏幕阅读器用户造成太多问题。 Heydon Pickering还在他的“包容性设计模式”一书中提到了块级链接，并建议在块级链接中不要有太长的文本内容。

辅助功能问题

在我正在进行的项目中，我收到了一位屏幕阅读器用户的报告，说明了一些细微之处。对于他来说，导航跨越一组块级别的戏弄是非常困难的，因为一切都是一个链接，因此不清楚什么是底层行动。此外，屏幕阅读器不断重复您在链接中。

当我使用VoiceOver进行测试时，会读取块级链接的全部内容，而不会显示是否正在读取标题，图像或段落。你必须心甘情愿地进入链接内部以便更好地理解。也许链接到标题的aria-labelledby可能很有用。

预告片中的绝对链接

我想出了一个似乎有点脏的解决方案但是应该适用于所有情况，并且在整个预告片上都有position: absolute的链接。这个实现实际上是两个解决方案的完美组合，用于一个不错的块级链接预告片。

绝对链接位于块上方，使预告片的行为与块级链接完全相同。对于屏幕阅读器用户，也可以将链接添加到图像+标题，并且绝对链接包含仅针对屏幕阅读器的正确的号召性用语文本，其将在其余的预告片内容之后读取。

此实现的另一个好处是可以在预告片中包含其他链接，并在链接上使用更高的z-index定位它们。例如，这对日期/作者/类别非常有用。

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

这是我正在谈论的预告片（see on Codepen）：

.card-link-absolute {
  transition: all 0.2s;
  width: 20em;
  margin: 30px;
}
.card-link-absolute:hover {
  color: #014c8c;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
.card-link-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.card-link-foreground {
  position: relative;
  z-index: 10;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<article class="card card-link-absolute">
  <img class="card-img-top" src="http://placehold.it/318x180" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Link in absolute</h4>
    <p class="card-text">The text is here and can be quite long</p>
    <p class="card-text">
      <a class="btn btn-success btn-sm card-link-foreground" href="http://antistatique.net">Other link</a>
    </p>
    <a href="#0" class="card-link-overlay"><span class="sr-only">Read more about Card title</span></a>
  </div>
</article>

Answer 1

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

但是我可以保留真正可以访问的内容。如果它看起来不像一个链接，但表现得像一个链接，那可能会令人不安。

我还会说，如果内部有指向其他目的地的链接，那么对于某些人来说这会让人感到困惑（这种实现并不是专门针对屏幕阅读器的用户）。

Block Level链接使用绝对链接覆盖而不是包装链接？

Teasers：块级链接与否？

辅助功能问题

预告片中的绝对链接

1 个答案: