健壮性要求HTML原生语义正确、结构完整，不可依赖ARIA补救或JS动态覆盖；必须用等语义标签，表单需id/for绑定，避免无效HTML和SSR与客户端DOM不一致。
健壮性不是“加ARIA就完事”
健壮性（Robust）的核心是：HTML必须能被各种用户代理——尤其是屏幕阅读器、语音控制工具、旧版浏览器——稳定解析。它不依赖JavaScript补救，也不靠ARIA强行“打补丁”。很多开发者误以为加了 aria-label 或 role="button" 就算达标，但若底层HTML本身语义错误或结构破碎，辅助技术仍会跳过、误读甚至崩溃。
必须用对语义化标签，不能只靠div+ARIA
WCAG 2.1 AA 明确要求内容通过标准HTML Accessibility API Mappings暴露结构。这意味着：、、、 这些标签不是“可选装饰”，而是解析入口。屏幕阅读器靠它们构建导航树，而不是靠你写的 div + role="navigation"。
- ✅ 正确：
- ❌ 危险：
—— 多余嵌套、冗余role、丢失原生语义 - ⚠️ 注意：
和不可互换；表示独立可分发内容（如博客正文），是主题分组，乱用会导致屏幕阅读器朗读逻辑错乱
表单控件必须有合法的id和for绑定
健壮性要求表单控件与标签之间建立**可被解析的程序化关系**。仅靠视觉对齐或CSS定位无效。所有 、、 必须满足以下任一条件：
- 显式
+，且id值全局唯一、无空格/特殊字符 - 隐式包裹：
- 仅当完全无可见标签时，才退而使用
aria-label；但aria-labelledby优先于aria-label（因为它复用已有文本节点，更健壮） - 禁止：
（无for，无包裹，无ARIA）—— 屏幕阅读器无法关联
避免无效HTML和JS动态覆盖DOM结构
健壮性失效常发生在运行时。比如用 innerHTML 插入未转义的字符串，或用JS反复 removeChild/appendChild 破坏原有语义层级，都会导致辅助技术缓存失效或中断监听。
- ❌ 危险操作：
el.innerHTML = ""—— 若字符串含未闭合标签或非法嵌套，解析器可能截断或重排 - ✅ 推荐：
document.createElement("button")+el.appendChild()，确保节点类型合法、属性可控 - ⚠️ 特别注意：SSR渲染后由React/Vue做hydration时，若服务端HTML与客户端初始DOM结构不一致（如缺
alt、多嵌套div），部分屏幕阅读器会拒绝读取后续更新
健壮性最易被忽略的点，是把它当成“兼容老IE”的遗留问题。其实现代问题更多来自过度依赖框架抽象、忽视原生HTML约束、以及把ARIA当万能胶水——而WCAG健壮性恰恰要求你退一步，让HTML自己说话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
