按钮内文字重复播报的根本原因是语义结构冲突或冗余，如button内嵌div/span未用aria-hidden="true"隐藏、自定义role="button"混用aria-label与可见文本、form中button同时设value和子文本等，导致屏幕阅读器多次解析同一内容。
按钮内部文字被重复播报，根本原因不是文本本身重复，而是语义结构冲突或冗余导致屏幕阅读器多次解析同一内容——比如同时存在 button 和其内部的 span、div 或嵌套 label，又没正确剥离非交互性文本的可访问性暴露。
button 里塞 div 或 span 会触发双重播报
原生 button 自带完整语义：它既是可聚焦控件，又自动将子文本作为其可访问名称（accessible name）。但如果你写成：
<button> <div class="icon"></div> <span>提交</span> </button>
部分屏幕阅读器（如 NVDA + Firefox）会把 div 当作独立可读节点处理，再叠加 span 内容，最终读出“图标 提交”甚至“图标 空格 提交”——而你根本没想暴露“图标”二字。
- ✅ 正确做法：用
aria-hidden="true"明确隐藏装饰性子元素 - ✅ 图标优先用 SVG +
focusable="false"，避免被当作文本节点 - ⚠️ 避免在
button内使用label或aria-label同时存在——会造成名称拼接（如“提交 提交”）
自定义 button 组件必须手动控制 accessible name 来源
当你用 div role="button" 模拟按钮时，屏幕阅读器不再自动提取子文本为名称，而是依赖 aria-label、aria-labelledby 或显式文本节点。但若三者混用，极易叠加：
<div role="button" aria-label="删除" id="del-btn"> <span aria-hidden="true">?️</span> <span>删除</span> </div>
这里 aria-label="删除" 已明确声明名称，但内部 <span>删除</span> 仍会被读一次（尤其当未设 aria-hidden="true"），结果就是“删除 删除”。
- ✅ 只保留一种名称来源：要么用
aria-label，要么让唯一可见文本节点成为名称（此时删掉aria-label） - ✅ 若需视觉分层（如图标+文字），把文字包裹进
span并确保它是按钮内唯一非aria-hidden的文本节点 - ⚠️ 不要用
title属性替代aria-label：它不被所有读屏支持，且无键盘可访问性
表单按钮与 type="submit" 的隐式命名陷阱
在 form 内部，button 没有 type 属性时默认为 submit，但若同时设置了 value 和内部文本，部分读屏会优先读 value，再读子内容：
<button value="确认提交">确认</button>
实际播报可能是“确认提交 确认”，因为 value 被当作名称，子文本又被当作 fallback 名称。
- ✅ 显式声明
type="button"或type="submit"，并只用一种方式提供名称 - ✅ 避免同时设置
value和内部文本；如需多语言支持，统一用子文本 + JS 动态更新 - ⚠️
input[type="submit"]的value是唯一名称来源，不要给它加子文本——它不支持子节点
真正难缠的不是“怎么加 ARIA”，而是“怎么不加多余的东西”。多数重复播报来自开发者试图“增强语义”却叠加了冲突声明——删掉一个 aria-label、藏掉一个图标 span、去掉一个没必要的 value，往往比补十个属性更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
