ReactJS IOS Voiceover无障碍问题：Material Button朗读冗余内容

安全阿岳

2026-7-22

iOS Voiceover朗读Material Button时多余“end name”的解决办法

强制设置无障碍标签：给Material Button直接指定aria-label="Back to top button"（Web端）或accessibilityLabel="Back to top button"（跨端框架），覆盖组件默认生成的冗余朗读文本。
清理内部元素的无障碍属性：按钮内的图标、装饰元素除了添加aria-hidden="true"，还要检查是否带有额外的role或aria-label属性，全部移除或设为无效，避免Voiceover抓取到多余内容。
排查DOM冗余文本节点：利用浏览器无障碍检查工具（如Chrome DevTools的「无障碍」面板）查看按钮的无障碍树，确认是否存在隐藏的文本节点（比如空格、换行符被解析为独立节点），这类节点可能被Voiceover误读为“end name”，需要清理DOM中的冗余空白。
精准绑定标签元素：如果按钮文本由内部元素展示，用aria-labelledby绑定该元素的ID，同时确保其他元素完全隐藏：
```
<button aria-labelledby="backtop-label">
  <span id="backtop-label">Back to top</span>
  <svg aria-hidden="true">...</svg>
</button>
```
Material UI组件特殊处理：若使用Material UI Button，避免设置多余的name属性（部分场景下name会被Voiceover读取），同时检查是否有默认的辅助文本或交互元素干扰，可通过自定义样式隐藏无关元素。