button里嵌div会导致语音助手“读不出来”，因div是块级元素，破坏button的可访问树结构，使屏幕阅读器降级为普通容器或跳过该节点；应改用内联元素或role="button"+手动事件绑定。
为什么 button 里嵌 div 会导致语音合成“读不出来”
不是语音合成 API 拒绝工作，而是屏幕阅读器根本没把那个元素识别为可操作控件。HTML 语义结构是语音助手理解页面意图的底层依据：button 的可访问树（accessibility tree）只接受内联内容（如文本、span、svg）。一旦塞进 div 这类块级元素，浏览器会降级处理——有些直接剥离语义，变成普通容器；有些则跳过整个节点，导致“能点但不能说”。
实操建议：
- 纯图标按钮必须用
aria-label显式声明作用，例如<button aria-label="删除"><svg>...</svg></button> - 真需要多行或复杂布局？改用
<div role="button" tabindex="0">，但必须手动绑定 <code>click、Enter和Space事件，并确保焦点管理正确 - 用 Chrome DevTools 的 Accessibility 面板检查“Name”字段：为空 = 语音助手无名可读
-
<img src="logo.svg" alt="">—— 安全，前提是 SVG 确实只是品牌标识、无文字信息 -
<svg role="img" aria-label="搜索">...</svg>—— SVG 必须加role="img"，否则多数阅读器当容器处理，aria-label无效 - IE 和旧版 JAWS 可能 fallback 到读文件名，现代浏览器则可能报 warning，但合规性优先
- 显式关联：
<label for="email">邮箱地址</label><input id="email" type="email">—— 所有主流阅读器都能准确映射 - 隐式包裹：
<label>手机号<input type="tel"></label>—— 更简洁，但需确保 input 是 label 的直接子元素 - 避免用
aria-label或aria-labelledby替代：它们在某些组合（如 Safari + VoiceOver）下可能失效或延迟生效 -
aria-label：控件本身无可见文本（如纯图标按钮、关闭 ×），直接提供可访问名称 -
aria-labelledby：名称来自页面其他元素（比如图表标题+说明），用 ID 引用，例如aria-labelledby="chart-title chart-desc" - ID 必须真实存在且唯一；ID 错了，
aria-labelledby就彻底失效，无声无息
alt="" 不是留空，是主动声明“跳过”
很多人把 alt="" 当作偷懒写法，其实它是 WCAG 2.1 AA 合规的关键动作。对装饰性图片（比如背景分割线、纯样式 icon），alt="" 告诉语音助手：“这张图无信息价值，请静默跳过”。填 alt="图片" 或干脆不写，反而会让语音助手硬读出冗余词，打断上下文流。
注意边界情况：
表单控件没配 label，语音助手只能读“编辑文本”
单独一个 <input type="email">，语音助手不会猜你要填什么——它只会报“编辑文本”，用户完全无法判断是填邮箱、手机号还是地址。这不是 API 能力问题，是语义缺失。
最可靠方案永远是原生 label：
aria-label 和 aria-labelledby 别混用
同时写两个属性，浏览器通常只认 aria-label，另一个被静默忽略——白写，还增加维护负担。选哪个取决于语义来源：
真正难的不是写对属性，而是让每个交互节点在可访问树里有明确、唯一、稳定的“名字”。语音合成只是把这棵树里的名字读出来——树歪了，声音再自然也没用。
