wai-aria 能提升可访问性，但滥用或误用不仅无效，还可能破坏屏幕阅读器体验，甚至引发法律风险；html 不报错不等于 aria 代码正确，必须严格遵循规范。
wai-aria 能提升可访问性，但滥用或误用不仅无效，还可能破坏屏幕阅读器体验，甚至引发法律风险；html 不报错不等于 aria 代码正确，必须严格遵循规范。
WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）是一套用于增强动态 Web 内容可访问性的技术规范，但它不是“加了就更好”的装饰性属性。虽然 HTML 解析器不会因错误的 aria-* 属性抛出运行时异常（如 <button aria-role="tab"> 这类非法写法仍能渲染），但这绝不意味着可以随意使用——恰恰相反，不合规的 ARIA 实践常导致辅助技术（如 NVDA、VoiceOver、JAWS）误解语义，使页面对残障用户完全不可用。
例如：
<!-- ⚠️ 危险示例：全局屏蔽所有内容 --> <body aria-hidden="true"> <h1>欢迎来到我的网站</h1> <nav>...</nav> <main>...</main> </body>
该代码会使屏幕阅读器仅播报页面标题（<title>），其余全部静默——用户将无法导航、阅读或交互，等同于功能失效。
W3C 明确提出 ARIA 使用的首要原则：
✅ “If you can use a native HTML element or attribute with the semantics and behavior you require, use it instead of re-purposing an element and adding ARIA.”
即：优先使用原生语义化 HTML（如 <button>、<nav>、<dialog>、<details>），而非用 <div role="button"> + aria-pressed 等组合模拟。
只有当原生 HTML 无法表达所需语义时，才应引入 ARIA。典型场景包括：
- 自定义组件：<div role="toolbar">、<ul role="tablist">、<li role="menuitemcheckbox">
- 动态状态反馈：aria-expanded="true"（配合手风琴展开）、aria-live="polite"（通知区域更新）
- 复杂控件关系：aria-controls="panel-1"、aria-labelledby="label-id"、aria-describedby="hint-id"
⚠️ 注意事项：
- 角色（role）与属性必须匹配上下文：role="checkbox" 必须配合 aria-checked，且不能用于 <input type="checkbox">（原生已支持）；
- 禁止覆盖原生语义：<button role="link"> 是反模式，会移除按钮的默认键盘行为（Enter/Space 触发）；
- 避免冗余标注：<img alt="Logo" aria-label="Logo"> 中 aria-label 被 alt 覆盖，属无效冗余；
- 验证不可省略：使用 axe DevTools 或 WAVE 扫描“机械性错误”（如 aria-label 加在 <html> 上——该元素不允许命名）。
最后，请明确：不使用 ARIA → 无需担心支持问题；一旦使用 → 必须按规范实现，并通过真实辅助技术测试。可访问性不是“有无”问题，而是“是否正确”的工程责任——它关乎合规底线，更关乎数亿用户的数字生存权。
