alt属性是html5强制必需属性，省略会导致验证失败、lighthouse报错及屏幕阅读器误读；alt=""表示无语义可忽略，缺失则被视作结构缺陷，必须按图片功能精准填写有意义的描述。

alt 属性必须写，不是“可选优化”，不写就是 HTML5 验证失败，屏幕阅读器会跳过或报错。

为什么 alt 不能留空或省略

浏览器解析时，<img src="logo.png"> 这种写法直接触发 HTML5 验证错误；Lighthouse 无障碍审计会标红 Image elements do not have [alt] attributes；读屏软件可能只读出“图像”二字，用户完全不知道上下文。显式写 alt="" 和不写是两回事：alt="" 表示“此图无语义”，辅助技术静默跳过；缺失则视为结构缺陷。

alt 值怎么写才合规

值的内容取决于图片用途，不是描述外观，而是说明功能或信息：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 功能性图片（如搜索按钮、首页 logo）：写行为，不是样子 —— alt="搜索"，不是 alt="放大镜图标"
• 用户头像：alt="用户张三的头像"，必须含“用户”+“姓名”+“头像”三要素
• 带文字的 banner（如“双11限时购”）：逐字复制可读文字，不加“图中显示”等冗余前缀
• 装饰性图片（分隔线、花边）：明确写 alt=""，不能写 alt="装饰线条"

动态插入图片时 alt 容易漏掉的场景

JS 或框架中创建 <img> 后，alt 不会自动继承或默认填充：

• 用 document.createElement('img') 后，必须手动设 el.alt = "描述"
• Vue/React 中绑定 src 时，忘了同步传入 alt prop（比如 <img :src="url" :alt="desc">）
• 把 alt 错写在外层容器上，如 <div alt="xxx"><img src=""></div> —— 浏览器只认 <img> 自身的 alt
• CMS 富文本编辑器上传图片，“替代文本”字段留空或填成 IMG_20240512.jpg —— 等于没写

长度和兼容性注意事项

WCAG 建议控制在 125 字符内，多数屏幕阅读器会在该长度后截断；不要用 title 替代 alt —— title 是鼠标悬停提示，不参与无障碍流程；alt 文本也不应出现在页面视觉层（它不显示，除非图片加载失败）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！