Question

在我的文章列表中，我通过标题链接，也通过“阅读更多”链接：

<article>
  <h3><a href="#">Title here</a></h3>
  <p class="lead">Lead here</p>
  <a href="#" title="Title here">Read more</a>
</article>

阅读W3C's tips on avoiding verbs in link text之后，我不愿意有一个“阅读更多”链接，但我觉得有必要告知用户，当他们到达主要文本的末尾时还有更多要阅读。

使用title="Title here"是否妥协？

Answer 1

（就我个人而言，我不同意提示从不使用动词短语。）

在我看来，“阅读更多”是有问题的，因为它在上下文中没有用处/意义。想想典型的博客首页，列出最近的10篇文章片段。如果屏幕阅读器用户使用该功能显示页面上的所有链接，则会显示如下内容：

超链接：了解更多
  超链接：了解更多
  超链接：了解更多
  超链接：了解更多
  ...

所以他们不知道这些链接会导致什么。（...阅读更多什么？）

因此，您应该在链接中包含此上下文，即文章标题。

原则上，使用title属性是合适的。但是，默认情况下，许多用户代理（包括许多屏幕阅读器）都会忽略此属性。因此，为了安全起见，文章标题应该包含在锚文本中。（如果您愿意，您可以在视觉上隐藏它，以便它仍然可以被屏幕阅读器用户读取。）

您也可以考虑完全省略此链接（如果您在视觉上明确标题是一个链接，并且您只显示一个简短的摘要/介绍，不能被认为是完整的文章）。有关UX SE的一些相关讨论：

在任何情况下，您可能希望使用bookmark link type作为完整文章的链接。

<article>
  <h3><a href="#" rel="bookmark">Title here</a></h3>
  <!-- … -->
</article>

Answer 2

最后，我选择了只有屏幕阅读器可见的span标记：

<a href="#">Read more<span class="sr-only"> about 'Title here'</span></a>

有些网站会在文章本身中嵌入屏幕阅读器文字，以确保在复制并粘贴到其他网站时将其工作记入帐户：

<p>Paragraph one here.</p>
<p class="sr-only">Read more at <a href="#">our-site.com</a></p>
<p>Paragraph 2 here.</p>

这是一个健康的妥协，因为希望喜欢搜索引擎，并且当然喜欢屏幕阅读器。