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

用 aria-labelledby 关联可见文字（适合有隐藏但可访问的文本）

当按钮旁有视觉隐藏但对辅助技术可见的文字（如用 CSS 的 sr-only 类），可用 aria-labelledby 指向该元素的 id。这种方式利于多语言或动态文案管理。

• 示例：分享当前页面
• 注意：被引用的元素必须存在于 DOM 中，且内容应简明、动词开头、不包含标点冗余。

避免仅靠 CSS 生成内容或 title 属性

title 属性虽会被部分屏幕阅读器读出，但触发不稳定（需悬停或聚焦延迟）、不被所有用户代理支持，且常与工具提示混淆；CSS 伪元素（如 ::before）生成的内容则完全不可被读取。

• 不要依赖：
• 不要用 CSS 添加文字：.icon-search::before { content: "搜索"; } —— 这段文字不会被识别为可访问文本。

确保按钮本身具有交互语义

图标按钮必须是原生可聚焦、可操作的元素（如 ），而非

或 加 click 事件。若必须用非按钮元素，需手动添加 role="button"、tabindex="0" 和键盘事件（Enter/Space 触发），否则屏幕阅读器无法将其识别为功能控件。

• ✅ 推荐：

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何让屏幕阅读器正确读出图标按钮的含义》文章吧，也可关注golang学习网公众号了解相关技术文章。