必须为添加alt属性,因其是html规范强制要求的必需属性;缺省会导致可访问性校验失败、屏幕阅读器无法播报、seo受损,而alt=""明确表示图片无语义,应正确描述图像内容或链接目标。

必须加 alt,不是“建议”而是强制要求——HTML 规范里 <img> 是**空元素且 alt 为必需属性**,不写会触发可访问性(a11y)校验失败,屏幕阅读器无法播报,SEO 也会打折。
alt 属性必须写,但值可以为空字符串
很多人误以为“不写 alt”和“写 alt=""”是一回事,其实完全相反:
-
alt缺失 → 浏览器/辅助技术视为错误,可能跳过该图片,或报“图像无描述”警告 -
alt=""→ 明确声明该图无语义信息(比如纯装饰性分割线、背景花边),辅助工具会直接忽略它 -
alt="描述文字"→ 图像含信息时的正确写法,文字需简洁、准确、不冗余(例如不要写“一张……的图片”)
链接中的 img 标签,alt 要描述目标,不是图片本身
当 <img> 套在 <a></a> 里作为可点击入口时,alt 的职责就变了:它得告诉用户“点这个会去哪”,而不是“这图长啥样”。
常见错误是照搬视觉描述:
<a href="/products">@@##@@</a>
这会让屏幕阅读器用户听到“购物车图标”,却不知道点了干啥。应该改成:
<a href="/products">@@##@@</a>
- 如果图片同时含文字(如 banner 上带“5月大促”字样的图),
alt必须完整包含这些文字 - 避免用
alt堆砌关键词(如alt="电商网站 logo 红色购物车 在线商城"),搜索引擎已不买账,反而干扰辅助体验
Yii2 中用 Html::img() 添加 alt,别漏掉第二个参数
在 Yii2 项目里,直接写 HTML 很少,多数人用 Html::img() 生成标签。它的签名是 Html::img(string $src, array $options = []),alt 必须塞进 $options 数组里,不能拼在 $src 后面,也不能丢给外层标签。
错误写法(alt 完全没生效):
= Html::img('@web/images/logo.png') ?>
正确写法:
= Html::img('@web/images/logo.png', ['alt' => '公司首页']) ?>
-
['alt' => '公司首页']是唯一合法位置;其他属性如class、width也得放这里 - 若用
Html::a()包一层,alt仍属于img,跟a的class或title无关 - 路径别用绝对 URL 写死,优先用
@web或@baseUrl别名,避免部署后src错但alt对的尴尬
最常被忽略的一点:CMS 或富文本编辑器插入的图片,往往默认不带 alt,甚至后台字段都没暴露这个输入框——这时候得靠前端模板兜底,或者后端清洗 HTML,硬补 alt="",否则整站可访问性就塌了一角。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











