装饰性图标必须写 alt="",否则违反html规范且影响可访问性;判断标准是删除该图是否影响内容理解;yii2中需通过数组参数显式传入 alt=>'';背景图不可见,故不适用alt。

装饰性图标必须写 alt="",不写或乱填都算错误
浏览器不会报错,但可访问性检测工具(如 axe、Lighthouse)会直接标红,屏幕阅读器可能重复播报“图片”或跳过关键内容。HTML 规范明确要求 <img> 的 alt 是必需属性——缺省是语法错误,alt="" 才是合法的“无语义”声明。
常见错误现象:
-
<img src="icon-star.png">—— 缺alt,校验失败,辅助技术行为不可控 -
<img src="icon-star.png" alt="星形图标">—— 语义冗余,“图标”二字对用户无信息增量 -
<img src="icon-star.png" alt="star">—— 文件名照搬,无助于理解上下文
正确做法只有一条:确认该图纯属视觉修饰、无功能、无信息承载,就写 alt=""。
什么时候算“装饰性”?看它删掉会不会影响理解
判断标准不是“小不大”“有没有颜色”,而是用户不看这张图,是否仍能准确理解当前段落、按钮、分隔区域的作用。
- 导航栏里和文字并排的箭头图标:
alt=""(文字已说明“查看更多”,箭头只是强化视觉) - 文章段落之间的花式分割线:
alt=""(删掉它,段落逻辑依然清晰) - 按钮左侧的加载动画
spinner.gif:alt=""(状态由按钮文字或 ARIA 属性表达,动效本身无独立语义) - 但如果是“✅ 已完成”里的对勾图,且旁边没文字——就不能空
alt,得写alt="已完成"
Yii2 中用 Html::img() 写空 alt 容易漏参数
Html::img() 第二个参数是数组,alt 必须作为键值对塞进去,不是拼在路径后,也不是靠外层标签带进来。
错误写法:
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
Html::img('/images/icon-search.png')
正确写法:
Html::img('/images/icon-search.png', ['alt' => ''])
如果还要加 class 或 width,统一放进同一个数组:
Html::img('/images/icon-search.png', ['alt' => '', 'class' => 'icon', 'width' => 16])
漏掉第二个参数,alt 就彻底消失,等同于没写。
用 CSS 背景图替代 <img> 时,alt="" 不起作用
这是最容易被忽略的盲区:把装饰性图标从 <img> 换成 background-image 后,你根本不用(也不能)写 alt。但必须确保它真不需要语义——因为背景图对屏幕阅读器完全不可见,连 alt="" 的“显式忽略”机会都没有。
所以迁移前要再问一遍:这个图标删掉,用户还能否完成操作、理解当前状态?如果答案是否定的,就别用背景图,老实用带 alt="" 的 <img>。










