ARIA 属性生成器

ARIA（Accessible Rich Internet Applications，可访问的富互联网应用）是由 W3C 制定的一套规范，用于增强 Web 内容对残障人士的可访问性。它通过 role、aria-* 属性和状态，为屏幕阅读器等辅助技术提供额外的语义信息，弥补原生 HTML 在复杂交互场景下的不足。ARIA 不会改变元素的视觉表现或行为逻辑，它只影响辅助技术如何解释页面内容。对于动态内容、自定义 UI 组件（如标签页、弹窗、自动补全等），ARIA 是不可或缺的无障碍保障手段。

应该使用 ARIA 的场景：

• 自定义交互组件（如自定义 select、滑块、树形控件）
• 动态内容更新区域（使用 aria-live 通知屏幕阅读器）
• 增强语义（如用 role="navigation" 标记导航）
• 状态指示（如 aria-expanded、aria-selected）

不必要使用 ARIA 的场景：

• 原生语义化 HTML 已能满足需求（如直接用 <button> 而非 <div role="button">）
• 纯装饰性元素无需添加 ARIA
• 规则很简单：优先使用原生 HTML，ARIA 作为补充而非替代

aria-label 直接提供一个字符串作为元素的辅助标签，适用于没有可见文本标签的情况（如仅图标的按钮）。
aria-labelledby 通过引用页面中其他元素的 id 来提供标签，支持多个元素拼接（空格分隔ID），适用于标签文本已存在于页面中的场景。
优先级：aria-labelledby > aria-label > 原生文本内容。二者同时存在时 aria-labelledby 会覆盖 aria-label。

aria-hidden="true" 用于从辅助技术中隐藏元素，使其对屏幕阅读器不可见。常见场景：装饰性图标、重复内容、关闭状态的弹窗内容、纯视觉分隔元素。
注意：不要将 aria-hidden="true" 放在可聚焦元素上（如按钮、链接），这会导致辅助技术用户无法操作该元素但视觉用户可以看到，造成困惑。对于需要隐藏的可聚焦元素，应同时使用 tabindex="-1" 或完全从 DOM 中移除。

aria-expanded 指示一个可展开/收起控件当前的状态（true=已展开，false=已收起）。
aria-controls 指定该控件所控制的目标元素 ID。
二者通常配合使用：展开按钮设置 aria-expanded="false" 和 aria-controls="panel-1"，当面板展开时更新为 aria-expanded="true"。屏幕阅读器会读出"已折叠"或"已展开"，帮助用户理解当前状态。常见于手风琴、下拉菜单、标签页切换等组件。

ARIA 角色分为六大类：
1. 抽象角色（仅供规范使用，开发者不应使用）
2. 窗口角色：dialog、alertdialog
3. 文档结构角色：article、document、heading、list、table 等
4. 地标角色：banner、navigation、main、complementary、contentinfo、search、form、region
5. 实时区域角色：alert、status、timer、log、marquee
6. 独立 UI 组件角色：button、checkbox、combobox、slider、tab、switch、progressbar 等
选择合适的角色是构建无障碍界面的第一步。

推荐以下测试方法：
1. 屏幕阅读器实测：使用 NVDA（Windows）+ Firefox、VoiceOver（macOS）+ Safari、或 JAWS 进行实际朗读测试
2. 浏览器开发者工具：Chrome DevTools → Accessibility 面板查看无障碍树
3. 自动化检测工具：使用 Lighthouse、axe DevTools、WAVE 等扫描工具
4. 键盘导航测试：确保所有交互元素可通过 Tab 键访问，Enter/Space 键操作
建议将多种方法结合使用，工具检测 + 人工实测才能覆盖全面。

语义化 HTML 优先于 ARIA。原生 HTML 元素（如 <button>、<nav>、<main>）自带隐式 ARIA 角色，浏览器和辅助技术天然支持。ARIA 应作为增强层使用：当原生 HTML 无法满足交互需求时（如自定义 tab 组件、自动补全），通过 ARIA 补充语义。一条黄金法则：能用原生 HTML 解决的，就不要用 ARIA 模拟。过度使用 ARIA 反而可能造成语义混乱。

aria-live 用于标记动态内容区域，使屏幕阅读器自动播报内容变化。取值：
off（默认）：不播报更新
polite：等待当前朗读完成后播报（适合一般通知）
assertive：立即中断朗读并播报（适合紧急通知，需谨慎使用）
常与 role="alert" 或 role="status" 配合使用。注意：内容更新时才播报，初始内容不会被自动读出。

常见错误：

• 在原生 button 上添加 role="button"（冗余，且可能干扰）
• 给不可聚焦元素添加交互角色但不设置 tabindex
• aria-labelledby 引用了不存在的 ID
• 忘记在状态变化时更新 aria-expanded / aria-selected
• 在 aria-hidden="true" 的元素上保留可聚焦子元素
• 使用不存在的角色名或属性名（拼写错误）
• 混淆 aria-label 和 aria-labelledby 的优先级

WCAG（Web内容无障碍指南）是国际标准，ARIA 是实现其技术要求的重要手段之一。WCAG 2.2 在 4.1.2 名称/角色/值 准则中明确要求：所有 UI 组件的名称、角色、状态和值必须能被辅助技术程序化获取。ARIA 正是满足这一要求的核心技术。使用正确的 ARIA 属性有助于满足 WCAG 的多个成功标准，包括 1.1.1（非文本内容）、1.3.1（信息和关系）、3.3.2（标签或说明）等。