Firefox+NVDA下屏幕阅读器无法读取图标，Chrome正常求解决

以下是针对你遇到的问题的可行解决办法：

• 检查Icon组件的最终渲染输出
  很多UI库的Icon组件会默认给内部的<svg>标签添加aria-hidden="true"，或者未正确配置语义属性。你需要确认最终渲染到页面的HTML中，<svg>标签的属性是否和你设置的一致，比如是否存在被组件内部逻辑覆盖的aria-hidden或其他属性。

• 为SVG添加明确的语义角色
  根据图标的用途选择合适的role属性：

  • 如果图标是可交互的（比如作为按钮使用），设置role="button"，这会让NVDA明确识别为可交互控件；
  • 如果仅作为纯展示图标，设置role="img"，配合aria-label提供描述。

  示例代码（假设Icon组件最终渲染为svg）：

  <svg role="button" aria-label="icon" tabindex="0" aria-hidden="false">
    <!-- 图标路径内容 -->
  </svg>
  

• 使用SVG内置的<title>元素替代aria-label
  NVDA在Firefox环境下对SVG的<title>元素支持更稳定，你可以通过aria-labelledby关联title的ID来提供描述：

  <svg role="button" tabindex="0" aria-labelledby="icon-desc">
    <title id="icon-desc">icon</title>
    <!-- 图标路径内容 -->
  </svg>
  

  这种方式能避免部分浏览器和屏幕阅读器对aria-label解析不一致的问题。

• 确保父元素未覆盖无障碍属性
  检查图标所在的父容器是否设置了aria-hidden="true"，这会导致子元素的无障碍属性被忽略，即使你给图标设置了aria-hidden="false"也无效。

• 添加键盘交互支持
  既然你设置了tabindex="0"让图标可聚焦，还需要为其添加键盘事件监听（比如Enter和Space键触发对应功能）。NVDA会识别具备完整交互逻辑的元素，缺少键盘事件可能被判定为非交互元素而跳过。

• 在目标环境测试
  你目前在Mac上用VoiceOver测试，但问题出在Windows的NVDA+Firefox组合，不同屏幕阅读器和浏览器的无障碍支持差异较大，建议在对应环境下测试验证修改效果。

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