alt属性是标签的强制必需属性，HTML5规范要求必须显式声明，空值alt=""仅适用于纯装饰图，缺失则导致验证失败、无障碍失效及屏幕阅读器无法传达图像语义。
alt 属性不是“可选补充”，而是 <img alt="alt属性有什么用_HTML alt图片替代文本屏幕阅读器优化" > 标签的强制要求——不写会触发 HTML5 验证失败，更关键的是，它直接决定视障用户能否理解你页面上的图像内容。
为什么浏览器报错 “Missing required attribute ‘alt’”
HTML5 规范明确定义 <img alt="alt属性有什么用_HTML alt图片替代文本屏幕阅读器优化" > 的 alt 为必需属性。即使你只是临时占位、用 CSS 背景图替代，只要用了 <img alt="alt属性有什么用_HTML alt图片替代文本屏幕阅读器优化" > 标签，就必须提供 alt 值。
- 空值
alt=""是合法且推荐的——适用于纯装饰图（比如分隔线、无语义 icon） -
alt="Loading"或alt="Image"这类泛化文本无效：它没传递图像在当前上下文中的作用 - CMS 或富文本编辑器自动填充的
alt="IMG_20260415_1022.jpg"等同于没写，必须人工清理 - 部分构建工具（如 Webpack + html-loader）会在编译时校验
alt，缺失会中断构建或报 warning
screen reader 怎么读 alt 属性
屏幕阅读器（NVDA、VoiceOver、JAWS）在遇到 <img alt="alt属性有什么用_HTML alt图片替代文本屏幕阅读器优化" > 时，**只读 alt 值，完全忽略 title**。如果 alt 缺失或为空但图像有实际含义，用户听到的就是“图片”两个字，后面一片空白。
- 功能性图像（如提交按钮）：应描述行为，
alt="Submit search"，而非外观alt="magnifying glass icon" - 内容型图像（如新闻配图）：需说明谁、在哪、做什么，
alt="Protesters holding 'Climate Justice' banners outside parliament, May 2026" - 图表类图像：alt 只需概括结论，细节放正文或
<figure><figcaption></figcaption></figure>中 - 装饰性图像：必须用
alt=""，不能省略属性，也不能写alt="decorative"—— 后者会被读出来，造成干扰
alt 和 title 完全不是一回事
title 是鼠标悬停才显示的提示框，属于锦上添花；alt 是图像失效或被读屏器访问时的唯一语义通道，属于基础设施。两者不能混用，也不该重复。
立即学习“前端免费学习笔记（深入）”；
-
title不被主流屏幕阅读器默认播报（除非用户手动开启“读取 title”选项） - 早期 IE 曾把
alt当 tooltip 显示，但这是 bug，现代浏览器已修复 - 把 logo 写成
<img src="logo.png" alt="Our Brand" title="Our Brand">属于语义冗余，且title对 SEO 几乎无影响 - 真正需要补充说明时，用
<figure></figure>+<figcaption></figcaption>更结构化、更无障碍友好
最容易被跳过的一环是上线前的人工抽查：禁用浏览器图片加载（Chrome DevTools → Network → Disable images），逐页确认所有 <img alt="alt属性有什么用_HTML alt图片替代文本屏幕阅读器优化" > 显示的文本是否准确传达了图像意图——算法和工具都替代不了这一步。
