将博客帖子预告片链接到完整博客帖子页面的可访问方式

Question

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

1. 只有＆＃34;阅读更多＆＃34;按钮
2. 围绕整个列表项的<a>标记，以使每个区域都可点击
3. 所有具有自己的<a>标记
的内容



我一直在读这个，第一个选项对于屏幕阅读器来说听起来最好，但是不能点击标题或文字进入帖子是不好的。

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

第三个看起来很臃肿，弄乱了屏幕阅读器。

Answer 1

对于使用键盘导航的用户，最好只有一个包含优质和短替代文字的链接，例如

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

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