alt属性是影响可访问性、SEO和用户体验的关键字段，须据图片作用精准设置：装饰性图片用alt=""，功能性图片说明操作（如“搜索”），信息性图片简洁概括内容，复杂图片辅以figcaption补充。
图片的 alt 属性不是可有可无的装饰，而是影响可访问性、SEO 和用户体验的关键字段。写得好，屏幕阅读器能准确传达信息；写得模糊或空着，会直接损害内容传达效果。核心原则是：用简洁自然的语言，描述图片“在当前上下文中真正起什么作用”。
纯装饰性图片（不传递信息）
比如分隔线、背景花纹、仅用于排版的留白图。这类图片对理解内容毫无帮助，应设为 alt=""（空字符串），而非 alt="装饰" 或 alt="图片"——后者反而会让屏幕阅读器读出无意义的词。
- ✅ 正确：
- ❌ 错误：
功能性图片（带操作意图）
如按钮图标、链接缩略图、提交按钮上的放大镜。alt 应说明“点击后做什么”，而不是描述图形本身。
- ✅ 搜索按钮：
- ✅ 返回首页链接：
- ✅ 商品图链接：
信息性图片（传递具体内容）
图表、照片、截图、信息图等。alt 要概括核心信息，避免冗长，不写“图中显示…”这类套话，也不堆砌所有细节。
立即学习“前端免费学习笔记（深入）”；
- ✅ 产品主图：
- ✅ 数据图表：
- ✅ 教程截图：
复杂图片（需额外说明时）
信息密度高（如流程图、组织架构图、详细信息图），单靠 alt 难以说清，就用 alt 给简明摘要，再配合 figure + figcaption 或邻近文字补充。
- ✅ 流程图：
完整流程含 4 个步骤，支持邮箱或手机号注册 - ✅ 带文字的宣传图：alt 描述画面主体 + 关键文案，例如
alt="蓝色背景海报，中央大字'限时免息'，下方小字'至8月31日，最高12期'"
不复杂但容易忽略：alt 是内容的一部分，不是技术附注。每次插入图片，花三秒想清楚——它在这里，到底是用来干什么的？
