WAI-ARIA 使用必须谨慎：正确性远比“无报错”更重要-html教程-PHP中文网

WAI-ARIA 使用必须谨慎：正确性远比“无报错”更重要

wai-aria 能提升可访问性，但滥用或误用不仅无效，还可能破坏屏幕阅读器体验，甚至引发法律风险；html 不报错不等于 aria 代码正确，必须严格遵循规范。

wai-aria 能提升可访问性，但滥用或误用不仅无效，还可能破坏屏幕阅读器体验，甚至引发法律风险；html 不报错不等于 aria 代码正确，必须严格遵循规范。

WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）是一套用于增强动态 Web 内容可访问性的技术规范，但它不是“加了就更好”的装饰性属性。虽然 HTML 解析器不会因错误的 aria-* 属性抛出运行时异常（如

例如：

<!-- ⚠️ 危险示例：全局屏蔽所有内容 -->

  <h1>欢迎来到我的网站</h1>
  <nav>...</nav><main>...</main>

该代码会使屏幕阅读器仅播报页面标题（

），其余全部静默——用户将无法导航、阅读或交互，等同于功能失效。<p>W3C 明确提出 <strong>ARIA 使用的首要原则</strong>：<br> ✅ <strong>“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.”</strong><br> 即：<strong>优先使用原生语义化 HTML</strong>（如 <button>、<nav>、<dialog>、<details>），而非用 <div role="button"> + aria-pressed 等组合模拟。<p>只有当原生 HTML 无法表达所需语义时，才应引入 ARIA。典型场景包括：</p> <ul><li>自定义组件：<div role="toolbar">、<ul role="tablist">、<li role="menuitemcheckbox"> <li>动态状态反馈：aria-expanded="true"（配合手风琴展开）、aria-live="polite"（通知区域更新）</li> <li>复杂控件关系：aria-controls="panel-1"、aria-labelledby="label-id"、aria-describedby="hint-id"</li> </ul> <p>⚠️ 注意事项：</p> <ul> <li> <strong>角色（role）与属性必须匹配上下文</strong>：role="checkbox" 必须配合 aria-checked，且不能用于 <input type="checkbox">（原生已支持）；</li> <li> <strong>禁止覆盖原生语义</strong>：<button role="link"> 是反模式，会移除按钮的默认键盘行为（Enter/Space 触发）；</button> </li> <li> <strong>避免冗余标注</strong>：<img alt="Logo" aria-label="Logo"> 中 aria-label 被 alt 覆盖，属无效冗余；</li> <li> <strong>验证不可省略</strong>：使用 <a href="https://www.php.cn/link/906fec3cca7ccc130fa2b1844aa10126" rel="nofollow" target="_blank">axe DevTools</a> 或 <a href="https://www.php.cn/link/99ee2d61ce22795acc55825466a1150f" rel="nofollow" target="_blank">WAVE</a> 扫描“机械性错误”（如 aria-label 加在上——该元素不允许命名）。</li> </ul> <p>最后，请明确：<strong>不使用 ARIA → 无需担心支持问题；一旦使用 → 必须按规范实现，并通过真实辅助技术测试</strong>。可访问性不是“有无”问题，而是“是否正确”的工程责任——它关乎合规底线，更关乎数亿用户的数字生存权。</p> </div> </li></ul> </div></details></dialog></nav></button></p>