alt=""是显式声明图像无语义，屏幕阅读器静音跳过；不写alt是属性缺失，会导致验证失败、读屏器误读文件名或报“图像”，两者语义与处理方式完全不同。
alt="" 和不写 alt 的语义完全不同
这是最常被误解的一点：两者在规范、工具校验和辅助技术行为上完全不是一回事。不写 alt 是缺失属性，alt="" 是显式声明“无语义”。浏览器和读屏软件会按不同逻辑处理。
屏幕阅读器对两者的实际处理差异
NVDA、VoiceOver 等主流读屏工具对它们的响应截然不同：
-
<img src="deco-line.png">→ 读作 “deco line dot png” 或直接报 “图像”，用户无法判断用途 -
<img src="deco-line.png" alt="">→ 静音跳过，符合 WCAG 1.1.1 要求 -
<img src="logo.png" alt="Acme 公司标识">→ 正确播报品牌信息 -
<img src="search.png" alt="搜索">→ 功能性描述，明确交互意图
构建工具和验证器的报错逻辑
HTML5 规范强制要求 alt 为必需属性，所有主流工具都据此校验：
- W3C 验证器：报错
Element img is missing required attribute alt - ESLint +
eslint-plugin-jsx-a11y：默认禁止缺失alt，但允许alt="" - Lighthouse：标记
Image elements do not have [alt] attributes为严重可访问性问题 -
alt=" "（含空格）会被当作有效值，但读屏器可能读出“空白”，等同于错误
哪些图真能用 alt=""？判断标准很具体
不能凭“看起来像装饰”就随便设 alt=""。核心只看一条：
- 移除这张图，页面的信息完整性、功能可用性、交互逻辑是否完全不受影响？
- ✅ 典型可用场景：
<img src="dot.png" alt="">（列表项前缀，语义由<ul></ul>承担）；老浏览器兜底的分隔线图；CSS 已实现背景效果时的冗余<img> - ❌ 绝对不可用：
<img src="cart-icon.png">（按钮图标）；含文字的截图；品牌 logo；用户头像；哪怕只是“点赞”小图标——只要它承载操作意图，就必须写有意义的alt
动态插入的图片（比如 JS 用 document.createElement('img') 创建）不会自动带 alt，漏设就是缺失，不是空值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
