alt 属性是 <img> 标签的必需属性，用于图像失效或无法感知时传达语义；空值 alt="" 仅适用于纯装饰图，不可用 title 替代，须以简明自然语言描述图像在上下文中的作用。
alt 属性是 <img> 标签里必须写的那个字符串，不是可有可无的“补充说明”，而是图像加载失败或无法被感知时，唯一能传达图像意图的文字通道。
为什么浏览器强制要求写 alt？
HTML5 规范明确将 alt 定义为 <img> 的必需属性。不写会触发验证警告，部分无障碍检测工具直接报错；更重要的是，屏幕阅读器完全依赖它读出图像内容——没它，视障用户就卡在一片空白里。
- 空值
alt=""是合法的，适用于纯装饰图（比如背景分割线、无信息的 icon） -
alt="Loading..."这类动态占位文本无效：它不是对图像内容的描述，也不解决语义缺失 - 搜索引擎也会用
alt判断页面主题相关性，乱填关键词（如alt="cheap shoes buy now"）反而可能被降权
alt 和 title 完全不是一回事
title 是悬浮提示，属于锦上添花；alt 是兜底方案，属于基础设施。两者用途、触发条件、无障碍支持程度都不同。
-
alt在图片 404、src 错误、禁用图片、使用读屏软件时生效 -
title只在鼠标悬停时由浏览器决定是否显示（Safari 早年甚至忽略它），且不被主流读屏器读取 - 别用
title替代alt，也别把两个写成一样（比如都写"Company logo"）——语义重复但功能错配
怎么写才算合格的 alt 值？
核心原则就一条：用最简短的自然语言，说清“这张图在当前上下文中起什么作用”。不是描述像素，而是传递意图。
立即学习“前端免费学习笔记（深入）”；
- 功能性图像（如提交按钮）：
<input type="image" src="submit.png" alt="Submit form"> - 内容型图像（如新闻配图）：
<img src="protest.jpg" alt="Crowd holding signs outside city hall, April 2026"> - 图表类图像：需概括结论，而非罗列数据（如
alt="Sales increased 12% in Q1, driven by mobile channel"） - 避免“图片显示”“图标”这类冗余词，屏幕阅读器已告知这是图像
最容易被忽略的一点：CMS 或富文本编辑器常自动补空 alt 或塞入文件名（alt="IMG_20260409_1153.jpg"），这种行为等于没写。上线前务必人工过一遍 <img> 标签。
