求助：iOS 17.7 VoiceOver无法读取模拟禁用按钮的aria-label内容

用div模拟禁用按钮并设置tabIndex={0}后，Android屏幕阅读器和桌面JAWS能正常播报“Button Text Disabled button”，但iOS 17.7的VoiceOver只读取视觉文本“Button Text”，就算加了aria-label也没用。

问题根源 #

当前代码里的div没有明确的按钮角色，VoiceOver无法识别这是一个按钮组件，所以不会处理相关的ARIA属性或隐藏文本内容。

修复方案 #

• 给div加上role="button"，明确告诉屏幕阅读器这是按钮元素
• 添加aria-disabled="true"标记按钮为禁用状态，VoiceOver会自动播报“已禁用”状态
• 保留视觉隐藏的状态文本，或者通过aria-label整合文本与状态（二选一即可）

修改后的代码示例 #

export const example = () => {
  return (
    <div
      tabIndex={0}
      role="button"
      aria-disabled="true"
      style={{
        opacity: "40%",
        color: "#3057B9",
        display: "inline"
      }}
      data-testid="example"
      // 可选：如果需要自定义播报内容，取消注释下面的aria-label
      // aria-label="Button Text 已禁用"
    >
      Button Text{" "}
      <span className="visually-hidden">已禁用</span>
    </div>
  );
};

说明 #

加上role="button"后，VoiceOver会把这个div识别成按钮，再配合aria-disabled="true"，会自动在“Button Text”后面加上“已禁用”的状态提示。如果用aria-label，要确保内容里包含状态描述，这时VoiceOver会优先读取aria-label的内容。

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