“阅读更多”链接和 W3C 的建议答案

【问题标题】："Read more" links and W3C's suggestions“阅读更多”链接和 W3C 的建议
【发布时间】：2014-02-20 12:31:05
【问题描述】：

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

<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" 是一个好的折衷方案吗？

【问题讨论】：

【解决方案1】：

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

在我看来，“阅读更多”是有问题的，因为脱离上下文它没有用/没有意义。想想一个典型的博客首页，列出 10 篇最近的文章 sn-ps。如果屏幕阅读器用户使用该功能显示页面上的所有链接，他们会得到如下信息：

超链接：阅读更多
超链接：阅读更多
超链接：阅读更多
超链接：阅读更多
…

所以他们不知道这些链接会指向哪里。（……阅读更多什么？）

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

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

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

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

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

【讨论】：

【解决方案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>

这是一个健康的妥协，因为希望能取悦搜索引擎，当然也能取悦屏幕阅读器。

【讨论】：