不补alt会导致可访问性审计失败且构建被拒；批量正则替换会误伤语义，alt=""仅适用于纯装饰图；工具如emlog-image-alt和eslint-plugin-jsx-a11y可兜底但需人工校验，真正关键在于依据上下文撰写描述性alt文本。
不补 alt 就算页面能跑，也过不了可访问性审计 —— W3C 验证器、Lighthouse、eslint-plugin-jsx-a11y 全部会报错，且 CMS 或静态站生成器（如 Hugo）可能直接拒绝构建。
为什么批量补 alt 不能靠正则硬替换
很多人试过用 sed 或编辑器正则把 <img src="</code"> 替成 <code><img src="alt=%22%22</code">，结果反而更糟：装饰图和内容图全被设成 <code>alt=""，等于主动屏蔽所有图像语义。屏幕阅读器用户听到“跳过一张图”，却不知道哪张该跳、哪张该读。
- 缺失
alt→ 构建工具报Element img is missing required attribute alt错误 -
alt=""→ 明确声明“无语义”，仅适用于纯装饰图（如deco-line.png） - 内容图（哪怕只是图标）必须带描述性文本，比如
alt="查看购物车"而非alt="购物车图标" - 链接内图片的
alt要说明目标动作，不是视觉特征
Emlog 插件 emlog-image-alt 的真实可用场景
它适合 Emlog 博客系统老站点快速兜底，但要注意它的行为边界：
- 只处理
<img>标签中alt属性完全缺失或值为空字符串（alt=""）的情况，已有内容不覆盖 - 批量修复时默认填入占位文案（如“图片”），需人工二次校验 —— 它不识别上下文，无法判断这张图是 banner 还是分隔线
- 可视化列表支持按文章分页查看，但预览缩略图依赖服务端 GD 库，若主机禁用则显示空白
- 插件启用后，新发布的文章仍需手动检查，它不监听实时写入
前端工程化中用 eslint-plugin-jsx-a11y 拦截漏网之鱼
在 React/Vue（模板编译为 JSX）项目里，光靠发布前手动补不现实。真正起效的是把它集成进开发流：
- 安装：
npm install eslint-plugin-jsx-a11y --save-dev - 配置
.eslintrc.js中加入规则："jsx-a11y/alt-text": "error" - 它会直接标记出所有没
alt的<img>，包括动态拼接的src（如<img src="%7BiconPath%7D">） - CI 流程中加
npx eslint src/**/*.{js,jsx,ts,tsx}，构建失败即阻断上线
Yii2 项目里 Html::img() 必须传 $options 数组
直接写 Html::img('/images/logo.png') 永远不会生成 alt —— 因为 alt 不是 $src 的一部分，必须显式塞进第二个参数：
Html::img('/images/logo.png', ['alt' => 'Acme 公司首页标识', 'class' => 'logo'])
常见踩坑点：
- 把
alt写在Html::a()的$options里，以为能透传给内部<img>—— 不行，层级不穿透 - 用空数组
[]当第二参数，但忘了加'alt'键 → 生成的标签依然没alt - 从数据库读取的富文本内容（如文章正文）里的
<img>，Html::img()不生效，得用后端过滤器或前端 DOM 解析补
真正难的不是补上 alt，而是决定每个 alt 该写什么——它取决于图像在当前上下文中的功能，而不是它长什么样。同一张二维码图，在支付页要写 alt="扫码完成付款"，在教程页就得写 alt="微信支付二维码示例"。机器无法替代人做这个判断，工具只能帮你守住底线：不让一个 alt 缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
