屏幕阅读器正确读出图标按钮含义的关键是提供清晰语义化的文本替代信息：优先使用aria-label直接标注操作意图，如“分享到微信”；其次可用aria-labelledby关联隐藏可见文本；禁用title和CSS伪元素；按钮必须为原生可交互元素。
让屏幕阅读器正确读出图标按钮的含义，关键在于为纯图标（无可见文字）的按钮提供清晰、简洁、语义准确的文本替代信息，而不是依赖视觉样式或空标签。
使用 aria-label 属性直接标注
这是最常用且推荐的方式。在图标按钮的 HTML 元素（如 <button> 或 <a>）上添加 aria-label，值为用户实际需要理解的操作意图，例如“删除此项目”“打开菜单”“放大图像”。避免模糊表述如“点击图标”或“一个垃圾桶”。
- ✅ 正确：
<button aria-label="分享到微信"><i class="icon-wechat"></i></button> - ❌ 错误：
<button aria-label="微信图标"><i class="icon-wechat"></i></button>
用 aria-labelledby 关联可见文字（适合有隐藏但可访问的文本）
当按钮旁有视觉隐藏但对辅助技术可见的文字（如用 CSS 的 sr-only 类），可用 aria-labelledby 指向该元素的 id。这种方式利于多语言或动态文案管理。
- 示例：
<span id="share-label" class="sr-only">分享当前页面</span><button aria-labelledby="share-label"><i class="icon-share"></i></button> - 注意：被引用的元素必须存在于 DOM 中，且内容应简明、动词开头、不包含标点冗余。
避免仅靠 CSS 生成内容或 title 属性
title 属性虽会被部分屏幕阅读器读出，但触发不稳定（需悬停或聚焦延迟）、不被所有用户代理支持，且常与工具提示混淆；CSS 伪元素（如 ::before）生成的内容则完全不可被读取。
- 不要依赖：
<button title="搜索"><i class="icon-search"></i></button> - 不要用 CSS 添加文字：
.icon-search::before { content: "搜索"; }—— 这段文字不会被识别为可访问文本。
确保按钮本身具有交互语义
图标按钮必须是原生可聚焦、可操作的元素（如 <button>），而非 <div> 或 <span> 加 click 事件。若必须用非按钮元素，需手动添加 role="button"、tabindex="0" 和键盘事件（Enter/Space 触发），否则屏幕阅读器无法将其识别为功能控件。
- ✅ 推荐：
<button type="button" aria-label="关闭弹窗"><i class="icon-close"></i></button> - ⚠️ 风险做法：
<div role="button" tabindex="0" aria-label="关闭弹窗" onclick="..."><i class="icon-close"></i></div>—— 需额外处理键盘行为，易出错。
