必须用aria-live的场景是动态插入内容且无焦点移动时，如搜索建议、实时评论、表单提示；需按紧急程度选polite/assertive/off，并挂载在承载内容的容器上，不可写在内部按钮或输入框上。
交互式组件的状态变化（比如开关切换、表单提交成功、错误提示）必须被屏幕阅读器感知，否则视障用户会完全错过关键反馈。只靠 CSS 显示/隐藏或 JS 改 class 是无效的——读屏器不会主动读取样式变更。
aria-live 必须用在哪些 DOM 容器上
动态插入内容且无焦点移动时，aria-live 是唯一能让读屏器播报的机制。常见但常被跳过的场景包括：搜索建议列表、实时评论流、表单验证失败提示、保存成功弹层。
- 必须挂载在承载消息的容器上，比如
<div id="feedback"></div>，不能写在内部按钮或输入框上 -
aria-live="polite"适合“已保存”“已加入购物车”这类非中断性反馈 -
aria-live="assertive"用于“密码太短”“邮箱格式错误”等需立即打断当前播报的错误 - 别留
aria-live=""或aria-live="off"后不移除属性——Lighthouse 会报错
通知开关状态该用 input type="checkbox" 还是 role="switch"
用 <input type="checkbox">，不是 role="switch"。前者语义准确、键盘支持完整（空格键可切换）、表单序列化天然兼容；后者需手动同步 aria-checked、处理键盘事件、维护焦点逻辑，纯增复杂度。
- 必须配
<label></label>，用for属性或嵌套方式绑定，否则点击文字不触发 - 视觉隐藏原生控件时，禁用
display: none或visibility: hidden——这会让读屏器彻底忽略它 - 推荐用视觉隐藏技术：
position: absolute; width: 1px; height: 1px; margin: -1px;等组合 - React 中状态受控必须用
checked+onChange，defaultChecked只在挂载时生效，props 更新不会触发 UI 变化
role="status" 和 role="alert" 怎么选
两者语义和播报行为完全不同，混用会导致读屏器误解意图。
-
role="status"配合aria-live="polite"，用于非紧急状态更新，如“正在加载…”“已同步” -
role="alert"配合aria-live="assertive"，仅用于需要用户立刻响应的中断性信息，如“登录失败，请重试” - 不要给普通提示加
role="alert"——频繁打断会损害体验，也违反 WCAG 4.1.3 -
aria-atomic="true"建议加上，确保整段消息被完整播报，避免只读出新增字符
最容易被忽略的是：消息容器必须始终存在于 DOM 中，不能每次显示时才 document.createElement 插入——读屏器对首次挂载的 aria-live 区域有延迟识别，且可能跳过初始内容。预设好元素，只更新 textContent 和显隐状态，才是稳定可靠的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
