不能直接用 <img> 当按钮，因其不可聚焦、不可提交、click事件在旧浏览器和无障碍场景下不稳定；应使用<button>包裹<img>或<label>+隐藏<input>实现语义正确、键盘友好、无障碍兼容的交互。
为什么不能直接用 <img> 当按钮
因为 <img> 本身不是可聚焦、不可提交、不响应 click 事件（在部分旧浏览器或无障碍场景下行为不稳定）的交互元素。单纯加 onclick 或 role="button" 不足以满足键盘操作（如空格/回车触发）、屏幕阅读器识别、表单提交等基本需求。
推荐方案：用 <button> 包裹 <img>
这是语义正确、兼容性好、无障碍友好的标准做法。浏览器原生支持聚焦、键盘触发、禁用状态样式继承，且无需额外 ARIA 补充。
-
<button type="button"><img src="icon.png" alt="删除文件"></button>——alt必须准确描述操作意图，不能写“图标”或留空 - 避免设置
width/height在<img>上导致拉伸；优先用 CSS 控制尺寸，保持宽高比 - 禁用时直接设
disabled属性，<button disabled>会自动禁用内部所有内容，包括图片和事件 - 若需响应表单提交，用
type="submit"并确保父<form>存在
替代方案：用 <label> + 隐藏 <input type="checkbox"/> 或 <input type="radio"/>
适合需要「开关状态」的图片按钮（如收藏、静音、主题切换），比 JS 切换 class 更可靠，天然支持 checked 状态、键盘空格切换、无障碍状态同步。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<input type="checkbox" id="mute-toggle" class="visually-hidden"><label for="mute-toggle"><img src="mute-off.png" alt="开启声音"></label>-
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }—— 安全隐藏 input 而不破坏可访问性 - 用 CSS 的
input:checked + label img切换图片 src 或背景图，避免 JS 操作 DOM
容易踩的坑
常见错误不是语法问题，而是交互链路断裂：
立即学习“前端免费学习笔记（深入）”；
- 只加
onclick却没处理键盘事件（Enter和Space键不触发）—— 改用<button>自动解决 -
alt写成 “按钮图标” 或 “点击此处” —— 屏幕阅读器会读出来，必须是动作结果，例如 “分享到微信” - 用
<a href="#"><img></a>并阻止默认行为 —— 会破坏历史记录、SEO、右键菜单，且href="#"触发页面跳顶 - 给
<div onclick="...">加tabindex="0"—— 缺少禁用态、缺少空格键支持、键盘焦点样式需手动补全，成本远高于用<button>
真正麻烦的从来不是怎么让图片看起来像按钮，而是让它在键盘、屏幕阅读器、禁用态、表单流里都表现一致。选对容器元素，后面的事就简单了。
