alt=""和不写alt在屏幕阅读器中表现完全不同：前者明确声明图像无语义，读屏器静音跳过；后者未声明意图，读屏器可能朗读文件名或报“图像”，造成信息断层，且html5规范强制要求alt为必需属性。
alt="" 和不写 alt 在屏幕阅读器中表现完全不同
很多人以为“不写 alt”等于“这张图不重要”，其实正好相反：alt="" 是主动声明“无语义”，而缺失 alt 是未声明状态，辅助技术会退而求其次——读出 src 文件名（比如 "cart-icon-2026.png"）或直接报“图像”，用户完全不知所云。
实际测试中，NVDA 和 VoiceOver 对两者的处理差异明显：
-
<img src="deco-line.png">→ 读作“deco line dot png”，干扰严重 -
<img src="deco-line.png" alt="">→ 静音跳过，符合 WCAG 1.1.1
HTML5 验证和构建工具对两者报错逻辑不一致
W3C 验证器、ESLint + eslint-plugin-jsx-a11y、Lighthouse 等工具都把缺失 alt 视为硬性错误，但对 alt="" 完全放行。关键区别在于：HTML5 规范明确定义 alt 是必需属性（required），不是 optional。
常见触发报错的场景包括：
- 省略
alt→ 报错Element img is missing required attribute alt - 写了
alt=" "（含空格）→ 报错Attribute value should not be only whitespace - 用 CMS 后台填了标题字段，但模板没把值注入
alt→ 渲染结果仍是缺失，等同于没写
哪些图真能用 alt=""？判断标准很具体
不能凭“看起来像装饰”就随便设 alt=""。核心判断依据只有一条：移除这张图，页面的信息完整性、功能可用性、交互逻辑是否完全不受影响？
能用 alt="" 的典型例子：
- CSS 已实现分割线，
<img src="dot.png">仅作老浏览器兜底 - 列表项前缀小圆点，语义由
<ul></ul>和 CSSlist-style承担 - 标题旁纯装饰性花纹图，无点击、无 hover、无上下文绑定
不能用 alt="" 的反例：
- 按钮图标（如搜索放大镜）→ 应写
alt="搜索"或alt="展开筛选条件" - 含文字的截图（如错误提示
ERR_CONNECTION_TIMED_OUT）→ 必须复述全部关键文本 - 品牌 logo → 应写
alt="Acme 公司标识"，而非alt="logo"
alt="" 和 title 完全不是一回事
title 是鼠标悬停时的提示，对屏幕阅读器默认不读，搜索引擎也不用于理解图片内容。把它当 alt 用，等于放弃无障碍和 SEO 基础。
更隐蔽的问题是：某些构建工具（如 ESLint + eslint-plugin-jsx-a11y）会直接禁止 title 出现在 <img> 上，认为这是误导性写法。
真正需要工具提示时，应：
- 包裹一层
<figure></figure> - 或用
aria-describedby关联外部描述节点 - 而不是依赖
title
复杂点在于：很多“看起来只是装饰”的图，其实悄悄参与了信息传达——比如流程图里的连接箭头、loading 动画中的状态指示符。这类图一旦设成 alt=""，就等于在可访问性上开了个口子，而且很难被自动化工具发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
