为仅含 SVG 图标的按钮添加 alt 属性（或 aria-label）是实现无障碍访问最直接有效的方式，可确保屏幕阅读器正确播报操作意图，无需依赖不可标记的伪元素内容。
为仅含 svg 图标的按钮添加 `alt` 属性（或 `aria-label`）是实现无障碍访问最直接有效的方式，可确保屏幕阅读器正确播报操作意图，无需依赖不可标记的伪元素内容。
在实际开发中，像 .delete 这类纯图标按钮（无可见文字）极易成为无障碍盲区——尤其当辅助信息仅通过 ::after 伪元素在悬停时动态显示时。由于伪元素无法绑定 id，自然也无法被 aria-labelledby 引用；而 :hover 状态本身对键盘用户、触屏用户及屏幕阅读器完全不可见，因此该方案本质上是不可访问的。
✅ 正确做法：为图标载体提供明确的可访问名称
推荐优先使用 <img alt="如何为无文本图标按钮提供无障碍支持" > 元素并设置语义化 alt 属性：
<button type="button"> <img src="unsplash.it/200/200" style="max-width:90%" alt="Delete entity" class="delete action-icon" /> </button>
✅ 优势：
alt是<img alt="如何为无文本图标按钮提供无障碍支持" >的原生无障碍属性，浏览器会自动将其作为按钮的可访问名称（accessible name）。屏幕阅读器将朗读为 “button, Delete entity”，与<button>Delete entity</button>行为一致。
⚠️ 注意事项：
-
alt值必须简洁、准确、动词导向（如"Delete entity"而非"trash icon"）； - 避免空
alt=""（会隐藏按钮）或冗余描述（如"icon for delete"）； - 若图标由
<svg></svg>内联实现，应配合<title></title>+aria-hidden="false"或直接使用aria-label（因<svg></svg>无alt属性）：
<button type="button" aria-label="Delete entity">
<svg class="delete action-icon" viewBox="0 0 24 24" focusable="false">
<title>Delete entity</title>
<!-- path data -->
</svg>
</button>❌ 不推荐方案：
- 仅依赖
::after悬停提示：对非鼠标用户无效； - 使用
aria-label在<img alt="如何为无文本图标按钮提供无障碍支持" >上覆盖alt：虽可行，但alt更标准、更健壮； - 移除
<img alt="如何为无文本图标按钮提供无障碍支持" >改用背景图 +aria-label：丧失语义结构，不利于高对比度模式及图片禁用场景。
总结：无障碍不是“锦上添花”，而是基础要求。只要图标承载操作语义，就必须通过 alt、aria-label 或 <title></title> 显式声明其功能。伪元素仅用于视觉增强，绝不能承担信息传达职责。
