JavaScript不直接提升可访问性，关键在于不干扰默认语义和补全ARIA生命周期控制：优先用原生而非div模拟按钮；动态内容更新需用aria-live通知；表单控件必须有明确label关联；键盘焦点须清晰管理且不依赖视觉样式。
JavaScript 本身不直接提升可访问性，反而容易破坏它——关键在于「不干扰默认语义」和「补全缺失的 ARIA 生命周期控制」。
避免用 div + click 模拟按钮
这是最常见、破坏性最强的写法。屏幕阅读器不会把 div 当作可交互控件，键盘用户按 Enter 或 Space 也触发不了。
- ✅ 正确做法：优先用原生
<button></button>，需要提交表单时用<input type="button">或<input type="submit"> - ⚠️ 若必须用
div（如复杂 UI 组件），需同时加：role="button"、tabindex="0"、监听keydown处理Enter和Space - ❌ 错误示例：
<div onclick="doSomething()">点击我</div>—— 完全不可键盘操作，无角色声明，无焦点管理
动态内容更新时要通知屏幕阅读器
用 innerHTML 或 textContent 替换内容后，屏幕阅读器通常不会自动朗读，用户会感知“断连”。
- ✅ 推荐方案：用
aria-live区域捕获变化，例如：<div aria-live="polite" aria-atomic="true"></div>，然后向其中插入新文本 - ⚠️ 注意
aria-live的取值："off"（默认，不播报）、"polite"（等待当前语音结束）、"assertive"（立即中断播报）——不要滥用assertive - ✅ 补充技巧：对弹窗、提示等关键反馈，可用
document.activeElement配合focus()把焦点移到新内容容器，再加aria-label描述动作结果
表单控件必须有明确的 label 关联
JavaScript 动态生成的表单（如 SPA 中的搜索框、筛选项）常遗漏 label，导致屏幕阅读器无法告知用户“这是什么输入框”。
立即学习“Java免费学习笔记（深入）”；
- ✅ 最可靠方式：用
for属性绑定id，例如<label for="search-input">搜索关键词</label><input id="search-input"> - ⚠️ 若用
aria-labelledby，确保所引用的元素存在且文本可读（不能是空<span></span>或仅含图标） - ❌ 不要用
placeholder替代label—— 它在输入后消失，且部分屏幕阅读器不读取placeholder - ✅ 动态创建时，记得同步生成
id和for值，避免重复 ID（会混淆阅读器）
键盘焦点管理不能依赖视觉样式
很多 JS 组件（下拉菜单、Tab 栏、模态框）只靠 CSS 的 :focus 显示焦点轮廓，但用户关闭浏览器默认焦点样式（outline: none）后，就彻底“看不见焦点在哪”了。
- ✅ 必须为所有可聚焦元素提供清晰、高对比度的焦点指示，例如：
button:focus { outline: 2px solid #0066cc; outline-offset: 2px; } - ⚠️ 模态框打开时，用
inert属性或aria-hidden="true"+ 手动移除其他区域的tabindex，防止焦点逃逸 - ✅ 关闭模态框后，焦点应回到触发它的元素（保存
element.focus()前的document.activeElement） - ❌ 不要用
scrollIntoView()替代焦点管理 —— 它不改变焦点状态，键盘用户仍无法操作目标元素
可访问性不是加几个 aria- 属性就完事；它要求你始终清楚「当前谁在操作」「焦点在哪」「语义是否真实反映功能」——尤其当 JS 接管 DOM 后，这些信息更容易被悄悄抹掉。
