alt文本需真实简洁描述图片内容及用途，装饰图用alt=""，图标按钮描述功能而非形状，aria-label和title不能替代alt，响应式图片共享同一alt，动态图片须确保alt非空且有意义。
alt 文本不是 SEO 关键词堆砌区
搜索引擎确实读 alt，但只当它是对图片内容的真实、简洁说明。塞一堆“HTML 教程、前端开发、免费下载、高清图”进去，既不会提升排名，反而让屏幕阅读器用户困惑，还可能被判定为作弊信号。
实操建议：
- 用一句话说清「图里有什么 + 为什么放这张图」，比如：
<img src="chart.png" alt="2024 Q1 用户留存率下降 12%，主要因新用户次日流失上升"> - 纯装饰图（如分隔线、背景花纹）必须写
alt=""（空字符串），不是删掉alt属性，也不是写alt="decorative" - 图标按钮（如放大镜、齿轮）要描述功能，不是形状：用
alt="搜索"，别用alt="放大镜图标"
aria-label 和 title 不是 alt 的替代品
aria-label 是给交互元素（按钮、链接）补充可访问性文本的，title 是悬停提示，两者都不参与图片语义解析。浏览器和读屏软件在图片缺失时只依赖 alt。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
- 写了
title="点击查看大图"就不加alt→ 图片加载失败时，盲人用户完全不知道这是什么 - 用
aria-label覆盖图片：无效，<img aria-label="首页 banner" alt="HTML图片alt文字怎么优化_HTML媒体描述标签使用【详解】" >不会被读屏识别为图片描述 - 同时写
alt和title且内容重复 → 多余，且title在移动设备上基本不可见
响应式图片的 alt 怎么写
<picture></picture> 或 srcset 只影响「哪张图被加载」，不改变「图的含义」。所有 <source></source> 和 <img alt="HTML图片alt文字怎么优化_HTML媒体描述标签使用【详解】" > 共享同一个 alt，不能为不同尺寸写不同描述。
使用场景：
- 同一张信息图，有 1x/2x 版本 →
alt写一次就够了 - 艺术性裁剪（如桌面版展示全景、手机版只截人脸）→ 仍需统一描述核心内容，避免歧义；若语义差异极大，应拆成不同图片+不同
alt - SVG 内嵌在 HTML 中时，
<svg></svg>必须配<title></title>（不是title属性），且需包裹在<svg aria-hidden="false"></svg>中才能被读取
动态生成图片的 alt 容易漏掉
后端模板或 JS 渲染时，alt 常被硬编码成空值、占位符（如 "image"）或直接忽略。这类图片在无障碍测试中几乎 100% 报错，且无法被自动化修复。
关键检查点：
- CMS 后台上传图片时，是否强制填写「描述」字段并映射到
alt？没填就 fallback 到文件名（需清洗，如product-001.jpg→product-001不如留空） - React/Vue 中用
v-bind:alt="item.desc || ''"，别用v-bind:alt="item.desc"（undefined 会渲染成字面量undefined） - 服务端 SSR 渲染时，确保
alt值非空字符串、非 null、非 undefined —— 空格字符也要 trim
最常被忽略的是用户头像：<img src="/avatar/123" alt="用户头像"> 毫无信息量。应该用用户名（脱敏后）或角色，比如 alt="管理员 张明" 或 alt="团队成员头像"。
