Question

当您在页面上有冗余链接时，可访问性的最佳做法是什么。例如，包含博客列表的页面通常具有可点击的标题和更多阅读链接：

<article>
  <h2><a>My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  <a>Read More</a>
</article>
<!-- more blog listings... -->

我的第一种方法是在阅读更多链接中添加aria标签，为其提供一些背景信息。

<article>
  <h2><a>My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  <a aria-label="My awesome blog post title">Read More</a>
</article>
<!-- more blog listings... -->

然而，现在有两个相同的链接，我可以看到这对于使用屏幕阅读器的人来说会是多么令人恼火 - 特别是如果页面包含大量文章。

这是一个很好的用例，用于隐藏屏幕阅读器和/或使用键盘导航的人员的无关链接。像这样的东西？

 <article>
  <h2><a>My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  <a role="presentation" tabindex="-1">Read More</a>
</article>
<!-- more blog listings... -->

不确定这是否是试图提供帮助可能会使事情变得更糟的情况之一。非常感谢任何建议！

谢谢，亚当

Answer 1

一些基线：

通常，您希望指向网站上同一网址的链接为use the same text。这就是为什么“阅读更多”对于许多屏幕阅读器用户来说太混乱的部分原因。
您还希望避免过于冗长，以配合屏幕阅读器用户。
您还希望避免链接整个内容块，因为这也可能非常冗长。
这主要影响屏幕阅读器用户;视觉非屏幕阅读器用户通常可以轻松解析“阅读更多”链接。

您可能从Google搜索中发现了许多不同的方法，其中许多方法取决于具体情况。

这就是问题 - 背景问题。了解受众，考虑材料并了解影响都至关重要。对于针对年轻用户的科技博客，我可能会以不同的方式编写代码，而不是针对我前面一代人的食品博客。在这两种情况下，我都会包括屏幕阅读器测试。

话虽如此，因为“它取决于”通常是一个废话答案。以下是您可以测试的一些方法。由于屏幕阅读器用户是我们的目标，我依靠ARIA而不是CSS或脚本欺骗。

此方法has issues in NVDA当用户选中链接时（但仍是我首选的方法）：

<article>
  <h2><a href="foo.html">My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  <a href="foo.html" aria-describedby="Foo">Read More</a>
</article>

这种方法会更清晰并且提供上下文，但有点冗长，意味着您必须更新/插入内容两次（如果您的帖子标题在标题中没有转义，则可能会出现问题）：

<article>
  <h2><a href="foo.html">My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  <a href="foo.html" aria-label="Read more of 'My awesome blog post title'">Read More</a>
</article>

这种方法依赖于现有标题，就像第一个标题一样，但完全删除了“read more”文本指令：

<article>
  <h2 id="Foo"><a href="foo.html">My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  <a href="foo.html" aria-labelledby="Foo">Read More</a>
</article>

由于id="Bar"中以空格分隔的ID列表，此方法首先提供上下文（id="Foo"），然后提供帖子的名称（aria-labelledby）。熟练的屏幕阅读器用户（或理解该页面的人）可以在前几个单词之后跳过它：

<article>
  <h2 id="Foo"><a href="foo.html">My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  <a href="foo.html" id="Bar" aria-labelledby="Bar Foo">Read More</a>
</article>

我希望这至少为您提供一个测试和/或决定哪个最适合您的受众和内容的起点。

Answer 2

<article>
  <h2><a href>My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  <a href>Read More</a>
</article>

第一个解决方案：让屏幕阅读器用户忽略＆＃34;阅读更多＆＃34;链路

最简单的方法是在＆＃34; Read more＆＃34;上设置aria-hidden属性。链接。

问题：就像tabindex=-1所述，有视力的屏幕阅读器用户会看到他们无法继续的链接。

第二种解决方案：将所有内容视为链接

在HTML5中，您可以将整篇文章片段完美地附在链接
中
<article> <a href><h2>My awesome blog post title</h2> <p>This is the excerpt...</p> Read More </a> </article>

问题：替代文字会非常长。

第3个解决方案：玩一些javascript

结合aria-labelledby方法（see @aardrian excellent answer）和一些javascript魔法，您可以通过article标记（或{{{}上的onclick事件来充分利用两个世界1}}）

h2

这样，唯一可见的链接是＆＃34;阅读更多＆＃34;链接，键盘和屏幕阅读器用户可以关注它。替代文本非常明确。鼠标用户仍然可以点击标题或摘录。

我想补充一点，在标题中有一个链接（反之亦然）往往是一个糟糕的设计选择（这里讨论的时间太长）。

Answer 3

在我的个人建议中，我会将其组合为一个链接 ......只要您可以组合冗余链接，那将是一个巨大的胜利。

<article>
  <h2><a href="example.com">My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  Read More
</article>
<!-- more blog listings... -->

如果您确实需要两个链接，则可以使用 onclick函数并删除href。

<article>
  <h2 id="Foo"><a href="foo.html">My awesome blog post title</a></h2>
  <p>This is the excerpt...</p>
  <a onclick="examplefunction()"id="Bar" aria-labelledby="Bar Foo">Read More</a>
</article>

这消除了该冗余链接错误，并使第二个链接失去了聚焦。如果有人单击该链接，该链接仍然可以使用，但是它将其从选项卡顺序中删除。这是完全有效的。

尽管始终最好使用HTML处理链接，而不要使用javascript。

祝你好运

乔瓦尼

处理重复的内容链接

3 个答案: