html - 将博文预告链接到完整博文页面的无障碍方式

Question

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

1. 只有“阅读更多”按钮上的链接
2. 安 <a>围绕整个列表项的标记，使每个区域都可点击
3. 一切都有自己的<a>标签

我一直在阅读有关此内容的文章，第一个选项听起来最适合屏幕阅读器，但无法单击标题或文本进入帖子并不好。

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

第三个看起来臃肿，屏幕阅读器乱七八糟。

Answer 1

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

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

但这并不妨碍您在外部 div 上使用 onclick 事件来使整个代码段可点击以改进鼠标导航。