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