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

Question

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

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

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

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

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

标签： htmlhyperlinkaccessibilityblogssemantic-markup

Answer 1

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

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

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