alt属性是HTML中必需属性，用于在图像加载失败、屏幕阅读器读取或搜索引擎解析时提供准确、简洁、非冗余的替代文本；装饰性图片必须设为alt=""，不可省略或填充无效内容。
alt 属性不是可选的“补充信息”
它直接决定图片在多种关键场景下是否能被正确理解。浏览器加载失败、屏幕阅读器读取、搜索引擎解析图片内容，全依赖 alt 值。空字符串 alt="" 和缺失 alt 属性语义完全不同：前者明确表示“该图无文字等价内容”，后者会让辅助技术尝试猜测或跳过，反而更糟。
什么时候必须写 alt，什么时候可以为空
判断核心是：这张图是否承载了页面中不可替代的信息？
- 含关键信息的图（如产品示意图、流程图、带文字的截图）→ 必须写准确、简洁的描述，比如
alt="MacBook Pro 14寸侧面接口布局：从左至右为MagSafe、HDMI、两个Thunderbolt 4" - 纯装饰性图片（如分隔线、背景花边、仅起视觉修饰作用的 icon）→ 应设为
alt=""，**不能省略**，也不能写“装饰图”之类无效文本 - 链接内只有图片且无其他文本（如 logo 链接）→
alt必须说明链接目标，例如alt="返回首页"，而非“公司 logo”
SEO 和可访问性共用一套 alt 规则
搜索引擎不会因你堆砌关键词而加分；相反，alt="买手机 手机价格 手机官网" 这类写法会被视为垃圾内容。真实有效的 alt 同时服务两类用户：
- 屏幕阅读器用户靠它理解上下文，所以需包含对象+动作/状态（如
alt="购物车图标，当前有3件商品"） - Google 图片搜索依据
alt匹配查询，但只信任自然、具体、与图一致的描述 - 避免使用 “图片”、“图像” 开头——屏幕阅读器已告知这是
img，重复冗余
常见错误：自动填充、CMS 默认值、复制粘贴
很多 CMS 或建站工具会默认填入文件名（如 alt="IMG_20240512_153042.jpg"），或统一设为“无标题”。这类值等于没有 alt。更隐蔽的问题是批量替换时把所有图都设成相同文案，比如全部写成 alt="产品图"。
立即学习“前端免费学习笔记（深入）”；
实际检查建议：
- 用浏览器开发者工具过滤所有
img标签，快速扫一遍alt值是否为空、重复、无意义 - 禁用图片加载（Chrome DevTools → Network → Disable cache + 勾选 “Disable images”），看页面信息是否断裂
- 用 VoiceOver（macOS）或 NVDA（Windows）朗读页面，听是否出现意外停顿或含糊描述
@@##@@ @@##@@ @@##@@真正难的不是写 alt，而是每次插入图片前多问一句：如果这个图完全看不见，用户还能完成当前任务吗？答案决定了你该写什么。
