wai-aria 能显著提升复杂 ui 的可访问性，但滥用或误用反而会破坏辅助技术体验，甚至引发法律风险；它不是“加了就更好”的装饰属性，而是需严格遵循规范的语义增强机制。
wai-aria 能显著提升复杂 ui 的可访问性，但滥用或误用反而会破坏辅助技术体验，甚至引发法律风险；它不是“加了就更好”的装饰属性，而是需严格遵循规范的语义增强机制。
WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）是一套用于增强动态 Web 内容可访问性的属性标准。它并非“可选锦上添花”，而是在 HTML 语义不足以表达交互意图时的必要补充——但前提是正确使用。
✅ 正确使用的前提：优先用原生 HTML
W3C 明确提出 “First Rule of ARIA”: 不要用 ARIA，如果原生 HTML 已能实现同等语义和行为。
例如：
<!-- ❌ 不推荐：用 ARIA 模拟按钮语义 --> <span role="button" tabindex="0" aria-label="提交表单">Submit</span> <!-- ✅ 推荐：直接用原生 button --> <button type="submit">Submit</button>
原生
⚠️ 误用 ARIA 的真实风险
ARIA 属性不会在浏览器中抛出 JavaScript 错误，HTML 验证器也通常不报错，但这绝不意味着“无效即无害”。典型高危误用包括：
- aria-hidden="true" 应用于 或主容器 → 整个页面内容对屏幕阅读器不可见（仅剩标题）；
- 在非交互元素上添加 role="checkbox" 却未处理 aria-checked 状态切换与键盘事件（Space 键）；
- 给 添加 aria-label，但该元素本身不可聚焦且无交互语义 → 多数屏幕阅读器将忽略该标签（违反 ARIA Name Calculation 规则）。
这类问题不仅影响用户体验，更可能构成《美国残疾人法案》（ADA）或《欧盟 EN 301 549》标准下的合规缺陷，已有多个网站因可访问性缺陷被起诉。
✅ 何时必须使用 ARIA？
当构建以下HTML 无原生语义支持的组件时，ARIA 是 WCAG 2.1/2.2 合规的刚性要求：
UI 模式 HTML 缺失能力 必需 ARIA 示例 自定义 Tab 导航 无 、 语义 role="tablist" + aria-selected 工具栏（Toolbar） 无 toolbar 语义及组操作关系 role="toolbar" + aria-orientation 开关式菜单项 无“可勾选菜单项”状态表达 role="menuitemcheckbox" + aria-checked 动态加载区域反馈 无“区域更新后自动播报”机制 aria-live="polite" + aria-atomic 示例：一个纯 CSS/JS 实现的折叠面板（Accordion），需确保：
<h3 id="heading1" role="button" aria-expanded="true" aria-controls="panel1"> 常见问题 </h3> <div id="panel1" role="region" aria-labelledby="heading1" aria-hidden="false"> <p>这是展开的内容...</p> </div>
此处 role="button" 合理，因为
本身不可交互；但必须同步实现 keydown 监听（Enter/Space 切换）、aria-expanded 状态同步、以及焦点管理（如展开后将焦点移至面板内首个可聚焦元素）。
? 如何验证 ARIA 是否合规？
依赖自动化工具进行基础检查：
- axe DevTools（浏览器插件）：实时检测角色/属性冲突、命名缺失、隐含语义违规；
- WAVE Evaluation Tool：可视化标记 ARIA 错误与警告；
- 手动测试：务必使用 NVDA + Firefox / VoiceOver + Safari 进行真实辅助技术遍历测试。
? 关键提醒：自动化工具只能捕获约 30–40% 的可访问性问题（如逻辑流断裂、上下文缺失、手势替代方案缺失）。ARIA 的正确性最终取决于是否真正改善了残障用户的任务完成率，而非仅通过工具校验。
总结
你不需要为“是否该用 ARIA”而焦虑，但必须为“是否用对了 ARIA”保持敬畏。
- ✅ 零 ARIA → 安全，只要你的 UI 完全基于语义化 HTML（
- ⚠️ 使用 ARIA → 必须研读 WAI-ARIA Authoring Practices，按模式（Pattern）实现，配合真实辅助技术测试；
- ? 随意添加 ARIA → 比不用更危险，是可访问性退化的常见根源。
把 ARIA 当作手术刀，而非创可贴——精准、必要、受训后使用。
