VoiceOver中svg path的aria-describedby/aria-labelledby失效求助

问题诊断 #

核心问题有两点：

• ID命名不规范：HTML规范要求ID不能以数字开头，含.这类特殊字符也可能导致屏幕阅读器解析异常，这是VoiceOver无法识别aria-describedby绑定的主要原因。
• SVG元素语义缺失：默认情况下，<path>被识别为纯图形符号，VoiceOver不会主动关联外部描述内容，需要明确补充语义属性。

修复步骤 #

1. 修正ID命名 #

把数字开头、含特殊字符的ID改为合法格式，比如添加前缀并用下划线替代点号，确保符合HTML标准。

2. 隐藏描述元素（视觉层面） #

用于朗读的<div>无需在页面中显示，添加视觉隐藏类，既不影响布局，又能被屏幕阅读器抓取内容。

3. 优化SVG弧段的ARIA属性 #

• 用aria-labelledby替代aria-describedby：前者用于定义元素的核心标签，优先级更高，更适合作为弧段的朗读内容载体；
• 给<path>设置role="img"（仅信息展示场景）或role="button"（需交互场景），明确元素语义；
• 保留tabindex="0"确保弧段可通过Tab聚焦。

修改后的代码示例 #

CSS（视觉隐藏类） #

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

HTML #

<svg class="donut-chart" width="236px" viewBox="0 0 236 236">
  <g class="donut-chart-arcs">
    <path class="donut-chart-path" 
          d="M118,218.3
             A100.3, 100.3 0 0 1 117.50623649597293, 218.29878462674455
             L117.63984309118025,191.15911349244897
             A73.16, 73.16 0 0 0 118, 191.16 z" 
          stroke="#ffffff" stroke-width="2px" fill="#0046ad" opacity="1" 
          tabindex="0" role="img" aria-labelledby="amount_0_28">
    </path>
    <path class="donut-chart-path" 
          d="M117.50623649597293,218.29878462674455
             A100.3, 100.3 0 0 1 33.32260328573676, 171.757124976093
             L56.23531063194917,157.21107939432665
             A73.16, 73.16 0 0 0 117.63984309118025,191.15911349244897 z" 
          stroke="#ffffff" stroke-width="2px" fill="#ec0439" opacity="1" 
          tabindex="0" role="img" aria-labelledby="amount_56_89">
    </path>
    <path class="donut-chart-path" 
          d="M33.32260328573676,171.757124976093
             A100.3, 100.3 0 0 1 63.65981518807381, 33.695585438212646
             L78.36362990188914,56.5073682019904
             A73.16, 73.16 0 0 0 56.23531063194917,157.21107939432665 z" 
          stroke="#ffffff" stroke-width="2px" fill="#1977d3" opacity="1" 
          tabindex="0" role="img" aria-labelledby="amount_88_95">
    </path>
    <path class="donut-chart-path" 
          d="M63.65981518807381,33.695585438212646
             A100.3, 100.3 0 0 1 173.18230621846504, 34.244384782800665
             L158.25062335935098,56.907668900395784
             A73.16, 73.16 0 0 0 78.36362990188914,56.5073682019904 z" 
          stroke="#ffffff" stroke-width="2px" fill="#7300cd" opacity="1" 
          tabindex="0" role="img" aria-labelledby="amount_65_7">
    </path>
    <path class="donut-chart-path" 
          d="M173.18230621846504,34.244384782800665
             A100.3, 100.3 0 0 1 117.99999999999994, 218.3
             L117.99999999999996,191.16
             A73.16, 73.16 0 0 0 158.25062335935098,56.907668900395784 z" 
          stroke="#ffffff" stroke-width="2px" fill="#aa00aa" opacity="1" 
          tabindex="0" role="img" aria-labelledby="amount_145_55">
    </path>
  </g>
</svg>

<div id="amount_0_28" class="sr-only">$0.28</div>
<div id="amount_56_89" class="sr-only">$56.89</div>
<div id="amount_88_95" class="sr-only">$88.95</div>
<div id="amount_65_7" class="sr-only">$65.7</div>
<div id="amount_145_55" class="sr-only">$145.55</div>

额外说明 #

• 如果弧段需要交互（如点击事件），可将role="img"改为role="button"，并补充aria-label说明交互目的，比如aria-label="查看$0.28的详情"；
• 测试时确保VoiceOver的「描述图像」功能开启（MacOS：VoiceOver Utility > 导航 > 图像 > 描述图像）。

内容的提问来源于stack exchange，提问作者A.K