alt是html强制必需属性，缺失会导致屏幕阅读器跳过、lighthouse报错、seo失效；必须显式声明alt=""（装饰图）或语义化描述（功能图），不可省略、不可填空格、不可用title或父容器替代。

HTML图片不能“降级成纯文本”，但alt属性就是浏览器和辅助技术在图片不可用时唯一能展示/朗读的文本替代方案——它不是备选文案，而是语义强制要求的必填字段。

为什么alt缺失会导致页面“失语”

不写alt不是“少个属性”，是让<img>变成一个语义黑洞：屏幕阅读器跳过、Lighthouse报错Image elements do not have [alt] attributes、Google图片搜索几乎不索引。更实际的是，图片加载失败时，用户只看到空白方框+一串src路径（比如/imgs/product-001.jpg），完全不知道原图意图。

必须显式写，哪怕值为空字符串：alt="" ≠ 不写 ≠ alt=" "（带空格会被朗读为“空白”）。

alt值怎么填才不算乱写

核心就一条：用自然语言回答“这张图在当前上下文里起什么作用”。不是描述形状，不是堆关键词，不加“图中显示”“一张……的照片”这类冗余前缀。

• 信息图/产品图/截图：直接转述关键信息，比如alt="iPhone 15 Pro 钛金属边框特写，右侧对比A17芯片多核性能提升22%"
• 图标按钮（搜索、购物车、返回首页）：写动作目标，不是外观，比如alt="搜索商品"、alt="查看购物车"
• 装饰性分隔线/背景花边：必须用alt=""，不是删掉属性，也不是填alt="装饰"
• 同一张图在不同位置出现：alt必须重写。首页轮播里的logo写alt="XX科技官网首页"，商品详情页里同张图就得写alt="XX科技旗舰手机产品Logo"

动态渲染时alt最容易掉链子

React/Vue里用alt={data.desc}这种写法，一旦data为空或字段未定义，就会渲染出alt="undefined"或alt="IMG_20240512_1023.jpg"——CMS后台上传时默认填文件名，等于没写。

Article To Html

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

下载

安全写法要带 fallback：

• React：alt={data?.desc || "无描述图片"} 或更严格地 alt={data?.desc || ""}
• Vue：:alt="item.description || '加载中的示意图'"
• CMS后台：强制校验「图片描述」字段非空，否则拒绝提交；未填则自动 fallback 为alt=""

特别注意：<svg></svg>内嵌图不支持alt，得用<title></title>配合role="img"。

别把title当alt用，也别塞进<div>里 <p>常见失效场景：</p> <ul> <li> <code><div alt="错误位置"><img src="x.jpg"></div> → 浏览器只认<img>自身的alt

<img src="x.jpg" title="点开看大图"> → title只是悬停提示，对无障碍零贡献

CSS background-image承载关键内容 → 背景图无法加alt，必须改用<img>或补充aria-label

最常被忽略的其实是富文本编辑器——微信公众号草稿箱虽支持HTML，但粘贴进来的图片若没手动补alt，上传后就是裸<img src="...">，等同于放弃所有无障碍与SEO收益。