Web 可访问性描述（Accessibility Description）

1. 基础定义
   Web 可访问性描述是辅助技术（如屏幕阅读器）向用户提供的补充性文本说明，用于描述界面元素的用途、状态或关系。它通常通过 aria-describedby 属性关联到目标元素，或直接由 aria-description 属性定义。

2. 核心作用场景

   • 表单验证错误：输入框下方显示的错误提示文本，可通过 aria-describedby 与输入框关联，让屏幕阅读器读出错误详情。
   • 复杂操作说明：如图表编辑工具中，按钮的详细功能描述。
   • 动态状态更新：如进度条变化时，通过描述通知当前进度百分比。

3. 与「可访问性名称」的区别

   • 可访问性名称（如 aria-label）是元素的主标识（例如按钮名称“提交”）。
   • 可访问性描述提供附加信息（例如“提交后需等待 3 秒刷新页面”），两者互补但不重复。

4. 技术实现方式

   • 显式关联：

     <input aria-describedby="error-msg">
     <span id="error-msg">密码必须包含大写字母</span>
     

   • 直接定义：

     <button aria-description="点击后生成月度报告 PDF 文件">导出</button>
     

5. 设计原则与注意事项

   • 简洁性：描述需明确且简短，避免与名称重复。
   • 动态更新：若描述内容变化（如验证错误清除），需通过 aria-live 区域通知辅助技术。
   • 优先级：屏幕阅读器通常先朗读名称，再朗读描述。

6. 跨技术框架应用

   • React：通过 aria-describedby 绑定动态错误状态。
   • Vue：使用 :aria-describedby 绑定响应式数据。
   • WCAG 2.1 合规：需满足“信息与关系”准则（Success Criterion 1.3.1）。

7. 测试与验证

   • 使用浏览器开发者工具的「可访问性」面板检查描述是否正确关联。
   • 通过屏幕阅读器（如 NVDA、VoiceOver）实际测试描述朗读顺序与内容。