优先用 aria-label 于纯图标按钮，aria-labelledby 于引用隐藏标签；role="button" 仅用于非原生按钮的模拟；aria-hidden="true" 禁止包裹交互元素；aria-live="polite" 用于非紧急更新，“assertive”仅限关键中断。
aria-label 和 aria-labelledby 哪个该用？
选哪个不看文档优先级，看实际 DOM 结构和内容来源。如果按钮文字是纯图标（比如 ✎），没有可见文本，用 aria-label 直接塞描述；如果按钮旁有隐藏但语义明确的标签（如 <span id="save-desc">保存当前编辑</span>），就用 aria-labelledby="save-desc"。
-
aria-label会完全覆盖元素的可访问名称（包括子文本），哪怕你写了<button>?</button>，加了aria-label="删除文件"，读屏器就只读“删除文件”，不会提“软盘图标” -
aria-labelledby是引用式，支持多 ID（空格分隔），且会按引用顺序拼接名称，适合组合多个语义块（如图标 + 状态提示） - 别混用：同时写
aria-label和aria-labelledby，后者会被忽略——浏览器只认一个可访问名称来源
role="button" 什么时候必须加？
不是所有点击元素都需要加 role="button"。只有当它本不是原生按钮、但行为完全等同于按钮时才加，比如用 <div> 或 <span> 模拟按钮，并绑了 click 和 Enter/Space 键事件。
- 原生
<button>、<input type="button">、<input type="submit">自带角色和键盘交互，加role="button"是冗余，还可能干扰某些旧读屏器 - 用
<a href="#">做按钮？危险。即使加了role="button"，它仍会触发跳转（除非preventDefault彻底拦截），且缺少原生按钮的禁用状态（disabled）语义 - 真要用非按钮标签，必须同步实现：键盘焦点管理（
tabindex="0"）、Enter/Space响应、视觉焦点样式、禁用态的aria-disabled="true"和对应样式灰显
aria-hidden="true" 为什么不能乱套在父容器上？
aria-hidden="true" 不是“视觉隐藏就加它”，它是向辅助技术宣告：“这个节点及其所有后代，全部从可访问树中剔除”。一旦加错位置，整块功能就对读屏器不可见。
- 常见误用：给弹窗外层
<div class="modal">加aria-hidden="true"，但没在打开时动态切为false——结果弹窗一出来，里面所有内容都“消失”了 - 更隐蔽的坑：父元素设了
aria-hidden="true"，子元素再设aria-hidden="false"也无效（ARIA 隐藏具有继承性，子元素无法绕过） - 正确做法：只对纯装饰性内容（如背景图标
<i class="icon-close"></i>）单独加；交互区域（按钮、表单控件）绝不能被aria-hidden包裹；模态框控制逻辑必须手动切换属性值
aria-live="polite" 和 "assertive" 怎么选？
这俩决定屏幕阅读器播报动态内容的打断强度。别凭感觉选，看用户是否需要立即中断当前操作。
立即学习“前端免费学习笔记（深入）”；
-
aria-live="polite"：等用户暂停阅读或操作完当前项再播报。适合表单校验提示、搜索建议、加载状态更新（如“已加载 3 条结果”） -
aria-live="assertive"：立刻中断，强制播报。仅用于关键错误或系统级通知（如“网络断开，请检查连接”），滥用会导致体验碎片化 - 必须配合
aria-atomic和aria-relevant控制播报粒度：-
aria-atomic="true"表示整个区域内容重刷时才播报（避免只改一个数字就反复读“1”“2”“3”） -
aria-relevant="additions text"可限制只响应新增文本，忽略属性变更
-
复杂点在于：live region 的内容必须是实时插入的 DOM 节点，不能靠 JS 改 innerText 后指望它自动触发；而且某些老版本 NVDA 对 aria-live 的初始渲染不敏感，首次挂载需加一小段延迟或触发一次 DOM 变更。
