优先用 aria-label 于图标按钮等无文本控件，用 aria-labelledby 复用已有可见文案；自定义按钮必须加 role="button" 并支持空格键；aria-hidden="true" 需同步处理 tabindex；表单必配 label，禁用 aria-label 替代。
aria-label 和 aria-labelledby 怎么选
当按钮或链接的视觉文本不完整（比如只显示“编辑”图标），屏幕阅读器需要额外说明。用 aria-label 直接写描述最简单，但会完全覆盖原有文本；aria-labelledby 则引用页面中已有的可见元素 ID，适合复用已有文案、避免重复维护。
- 用
aria-label：图标按钮、纯 SVG 按钮、动态生成无文本控件（如<button aria-label="删除第3项"></button>） - 用
aria-labelledby：表单字段旁有明确标题（如<label id="name-label">姓名</label><input aria-labelledby="name-label">），且该 label 不是<label for>关联时 - 别混用：同时存在
aria-label和aria-labelledby时，多数浏览器只读aria-label，后者被忽略
role="button" 什么情况下必须加
不是所有可点击的东西都会被屏幕阅读器识别为按钮。原生 <button> 或带 type="button" 的 <input> 自动有 button role；但用 <div> 或 <span> 模拟按钮时，必须显式加 role="button"，否则键盘用户按空格/回车无法触发，且不会被朗读为“按钮”。
- 必须加：自定义组件如
<div onclick="..." tabindex="0">提交</div>→ 改成<div role="button" tabindex="0" onclick="..."> - 别乱加：已有语义的元素（如
<a href="#">）不该加role="button"，否则破坏链接语义，影响键盘导航逻辑 - 配套动作：加了
role="button"就得支持空格键触发（不只是回车），否则交互不一致
aria-hidden="true" 的隐藏陷阱
aria-hidden="true" 告诉辅助技术“忽略这个元素”，但它**不等于 CSS 的 display: none 或 visibility: hidden** —— 元素仍在 DOM 中、仍可聚焦、仍可能被键盘导航到。
- 常见错误：给下拉菜单加
aria-hidden="true"但没移除tabindex，导致键盘用户卡在不可见元素上 - 正确做法：隐藏时同步设
tabindex="-1"，或更好——用hidden属性（它自带aria-hidden="true"+ 移除焦点能力） - 慎用于父容器：如果父元素
aria-hidden="true"，子元素即使设aria-hidden="false"也无效（继承强制隐藏）
表单控件缺 label 时怎么补救
没有 <label for> 或包裹关系的 <input>，屏幕阅读器无法关联提示文字。优先用原生 <label>，实在不行再用 ARIA 补。
立即学习“前端免费学习笔记（深入）”；
- 首选：用
<label><input>邮箱</label>或<label for="email">邮箱</label><input id="email"> - 次选：用
aria-labelledby引用附近可见文本（如表格头、段落），但需确保引用目标稳定、不被 JS 动态删改 - 禁用
aria-label：它会让输入框失去上下文（比如只读“邮箱”，但不知道是“注册邮箱”还是“备用邮箱”） - 注意：
placeholder不是 label 替代品，它在输入后消失，且很多屏幕阅读器默认不读
事情说清了就结束。真正难的不是加几个属性，而是每次改 DOM 结构时，都得同步检查焦点流、语义层级和辅助技术反馈是否还对得上。
