alt 属性是强制必需项，缺失或错误会导致屏幕阅读器误读、lighthouse 报错、wcag 失败；装饰图用 alt=""，信息图需有意义描述，链接内图片 alt 应说明动作目标，cms/框架中须显式设置且不可省略。
alt 属性不是“可选补充”，而是强制必需项；漏写、空缺、填错位置或塞无效内容，都会让屏幕阅读器误读、Lighthouse 报错、WCAG 校验失败。
img 元素必须显式声明 alt，缺失和 alt="" 完全不同
浏览器和辅助技术把 alt="" 理解为“这张图无语义，可忽略”；而完全不写 alt 属性，会被当作错误处理——部分屏幕阅读器会读出文件名（如 IMG_20240512.jpg），用户根本无法判断上下文。
- 装饰性图片（分隔线、背景花边、纯样式 icon）→ 必须写
alt=""，不能删掉属性，也不能写alt="装饰图" - 含信息的图片（哪怕只是 logo 或按钮图标）→ 必须写有意义的描述，如
alt="返回首页"，不是alt="home-icon.png" - 动态插入的图片（JS 创建
document.createElement('img')）→ 必须手动设置el.alt = "描述"，不会自动继承
链接中的 img，alt 要说明“点这个去哪”，不是“这图长啥样”
当 <img> 是链接内唯一可点击内容时，alt 的职责就从“描述图像”切换为“说明动作目标”。视障用户靠它决定是否点击，不是靠猜。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 错误写法：
<img src="cart.png" alt="购物车图标">→ 用户听到“购物车图标”，但不知道点了会清空、结算，还是跳转到购物车页 - 正确写法：
<img src="cart.png" alt="查看购物车,当前有2件商品">→ 包含功能 + 状态，信息完整 - 同一张图在不同链接中出现？
alt必须重写。比如首页 logo 链接到首页，alt是"返回首页"；若某处 logo 链接到品牌故事页，alt就得改成"了解品牌故事"
CMS、框架和富文本编辑器里 alt 极易被覆盖或漏掉
很多 CMS（如 WordPress、Drupal）或富文本编辑器（如 CKEditor、TinyMCE）上传图片时，“替代文本”字段默认为空或自动填入文件名。这类值等于没写，且极难批量修正。
- Yii2 中用
Html::img()生成标签时，alt必须塞进第二个参数数组：Html::img('@web/images/logo.png', ['alt' => '公司首页'])；写成Html::img('@web/images/logo.png')就完全没alt - Shopify Polaris 的
Image组件强制要求alt参数，不传会报类型错误；Thumbnail和Icon组件也分别通过alt或accessibilityLabel暴露可访问性文本 - 别把
alt错写在父容器上（如<div alt="xxx"><img></div>），无效且误导
长度、格式与常见陷阱
alt 内容长度建议控制在 125 字符内（WCAG 推荐上限），技术上最多支持 1024 字符；禁止堆砌关键词、嵌入 HTML 标签、写冗余描述（如“图片：”“图标：”）。
- 避免
alt="蓝色运动鞋图片"→ 去掉“图片”二字，直接alt="蓝色运动鞋,侧面有反光条,白色鞋底" - 禁用
title属性替代alt——title是工具提示，不是替代文本，旧版 IE 的渲染偏差已成历史误区 - SVG 图标不用
alt，而应使用accessibilityLabel（Polaris）、aria-label或<title></title>元素包裹
最常被忽略的一点：动态内容（如 JS 渲染的图片列表、React/Vue 组件内插值）无法靠静态扫描发现 alt 缺失，必须在运行时检查 DOM 节点是否真实存在 alt 属性并有有效值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
