用<img>模拟按钮时必须加role="button"和tabindex="0"，并监听keydown支持回车/空格；更推荐用<button>包裹<img>，设type="button"防提交，通过padding扩大点击区域，alt写动作描述，并做好图片加载失败降级。
用 <img> 模拟按钮时，必须加 role="button" 和 tabindex
单纯把 <img> 放在 <a> 或 <button> 里不等于它就是可交互按钮。屏幕阅读器不会自动识别图片为操作控件，键盘用户也按不到。正确做法是让图片本身具备按钮语义：
<img src="cart.png" alt="加入购物车" role="button" tabindex="0" onclick="addToCart(123)">-
alt必须描述动作（不是“购物车图标”），否则视障用户不知道点它能干嘛 - 必须加
tabindex="0"，否则键盘 Tab 键无法聚焦到这张图 - 记得监听
keydown事件，支持回车/空格触发，仅靠onclick不够
<button> 包裹 <img> 是更稳妥的写法
比裸用 <img> 更推荐：语义明确、默认可聚焦、自带空格/回车响应，且样式控制更自由。
- 写法：
<button onclick="addToCart(123)" type="button"><img src="cart.png" alt="加入购物车"></button> -
type="button"防止表单意外提交（尤其在<form>内） - 图片
alt仍要写动作描述，不要省略；按钮自身不需要额外aria-label - 注意默认按钮有内边距和背景，用 CSS 清掉或重置，否则图片周围可能有白边
点击区域太小？用 CSS 扩大可点击范围
原图尺寸小（比如 24×24px）时，手指或鼠标容易点偏。不能只放大图片，而应扩大点击热区。
- 给
<button>设置padding: 8px，再用line-height: 0或vertical-align: middle居中图片 - 避免用
width/height直接拉伸<img>，会模糊；用max-width: 100%配合容器控制 - 移动端建议最小点击区域 ≥ 44×44px，这是 iOS/Android 的无障碍推荐值
别忽略加载失败时的降级体验
网络慢或图片 404 时，用户看到的是缺省图标或空白，但按钮功能不能丢。
立即学习“前端免费学习笔记（深入）”；
- 确保
<button>文字内容不依赖图片：比如在<img>后加<span class="sr-only">加入购物车</span>（配合 CSS 隐藏但保留给读屏器） - 监听
img.onerror，动态插入文字或 fallback 图标 - 如果 JS 被禁用，纯 HTML 按钮至少要有跳转链接（如
<a href="/cart/add?id=123">），不能完全失效
