alt="" 与省略 alt 属性本质不同：前者是合法语义声明，后者属 html5 语法错误，会导致验证失败、无障碍审计扣分及旧版屏幕阅读器误读文件名。
alt="" 和完全不写 alt 是两回事
不是“差不多”，而是浏览器、屏幕阅读器、验证工具全部按不同规则处理。省略 alt 属于 HTML5 语法错误；alt="" 是合法且有明确定义的语义声明。
不写 alt 会触发哪些实际问题
现象比想象中更直接：W3C 验证器报错 Attribute “alt” is required；Chrome DevTools 的 Accessibility 面板立刻标红；Lighthouse 可访问性审计直接扣分；部分旧版屏幕阅读器（如 JAWS 早期）会读出 src 文件名，比如 IMG_20240512.jpg —— 用户完全不知道这是什么。
- CMS 或富文本编辑器上传时只填了“标题”字段，但模板没把值塞进
alt→ 实际渲染仍是无alt -
title属性不能替代alt，它只是悬停提示，对屏幕阅读器无效 - 用父容器加
alt（如<div alt="xxx"><img src="x.jpg"></div>）完全无效
alt="" 的正确使用场景和常见误用
alt="" 不是“懒得写”的快捷方式，而是明确告诉辅助技术：“这张图可安全忽略”。但它只适用于纯装饰性图片——删掉它，页面信息、操作、逻辑都不受影响。
- ✅ 正确：分隔线图
<img src="hr-line.png" alt="">、CSS 背景图降级用的占位图、列表前缀小圆点 - ❌ 错误：
<img src="logo.png" alt="">（logo 承载品牌识别）、<img src="cart-icon.png" alt="">（购物车图标参与交互） - ⚠️ 特别注意：
alt=" "（引号中间有空格）≠alt=""，前者会被读作“空白”，校验器报错，必须手动清空引号内所有字符
动态插入的 img 标签容易漏掉 alt
JS 创建的 document.createElement('img') 不会自动带 alt，必须显式赋值。框架里也一样：Yii2 的 Html::img() 必须传第二个参数数组，写成 Html::img('@web/images/logo.png', ['alt' => '公司首页'])；漏掉数组或写成 Html::img('@web/images/logo.png') 就等于没 alt。
- 响应式图片（
<picture></picture>+<source></source>）中，<img>自身仍需独立alt，<source></source>不继承也不替代 - SVG 图标若用
<img>引入，同样要设alt；若内联 SVG，则用aria-hidden="true"或<title></title>+role="img"处理，不能靠alt
alt=""，结果发现用户靠那个图标理解流程状态，或者 SEO 因缺失关键描述掉权。每次加图，先问一句：删掉它，用户还能完成当前任务吗？前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
