Web 可访问性标签（Accessibility Label）

1. 基本定义
   Web 可访问性标签是用于为界面元素提供明确语义描述的属性。它通过辅助技术（如屏幕阅读器）向用户传达元素的用途，替代或补充视觉文本内容。例如，一个仅有图标的按钮可通过标签被识别为“搜索”。

2. 技术实现方式

   • HTML 原生属性：
     aria-label 直接定义元素的语义标签（优先级高于元素内文本）：

     <button aria-label="关闭对话框">X</button>
     

     aria-labelledby 关联其他元素的ID作为标签源：

     <div id="password-hint">密码需包含大写字母</div>
     <input aria-labelledby="password-hint" type="password">
     

   • HTML 隐式标签：
     使用 <label> 标签关联表单控件：

     <label for="search">搜索关键词</label>
     <input id="search" type="text">
     

3. 应用场景与必要性

   • 图标按钮：如汉堡菜单按钮需标注“导航菜单”
   • 图形控件：自定义滑块需说明“调整音量”
   • 数据可视化：图表区域需通过 aria-label 描述趋势信息
   • 分块标识：用 aria-label 为 <section> 或 <div> 声明区域用途

4. 优先级与冲突处理
   标签解析按以下优先级生效：
   aria-labelledby > aria-label > 原生 <label> > 元素内部文本内容
   当多个属性共存时，屏幕阅读器仅读取最高优先级的标签。

5. 跨技术框架适配

   • React：通过 aria-label 属性传递动态值
   • Vue：使用 :aria-label="variable" 绑定数据
   • SVG：为图形元素添加 <title> 和 aria-label 双重保障

6. 测试与验证

   • 使用浏览器开发者工具检查无障碍树（Accessibility Tree）
   • 通过屏幕阅读器（如NVDA、VoiceOver）实际测试播报内容
   • 使用自动化工具（如axe-core）检测标签缺失或冲突

7. 设计规范整合
   遵循WCAG 2.1的“可识别性”原则：

   • 成功标准4.1.2要求所有交互组件必须具有可访问名称
   • 与角色（role）、状态（state）属性协同构建完整语义上下文