HTML 如何给图片添加合适的 alt 属性(不同场景写法模板)

alt属性是影响可访问性、SEO和用户体验的关键字段,须据图片作用精准设置:装饰性图片用alt="",功能性图片说明操作(如“搜索”),信息性图片简洁概括内容,复杂图片辅以figcaption补充。

图片的 alt 属性不是可有可无的装饰,而是影响可访问性、SEO 和用户体验的关键字段。写得好,屏幕阅读器能准确传达信息;写得模糊或空着,会直接损害内容传达效果。核心原则是:用简洁自然的语言,描述图片“在当前上下文中真正起什么作用”。

纯装饰性图片(不传递信息)

比如分隔线、背景花纹、仅用于排版的留白图。这类图片对理解内容毫无帮助,应设为 alt=""(空字

符串),而非 alt="装饰"alt="图片"——后者反而会让屏幕阅读器读出无意义的词。

  • ✅ 正确:
  • ❌ 错误:(多余干扰)

功能性图片(带操作意图)

如按钮图标、链接缩略图、提交按钮上的放大镜。alt 应说明“点击后做什么”,而不是描述图形本身。

  • ✅ 搜索按钮:
  • ✅ 返回首页链接:
  • ✅ 商品图链接:

信息性图片(传递具体内容)

图表、照片、截图、信息图等。alt 要概括核心信息,避免冗长,不写“图中显示…”这类套话,也不堆砌所有细节。

  • ✅ 产品主图:
  • ✅ 数据图表:
  • ✅ 教程截图:

复杂图片(需额外说明时)

信息密度高(如流程图、组织架构图、详细信息图),单靠 alt 难以说清,就用 alt 给简明摘要,再配合 figure + figcaption 或邻近文字补充。

  • ✅ 流程图:
    完整流程含 4 个步骤,支持邮箱或手机号注册
  • ✅ 带文字的宣传图:alt 描述画面主体 + 关键文案,例如 alt="蓝色背景海报,中央大字'限时免息',下方小字'至8月31日,最高12期'"

不复杂但容易忽略:alt 是内容的一部分,不是技术附注。每次插入图片,花三秒想清楚——它在这里,到底是用来干什么的?