无障碍

ARIA 无障碍富互联网应用 ARIA - 无障碍 | MDN 无障碍富互联网应用（Accessible Rich Internet Applications，ARIA）是一组角色和属性，用于定义使残障人士更易于访问 web 内容和 web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。 它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持无障碍 JavaScript 小部件、表单提示和错误消息、实时内容更新等。 使用 ARIA 的第一规则是“如果你能够使用原生的 HTML 元素或属性，并且有你需要但已经建立在里面的语义和行为，而不是重新调整元素的用途并添加 ARIA 角色、状态或者属性来使它更加无障碍，那么你就应该如此。” aria-role、aria-hidden WEB无障碍工具 Lint 扫描工具 - 开发阶段 axe Accessibility Linter 检查代码中常见的无障碍问题 浏览器插件 - 开发、测试、生产阶段 axe-Tools、intelligent Guided Testing

补充

补充：ARIA（Accessible Rich Internet Applications）是为屏幕阅读器等辅助技术补充语义的一套属性集合，包括 roles、states、properties。

关键概念：

• Roles（角色）：标识元素类型，如 role="button"、role="navigation"、role="dialog"、role="alert"。
• States / Properties：描述元素当前状态或属性，如 aria-expanded、aria-hidden、aria-label、aria-describedby、aria-live。
• ARIA 第一规则：能使用原生 HTML（<button>、<nav>、<dialog>）就用原生，不要为了 ARIA 而放弃语义。

常用属性：

• aria-label → 给元素加可读标签；
• aria-labelledby → 引用其他元素作为标签；
• aria-describedby → 引用说明文字；
• aria-live="polite|assertive" → 动态内容播报；
• aria-hidden="true" → 对辅助技术隐藏（不要在可聚焦元素上使用）。

工具与检测：

• 开发期：eslint-plugin-jsx-a11y、axe Accessibility Linter。
• 浏览器扩展：axe DevTools、WAVE、Lighthouse Accessibility。
• 用户测试：键盘 Tab 导航、屏幕阅读器（VoiceOver / NVDA）走查。

补充：可访问性不仅是合规要求，也直接受益于 SEO、移动端体验和老年用户，值得在组件库设计中内建。