优化博客列表链接提升无障碍性：哪种实现方式最佳？

针对博客文章预告列表的链接无障碍设计问题，我结合实际体验与无障碍规范，梳理三种常见方案的优劣如下：

三种可选方案的详细分析 #

• 仅在“阅读更多”按钮上设置链接
  这是对屏幕阅读器最友好的方案：语义边界清晰，辅助技术用户能明确识别出唯一的交互跳转入口，不会混淆内容展示区和可操作区域。但弊端也很突出——对于鼠标、触控设备用户来说，无法点击标题或摘要直接进入文章的体验非常反直觉，大幅提升了操作成本，不符合常规用户的使用习惯。

• 用<a>标签包裹整个列表项
  这是我个人认为的最优方案：用户可以点击列表项的任意区域（标题、摘要、配图等）进入文章，操作流畅自然，符合多数用户的使用直觉。关于你提到的与某些框架的冲突问题，通常可以通过调整CSS和无障碍属性解决：

  1. 给包裹列表项的<a>标签设置display: block，确保整个区域可点击；
  2. 为该<a>标签添加清晰的aria-label，比如aria-label="查看完整博文：XXXXX"，帮助屏幕阅读器明确跳转目标；
  3. 避免给列表项内的子元素设置pointer-events: none这类会阻断点击的样式。

• 所有内容各自使用独立<a>标签
  这种方案的问题最严重：屏幕阅读器会识别出多个指向同一页面的重复链接，容易让辅助技术用户产生困惑；同时鼠标用户也容易误触，从语义设计角度看，冗余的跳转入口不符合无障碍设计的简洁性原则，不推荐使用。

内容的提问来源于stack exchange，提问作者Yeshu'a Emanuel Braz