NVDA在Chrome中无法读取图片alt文本的技术求助

以下是针对你遇到问题的几种排查和解决思路：

• 检查版本兼容性
  确保Chrome浏览器和NVDA屏幕阅读器都更新到最新稳定版本。旧版本之间的兼容性问题经常会导致这类无障碍读取异常。

• 处理stretched-link的焦点覆盖问题
  你代码中的stretched-link类（Bootstrap组件）会让<a>标签覆盖整个父容器的点击区域，这可能导致焦点始终落在链接上，而非图片。可以尝试两种调整方式：

  1. 给图片添加tabindex="0"，让它能通过键盘被聚焦：

     <img src="image.png" alt="alt text" class="img-fluid" tabindex="0">
     

  2. 调整<a>标签的作用范围，避免它覆盖图片区域，比如将链接仅包裹文本部分，而非利用stretched-link扩展到整个卡片。

• 明确图片的语义角色
  有时候NVDA在Chrome中可能误判图片为装饰性元素，可通过添加role="img"明确告知屏幕阅读器这是一个需要读取的图片：

  <img src="image.png" alt="alt text" class="img-fluid" role="img">
  

• 验证焦点导航逻辑
  默认情况下，只有当图片属于链接一部分或带有usemap属性时，才会被键盘聚焦。如果你的图片是独立展示，添加tabindex="0"是让键盘能聚焦到图片、进而让NVDA读取alt文本的必要操作。

• 检查Chrome无障碍设置
  打开Chrome设置 → 高级 → 无障碍，确认“让屏幕阅读器读取网页内容”选项处于开启状态，该设置关闭会直接影响屏幕阅读器对网页内容的读取。

调整后建议重启NVDA和Chrome，再测试键盘聚焦（Tab键导航）和鼠标悬停的读取效果。

内容的提问来源于stack exchange，提问作者patel887