优先用aria-labelledby（有可见文本时），否则用aria-label；伪按钮需加role="button"并支持键盘事件；aria-hidden仅用于纯装饰；表单必配label或aria-label；成功提示需配合aria-live。
aria-label 和 aria-labelledby 用哪个？
看内容是否已有可见文本。有就用 aria-labelledby，让它指向那个元素的 id；纯图标、空按钮、隐藏控件就用 aria-label 直接写描述。
-
aria-labelledby是“引用式”，适合复用现有文案，屏幕阅读器会读出目标元素的文本内容 -
aria-label是“覆盖式”，会完全忽略元素内部文本，直接读你写的字符串——不小心写了就会覆盖掉本该读的内容 - 常见错误：
<button aria-label="提交">✓</button>没问题；但写成<button aria-label="提交">发送</button>就导致“发送”被静音，只读“提交”
role="button" 什么时候必须加？
当一个非 <button> 元素（比如 <div> 或 <span>）被 JavaScript 绑定了点击行为，并且用户需要把它当按钮操作时，就必须加 role="button"，否则屏幕阅读器根本不知道这是可交互控件。
- 不加
role，键盘用户按Tab进不去，按Enter/Space也没响应 - 加了
role="button"后，还必须手动支持键盘事件：Enter和Space都得触发相同逻辑 - 更推荐：直接用语义化
<button>，省去role和键盘事件补丁——90% 的“伪按钮”场景其实都能重构掉
aria-hidden="true" 别乱关屏幕阅读器
aria-hidden="true" 不是“视觉隐藏开关”，它是“对辅助技术彻底隐身”的指令。滥用会导致关键信息消失，尤其在动态内容或焦点管理中容易翻车。
- 别给整个弹窗容器加
aria-hidden="true"，除非你同时控制了焦点锁（focus trap）并确保弹窗内所有内容都可访问 - 常见误用：
<div aria-hidden="true"><img src="logo.png" alt="公司名"></div>→ 屏幕阅读器连 logo 文字都读不到 - 真正该用它的场景：纯装饰性图标（无交互、无信息）、重复的视觉分隔线、加载中的占位符（但要配
aria-busy="true"）
表单控件没 label 怎么补救？
没有 <label> 标签包裹或 for/id 关联的输入框，屏幕阅读器无法告知用户“这是什么字段”。不能靠 placeholder 救，也不能靠视觉位置猜。
立即学习“前端免费学习笔记（深入）”；
- 首选方案：补上
<label for="xxx">邮箱</label>+<input id="xxx"> - 次选（不可见 label）：
<input aria-label="搜索关键词">—— 仅限搜索框、筛选项等上下文极明确的场景 - 禁用方案：
placeholder="请输入邮箱"—— 它在输入后就消失，且不被所有屏幕阅读器识别为标签 - 注意兼容性：
aria-labelledby可跨元素组合描述，比如把图标 + 文字 + 输入框拼成一句：“密码强度：强，输入新密码”
aria-live 区域的配合——比如表单提交后提示成功，光靠视觉变化不行，得让屏幕阅读器主动播报，这又牵扯到 role="status" 和 aria-live 的取值时机。 
