wai-aria 能显著提升复杂组件的可访问性，但错误使用反而会破坏无障碍体验，甚至导致法律风险；它不是“加了就更好”的装饰属性，而是一套需严格遵循规范的技术方案。
wai-aria 能显著提升复杂组件的可访问性，但错误使用反而会破坏无障碍体验，甚至导致法律风险；它不是“加了就更好”的装饰属性，而是一套需严格遵循规范的技术方案。
WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）是一套为动态 Web 内容和富交互组件提供语义与状态信息的技术规范。它本身不会引发 JavaScript 错误或 HTML 解析失败——浏览器会静默忽略不支持或不合法的 ARIA 属性。但这绝不意味着可以随意添加、试错式使用。
⚠️ 首要原则：优先使用原生 HTML
W3C 明确指出：“If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state, or property to make it accessible, then do so.”
例如：
- 用 <button> 而非 <div role="button" tabindex="0" onclick="...">
- 用 <nav> 而非 <div role="navigation">
- 用 <input type="checkbox"> 而非 <span role="checkbox" aria-checked="false">
✅ 正确场景：当原生 HTML 无法表达语义时，才必须引入 ARIA。典型案例如：
<!-- HTML 无原生 "toolbar" 语义 --> <div role="toolbar" aria-label="编辑工具栏"> <button aria-label="加粗" aria-pressed="false">B</button> <button aria-label="斜体" aria-pressed="false">I</button> </div> <!-- 实现可访问的选项卡（tablist） --> <div role="tablist" aria-label="产品选项卡"> <button role="tab" aria-selected="true" id="tab1" aria-controls="panel1">详情</button> <button role="tab" aria-selected="false" id="tab2" aria-controls="panel2">评价</button> </div> <div role="tabpanel" id="panel1" aria-labelledby="tab1">...</div> <div role="tabpanel" id="panel2" aria-labelledby="tab2">...</div>
❌ 高危误用示例（务必避免）：
- <body aria-hidden="true"> → 整个页面内容对屏幕阅读器不可见（仅标题保留）
- <div role="button" aria-label="Submit">Click me</div> 缺少 tabindex 和键盘事件处理 → 无法键盘聚焦/操作
- <input aria-label="Email" aria-required="true"> → aria-required 对 <input> 无效（应使用 required 原生属性）
? 验证与测试建议：
- 使用自动化工具检测基础合规性：axe DevTools、WAVE
- 手动测试关键流：用 NVDA / VoiceOver + 键盘导航，验证焦点顺序、朗读内容、状态反馈是否准确
- 参考权威文档：WAI-ARIA Authoring Practices（含完整模式库与代码示例）
? 总结：
WAI-ARIA 不是“可选增强”，而是有法律效力的无障碍责任。它不因浏览器兼容性而免责——错误实现可能直接导致 WCAG 4.1.2（Name, Role, Value）等关键条款失败，进而引发合规质疑甚至诉讼。因此：不用 ARIA，无需担忧；一旦使用，就必须专业、精准、符合规范。
