装饰性图片应该写 alt="" 还是干脆去掉 img 标签?

装饰性图片应保留标签并设置alt="",而非删除标签;纯装饰图用alt="",功能性图片需描述性alt文本,CSS背景图应避免使用。

装饰性图片应该写 alt="",而不是直接去掉 标签。

原因很简单:如果图片纯粹用于视觉装饰(比如背景花纹、分隔线、纯图标无信息量),它对内容传达没有实质作用,屏幕阅读器不该读出任何描述。此时空 alt 属性(alt="")是标准做法,明确告诉辅助技术“忽略这张图”。

去掉 标签反而可能引发新问题:

  • 如果图片由 CSS 实现(如 background-image),那确实不该用
  • 但若已用 标签加载装饰图,直接删掉标签可能破坏布局(比如父容器依赖图片占位)、影响 CSS 选择器逻辑,或导致 JS 脚本出错(比如监听了该图片的加载事件)。

所以关键不是“删不删”,而是“怎么语义化地处理”。

以下几种情况对应不同处理方式:

纯装饰图(如边框、底纹、无意义图标)

  • 保留 标签
  • 必须写 alt=""
  • 不要写 alt=

    " "
    (带空格)或 alt=" decorative"(会误读)
  • 示例:

有实际功能或含义的图(如按钮图标、流程图中的箭头、品牌 logo)

  • 不能留空 alt
  • 需提供简明准确的文字替代(哪怕只有几个字)
  • 示例:

用 CSS 背景图实现的装饰效果

  • 不该用 ,改用 background-image + aria-hidden="true"(如果 DOM 中仍需保留占位元素)
  • 因为背景图本就不属于文档内容流,也不被辅助技术识别

响应式或动态插入的装饰图(如 JS 渲染的装饰元素)

  • 仍需确保最终渲染出的 alt=""
  • 避免 JS 插入时遗漏 alt 属性(常见疏漏)

不复杂但容易忽略。