必须加role="button"的只有非<button>元素（如<div>、<span>、）被JS绑定点击逻辑且需作按钮使用时；加了须配套tabindex="0"及Enter/Space键监听，否则语义与行为脱钩。
ARIA 属性不是“加了就无障碍”，而是当原生 HTML 语义无法准确表达组件行为或状态时，才必须补上的那一句“人话”——用错地方、多加一个、少同步一次，都比不加更危险。
哪些元素必须加 role="button"？
只有非 <button> 元素（比如 <div>、<span> 或 <a>）被 JS 绑定点击逻辑，且用户需要把它当作按钮操作时，才需加 role="button"。
- 不加会导致键盘用户 Tab 不进去、Enter/Space 无响应，读屏器根本不知道这是可交互控件
- 加了之后必须手动支持
Enter和Space键触发相同逻辑，否则只是“告诉辅助技术它是按钮”，实际不能按 - 90% 的场景其实可以直接改用
<button>—— 它自带焦点、键盘行为、禁用状态和语义，省掉所有补丁
aria-label 和 aria-labelledby 怎么选不翻车？
关键看描述文本是否已在页面中可见：有就引用，没有才写死。
-
aria-labelledby指向一个或多个已有 ID 的可见元素，适合搜索框旁有<label id="search-label">查找商品</label>这类场景——文案更新、多语言切换时自动同步 -
aria-label是硬编码字符串，只用于纯图标按钮（如<button aria-label="删除"><svg></svg></button>）或上下文极明确的隐藏控件 - 绝对不要同时写两者：
aria-labelledby会被忽略，Lighthouse 直接报错；也别写<button aria-label="提交">发送</button>——“发送”会被静音
aria-hidden="true" 哪些地方绝不能乱加？
aria-hidden="true" 不是视觉隐藏开关，而是对辅助技术“彻底屏蔽该节点及其所有子节点”的指令，且不可被子元素覆盖。
立即学习“前端免费学习笔记（深入）”；
- 别给整个
<nav>或<body>加它来“隐藏背景”——模态框打开时，正确做法是用inert属性或tabindex="-1"+focus()锁定焦点 - 父元素设了
aria-hidden="true"，子元素再写aria-hidden="false"完全无效 - 纯装饰性图标、分隔线、加载占位符可用它，但前提是旁边已有可访问的文本说明（比如“用户名”旁的头像图标）
动态内容更新为什么 aria-live 必须配合 DOM 操作方式？
aria-live 区域能否被朗读，不只取决于属性是否存在，更取决于你如何更新它的内容。
- 用
innerHTML = "成功保存"替换整个区域会丢失绑定，读屏器大概率不播报 - 应优先用
textContent = "成功保存"或append()/insertAdjacentElement()等 DOM 插入方式，确保变化被辅助技术感知 -
aria-live="polite"适合一般提示（如表单成功），aria-live="assertive"只用于中断性错误（如密码错误），滥用会导致语音流混乱
真正容易被忽略的点在于：ARIA 属性必须和 JS 行为全量同步——aria-expanded="true" 却没展开面板，aria-checked="false" 却显示为选中，这种“假状态”比没状态更误导用户。
