将博客文章预告片链接到完整博客文章页面的可访问方式答案

【问题标题】：Accessible way to link blog post teasers to the full blog post page将博客文章预告片链接到完整博客文章页面的可访问方式
【发布时间】：2018-05-08 14:05:01
【问题描述】：

哪一种是处理博客列表中的链接以提高可访问性的最佳方式？

我一直在阅读这方面的内容，第一个选项听起来最适合屏幕阅读器，但不能点击标题或文本进入帖子并不好。

我认为第二个选项是最好的，但这种方法与共享按钮相冲突，因为链接内的链接不是有效的 HTML。

第三个看起来臃肿且与屏幕阅读器混淆。

【问题讨论】：

我非常支持可点击的标题、图片和阅读更多按钮。我会选择 3 的精简版。
选项 3 是完美的，因为大多数博客平台都遵循这种模式。因为它还可以帮助您为您的网站带来更多点击。
我认为这可能过于宽泛而无法回答，可能更适合UX Stack Exchange。现在，它太基于意见了。
我实际上反对一切都是锚。如果我正在使用可访问性工具并尝试从锚点导航到锚点，我不想陷入巨大的锚点列表中。我也不喜欢 2，因为整篇文章不是文档的链接，只有阅读更多。
@Clint：我认为这个问题很好。 HTML / 语义标记 / 可访问性是 Stack Overflow 上的主题。

【解决方案1】：

对于使用键盘导航的人来说，最好只有一个链接和简短的替代文本，比如

<a href="#" aria-label="Read more about Original post title">Read more</a>

但这并不妨碍您在外部 div 上使用 onclick 事件来使完整的 sn-p 可点击以改善鼠标导航。

【讨论】：

aria-label 完全覆盖了内部文本，因此屏幕阅读器只会说“转到原始帖子标题”。这对屏幕阅读器来说很好，但使用语音识别辅助技术很难选择链接。（有视力的）用户会看到“阅读更多”，但如果他们说“点击阅读更多”，它将不起作用，因为链接的可访问名称不是“阅读更多”，而是“转到原始...”。为了让屏幕阅读器和语音识别都满意，您可以执行<a href='#'>Read more <span class='sr-only'>about blah blah blog post</span></a> 之类的操作。
@slugolicious 你说的完全正确。我将不得不测试一些语音识别软件来查看它们的行为，而不仅仅是“阅读更多”链接。