aria-label 给图标按钮加无障碍标签

什么是 aria-label

aria-label 是一个无障碍属性，专门用来为辅助技术（如屏幕阅读器）提供元素的文本描述。它不会在界面上显示，但会被屏幕阅读器读出，帮助视障用户理解当前元素的功能。

图标按钮通常只包含图标字体、SVG 或图片，没有任何可见文字。对于普通用户，他们可以凭借图标含义理解按钮，但屏幕阅读器无法读取图标，只能朗读“按钮”或其他无意义内容。aria-label 就是用来填补这个信息缺失的。

为什么图标按钮必须添加无障碍标签

• 屏幕阅读器无法识别图标
  图标是通过 CSS 背景、伪元素、SVG 等方式实现的，这些内容对辅助技术是透明的。如果没有文字替代，用户听到的就是“按钮”，功能完全未知。

• 遵守 WCAG 无障碍标准
  WCAG 2.1 成功标准 4.1.2 要求所有界面组件需要有名称、角色、值。图标按钮若不提供名称，即违反该标准。

• 提升所有用户的操作确定性
  即使在视觉上可识别，增加辅助标签能让认知障碍用户、纯键盘导航用户等更清晰地确认按钮功能。

如何正确使用 aria-label

基本语法

在 <button> 或具有 role="button" 的元素上添加 aria-label 属性，值为简练且描述功能的文本。

<button aria-label="关闭">
  <span class="icon-close"></span>
</button>

屏幕阅读器将朗读：“关闭，按钮”。

常见图标按钮示例

1. 搜索按钮

<button aria-label="搜索">
  <i class="fa fa-search"></i>
</button>

2. 菜单按钮（汉堡菜单）

<button aria-label="主菜单" onclick="toggleMenu()">
  <span class="hamburger-icon"></span>
</button>

3. 社交分享图标

<a href="#" aria-label="分享到微信" role="button">
  <img src="wechat.svg" alt="">
</a>

注意：<a> 元素如果从视觉和行为上充当按钮，需要添加 role="button"，并且可使用 aria-label 提供名称。如果图片本身有含义，应使用 alt 属性，但若图片仅为装饰（如社交图标），则 alt="" 并依靠 aria-label。

在 JavaScript 中动态更新

如果按钮功能会改变（如播放/暂停），应动态更新 aria-label 的值。

const btn = document.getElementById('play-btn');
btn.setAttribute('aria-label', '播放');

btn.addEventListener('click', function() {
  if (isPlaying) {
    this.setAttribute('aria-label', '暂停');
  } else {
    this.setAttribute('aria-label', '播放');
  }
});

aria-label 与替代方案的选择

对于图标按钮，aria-label 是最简单、最直接的实现方式，不增加额外DOM，不修改布局。

设计 aria-label 文本的最佳实践

• 使用功能性描述，而非视觉形状
  “关闭” 优于 “叉号图标”，“菜单” 优于 “三条横线”。
• 首字母大写或全小写保持一致
  建议采用首字母大写的短语，如“发送消息”。
• 不要包含“按钮”一词
  屏幕阅读器会自行播报角色（button），无需在标签内重复。
• 语言与页面主语言一致
  中文界面使用中文标签，确保用户理解。
• 简洁明确
  一个词能说明就不用短语，但必须准确表达动作。

常见错误与排查

1. 使用了 aria-label 但值放空
   <button aria-label=""><span class="icon"></span></button>
   屏幕阅读器仍会读出“按钮”，无任何功能提示。务必填写有意义的内容。

2. 误以为 title 属性够用
   title 属性并非所有辅助技术都稳定支持，不要将其作为唯一的无障碍手段。

3. 图标按钮有可见文字时仍用 aria-label
   例如：按钮内已有“搜索”文字，再加 aria-label="查找"，会导致冲突。应移除多余的 aria-label，或者使用 aria-labelledby 关联可见文字。

4. 在非交互元素上滥用 aria-label
   aria-label 仅能被部分角色支持，如 <div> 若不设置 role，添加 aria-label 可能被忽略。

测试方法

• 使用屏幕阅读器（如 Mac 的 VoiceOver、Windows 的 NVDA）实际操作，逐个浏览按钮，检查读出的内容是否符合预期。
• 利用浏览器开发工具查看无障碍树，确认按钮的“可访问名称”是否正确。
• 借助自动化检测工具（如 Lighthouse、axe）扫描页面，定位缺失标签的按钮。

总结

为图标按钮添加 aria-label 是前端无障碍开发中最基础、却最容易忽略的细节。短短一行属性，就能让辅助技术用户获得等价的交互体验。一定要养成习惯，凡是只有图标、没有可见文字的可操作元素，都为其配上精确、简洁的 aria-label。