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.”
例如：

• 用 而非
  用

  而非

  用 而非

  ✅ 正确场景：当原生 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>

  ❌ 高危误用示例（务必避免）：

  • → 整个页面内容对屏幕阅读器不可见（仅标题保留）
  • Click me
    缺少 tabindex 和键盘事件处理 → 无法键盘聚焦/操作
  • → aria-required 对 无效（应使用 required 原生属性）

  ? 验证与测试建议：

  • 使用自动化工具检测基础合规性：axe DevTools、WAVE
  • 手动测试关键流：用 NVDA / VoiceOver + 键盘导航，验证焦点顺序、朗读内容、状态反馈是否准确
  • 参考权威文档：WAI-ARIA Authoring Practices（含完整模式库与代码示例）

  ? 总结：
  WAI-ARIA 不是“可选增强”，而是有法律效力的无障碍责任。它不因浏览器兼容性而免责——错误实现可能直接导致 WCAG 4.1.2（Name, Role, Value）等关键条款失败，进而引发合规质疑甚至诉讼。因此：不用 ARIA，无需担忧；一旦使用，就必须专业、精准、符合规范。