如何让屏幕阅读器正确读出图标按钮的含义

在网页中使用图标按钮可以让界面更简洁，但如果处理不当，使用屏幕阅读器的用户将完全不知道按钮的作用。要让屏幕阅读器正确读出图标按钮的含义，核心思路是给按钮提供可被辅助技术识别的文本信息，而不是仅展示一个图形。

为什么图标按钮会有可读性问题

图标按钮通常只包含一个 svg 或 i 标签绘制的图形，内部没有文字。屏幕阅读器在遍历 DOM 时，如果按钮没有可访问名称，就会读出无意义的标签名，或者直接跳过，导致用户无法操作。

使用 aria-label 提供按钮名称

最简单的方式是在按钮元素上添加 aria-label 属性，其值就是屏幕阅读器会读出的内容。

<button aria-label="搜索">
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle cx="7" cy="7" r="5"></circle>
    <line x1="11" y1="11" x2="15" y2="15"></line>
  </svg>
</button>

使用 aria-labelledby 关联可见或隐藏文本

当页面中已有描述文字时，可以用 aria-labelledby 指向该元素的 id，从而复用文本作为按钮名称。

<span id="delText" class="visually-hidden">删除项目</span>
<button aria-labelledby="delText">
  <i class="icon-trash"></i>
</button>

用视觉隐藏文字兜底

如果不想写 ARIA，也可以在按钮里放一段对屏幕可见性为隐藏、但对屏幕阅读器可读的文字。

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

注意事项

• 不要只依赖 title 属性，部分屏幕阅读器不会读它。
• 如果按钮内有文字，就不需要 aria-label，避免重复。
• 图标字体本身没有语义，必须靠上述方案补充。

小结

让屏幕阅读器正确读出图标按钮的含义，关键是给按钮一个明确的可访问名称。合理使用 aria-label、aria-labelledby 或视觉隐藏文字，就能在不改变视觉设计的前提下完成无障碍适配。

无障碍访问ARIA屏幕阅读器图标按钮accessibility修改时间：2026-07-25 10:33:24