Web 可访问性标签（Accessibility Label）

1. 基础概念
   Web 可访问性标签（Accessibility Label）是通过 aria-label 或 aria-labelledby 等属性为网页元素提供语义化名称的辅助技术接口。它帮助屏幕阅读器等辅助设备识别元素的用途，替代视觉文本内容或补充不可见元素的可访问性信息。例如，一个仅包含图标的按钮可通过 aria-label="搜索" 为视障用户明确功能。

2. 核心属性与语法

• aria-label：直接定义元素的语义标签，优先级高于元素内的文本内容。

  <button aria-label="关闭弹窗">X</button>
  

• aria-labelledby：通过指向其他元素的ID引用现有文本作为标签，适合关联复杂结构：

  <div id="chart-title">销售趋势图</div>
  <div aria-labelledby="chart-title" role="img">...</div>
  

• 原生HTML替代：<label> 元素关联表单控件（如 for 属性绑定 input 的ID），是优先于ARIA的方案。

3. 应用场景与优先级规则

• 无可见文本的元素：图标按钮、工具条控件。
• 复杂组件：表格、图表、选项卡需通过标签描述整体功能。
• 计算优先级：屏幕阅读器按 aria-labelledby → aria-label → 原生标签/元素内容的顺序选择标签值。若同时存在多属性，遵循ARIA覆盖HTML的原则。

4. 与相关属性的协作

• 与 aria-describedby 区分：标签描述核心功能（如“提交按钮”），描述提供补充信息（如“提交后无法修改”）。
• 与 aria-hidden 的协调：若某元素被标记为 aria-hidden="true"，其内容不会被计入标签计算。

5. 开发实践与检测

• 遵循渐进增强：优先使用原生HTML标签，ARIA作为补充。
• 工具验证：通过浏览器开发者工具的“无障碍检查”面板（如Chrome Accessibility Tree）或屏幕阅读器（NVDA、VoiceOver）测试标签是否被正确解析。
• 国际化注意：动态标签需随语言切换更新，避免残留旧语言标签。

6. 常见误区与优化

• 冗余标签：避免对已有明确文本的元素重复添加ARIA标签。
• 上下文缺失：标签需独立表意，例如使用“编辑{项目名}”而非仅“编辑”。
• 动态内容更新：通过 aria-live 区域声明实时变化的标签（如异步加载内容）。