alt属性是HTML中img标签的必需属性，必须显式声明；缺失会导致屏幕阅读器误读文件名，alt=""仅适用于纯装饰图，含信息图片须按上下文提供等价描述，动态插入图片需手动设置，链接内图片alt应说明动作目标而非外观。
alt 属性不是“填个描述就行”的可选字段，而是必须显式声明的必需属性；不写、写成 alt="undefined"、或错放在父标签里，都会让屏幕阅读器误读、SEO 失效、Lighthouse 直接报错。
alt="" 和不写 alt 的区别在哪
浏览器和辅助技术把 alt="" 理解为“这张图无语义，跳过”；而完全缺失 alt 属性，会被当成错误处理——部分读屏器会读出文件名（如 IMG_20240512.jpg），用户根本无法判断上下文。
- 装饰性图片（分隔线、背景花纹、纯样式 icon）→ 必须写
alt=""，不能删掉属性，也不能写alt="装饰" - 含信息的图片（哪怕只是 logo 或按钮图标）→ 必须写有意义的描述，如
alt="返回首页"，不是alt="home-icon.png" - 动态插入的图片（
document.createElement('img')）→ 必须手动设置el.alt = "描述"，不会自动继承
链接里的图片 alt 怎么写才对
当 <img> 是唯一可点击内容时，alt 的职责就从“描述图像”切换为“说明动作目标”。视障用户靠它决定是否点击，不是靠猜。
- 错误写法：
<img src="cart.png" alt="购物车图标">→ 用户听到“购物车图标”，但不知道点了会清空、结算，还是跳转到购物车页 - 正确写法：
<img src="cart.png" alt="查看购物车,当前有2件商品">→ 包含功能 + 状态，信息完整 - 同一张图在不同链接中出现？
alt必须重写。比如 logo 链接到首页写alt="返回首页"；若某处链接到品牌故事页，则得改成alt="了解品牌故事"
Yii2 中 Html::img() 怎么加 alt
Html::img() 的 $options 参数是唯一合法入口，alt 必须作为数组键传入；错塞进外层 Html::a() 的选项里，alt 就会挂在 <a> 标签上，对图片毫无作用。
立即学习“前端免费学习笔记（深入）”；
- 正确：
Html::img('@web/images/logo.png', ['alt' => '公司首页']) - 错误：
Html::a(Html::img('@web/images/logo.png'), '/', ['alt' => '公司首页'])→ 这个alt属于<a>，不是<img> - CMS 或富文本编辑器上传时，“替代文本”字段常为空或自动填文件名，这类值等于没写，且极难批量修正
SVG 和动态渲染图片容易漏掉 alt 吗
<svg> 本身不支持 alt，得用 <title> + <desc> 组合，并确保父容器有 role="img" 才会被读屏器识别；JS 动态渲染时，alt 常因异步加载、条件分支或状态未就绪被忽略，甚至设成 alt="undefined" —— 读屏器真会念出“undefined”。
- React/Vue 渲染图片：务必在 JSX 或模板中显式写
alt="描述"，别依赖 props 默认值 - 服务端渲染或静态 HTML 里手动加
alt很简单，但 JS 插入时要检查每个分支路径是否都设置了el.alt - CSS 背景图（
background-image）无法被爬虫和读屏器识别，此时需改用<img>，或额外用语义化 HTML +role="img"+ 文本替代
最常被忽略的其实是“同一张图在不同上下文中的语义变化”——它不是技术问题，而是内容判断问题。每次插入图片，花三秒想清楚：它在这里，到底是用来干什么的？
