如何让NVDA等屏幕阅读器正确读取SVG图形中<text>标签的文本内容？

SVG屏幕阅读器朗读兼容修改方案 #

你遇到的是内嵌SVG的无障碍语义识别问题，NVDA默认不会把SVG内部带tabindex的元素的aria属性或文本内容当做可聚焦朗读的交互元素处理，需要先给SVG根元素和内部可聚焦节点补全标准语义标记，具体修改步骤如下：

• 第一步：修改SVG根节点属性
  给最外层<svg>标签补充三个属性：role="img"、aria-label="操作指南：Replay录屏操作步骤"（可替换为你的内容总说明）、focusable="false"，避免整个SVG被错误识别为单一交互元素。
• 第二步：给内部需要按tab切换朗读的元素统一配置属性
  每个需要聚焦朗读的区域要同时添加四个属性：
  • tabindex="0" 确保元素可以通过tab键正常聚焦
  • role属性匹配实际语义：文本区域用role="region"，交互按钮用role="button"
  • aria-roledescription="操作步骤" 自定义角色说明，NVDA聚焦时会优先播报该内容
  • aria-label="你需要朗读的完整文本内容" 若内部<text>节点内容复杂，直接把要朗读的内容全写在aria-label里，兼容性远优于依赖屏幕阅读器主动读取内部文本节点
• 第三步：关闭装饰元素的无障碍识别
  所有纯装饰性的图形、线条元素补充aria-hidden="true"属性，避免屏幕阅读器识别到无效内容干扰正常朗读。

不建议直接把所有文本写入顶部描述，该方案会导致用户需要一次性收听全部内容，无法按操作步骤切换定位，体验远不如分区域聚焦朗读。

如果上述修改后还是存在兼容问题，可以采用兜底兼容方案：在SVG上方的HTML位置加一个视觉隐藏的文本块，把所有要朗读的内容按步骤拆分，给每个文本块单独加tabindex属性，视觉隐藏用CSS实现：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

该方案兼容性最好，所有屏幕阅读器都能正常识别聚焦朗读，也不影响SVG本身的可缩放、文本可高亮特性。

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