名称中的标签

要求内容

若某按钮在屏幕上显示为”提交申请”，使用语音控制的用户应当能够通过说”点击提交申请”来触发点击操作。这一功能的实现前提是：可见标签必须包含在可访问名称中——最理想的情况是作为开头几个词。若可访问名称为”发送表单”而可见文本为”提交申请”，则语音命令将静默失败。

WCAG 要求可见文本标签必须是可访问名称的组成部分。可访问名称可以包含更多内容（用于补充说明上下文），但可见文本必须以相同的词序出现其中。

如何满足

• 对于具有文本的按钮和链接，无需额外处理——文本内容会自动成为可访问名称。
• 当为已有可见文本的控件添加 aria-label 时，应将可见文本置于开头：<button aria-label="提交申请 — 打开确认页面">提交申请</button>。
• 对于图标加文本的按钮，应以文本驱动名称，不得使用仅含图标的 aria-label 覆盖文本名称。
• 对于链接文本为”阅读更多”的情况，应通过 aria-label="阅读更多关于 WCAG 2.2 — 完整文章" 扩展可访问名称，确保可见的”阅读更多”仍作为前缀。
• 当控件的可见标签为图像（带文字叠加的图标、徽标）时，应确保 alt 与可见文本完全一致。

常见失败

• 显示”搜索”的按钮却带有 aria-label="查找"。语音用户说”点击搜索”，毫无响应。
• “加入购物车”按钮的 aria-label="将蓝色 T 恤 M 码加入购物车" —— 名称冗长，可见的”加入购物车”不再作为前缀。语音命令”点击加入购物车”无法命中。
• 图标加文本按钮中，设计者添加了 aria-label="购物车图标"，覆盖了可见的”结算”文本。
• 多语言站点中，可见文本已翻译，但 aria-label 仍为英文。
• 悬浮操作按钮显示”聊天”，却带有 aria-label="打开客服组件"。

重要性

本成功准则是语音控制用户无障碍访问的关键门槛——包括使用 Dragon NaturallySpeaking、iOS / macOS Voice Control、Android Voice Access 及 Windows Speech Recognition 的用户。对这些用户而言，可见标签即命令。名称不匹配不是轻微不便，而是”可操作”与”无法操作”之间的根本区别。此外，当有视力的辅助者说”点击保存按钮”时，屏幕阅读器读出的内容与屏幕上的文字一致，这也有助于屏幕阅读器用户跟进操作。成功准则 2.5.3 修复容易却极易被忽视，因为自动化工具几乎不会将其标记为问题——开发者看到 aria-label 便以为已处理妥当。应始终核对可访问名称与可见文本是否一致。