img标签必须带alt属性，它是图像的文本等价物；装饰性图片用alt=""，内容性图片需准确描述功能或含义，响应式图片中仅<image>需设alt，且须契合上下文语义。
img 标签必须带 alt 属性，否则不符合 WCAG 和 HTML5 规范
HTML5 明确要求 <img> 元素必须有 alt 属性（即使为空），否则文档在验证时会报错，屏幕阅读器也会提示“图像缺失描述”。不写 alt 或写成 alt="" 但没想清楚是否真该为空，是实际开发中最常踩的坑。
-
alt值不是“可选补充”，而是图像的**文本等价物**——它替代图像本身传递信息 - 装饰性图片（如分隔线、纯背景图）才用
alt=""；只要图像承载内容（哪怕只是图标），就必须描述其功能或含义 - 避免
alt="图片"、alt="logo"这类无意义值；应写alt="公司名称首页Logo"或alt="搜索按钮图标"
怎样判断该写具体描述还是留空 alt=""
关键看图像是否向用户传达了不可被忽略的信息。不是看“有没有文字”，而是看“删掉这张图，页面逻辑/操作是否受损”。
- ✅ 应写描述：产品图、错误提示图标、流程步骤图、带文字的 banner 图（需描述文字+意图）
- ✅ 可为空：
<img src="dot.gif" alt="">这类纯视觉修饰；CSS 已实现的 icon 字体或 SVG 且已用aria-hidden="true" - ❌ 禁止省略：
<img src="warning.png">—— 缺alt会让视障用户完全不知道有警告
alt 内容长度与上下文强相关，不是越短越好
WCAG 并不限制字数，而是强调“恰当传达目的”。同一张图，在不同位置可能需要不同 alt。
- 作为链接的头像：
alt="前往张三的个人主页"（说明功能，而非“张三头像”） - 文章内嵌的产品图：
alt="MacBook Air M3，银色，键盘左下角可见指纹识别键"（突出关键辨识特征） - 图表截图（若无详细数据表）：
alt="2023年各季度营收对比：Q2 最高，Q4 下滑 12%"（摘要核心结论） - 避免堆砌关键词，如
alt="苹果 iPhone 手机 手机批发 苹果官网 正品"
响应式图片也要同步处理 alt，<picture> 不改变规则
<picture> 和 srcset 只解决“加载哪张图”，不替代 alt 的语义职责。所有 <img> 子元素仍需独立、准确的 alt。
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(min-width: 768px)" srcset="hero-desktop.jpg"> <source media="(max-width: 767px)" srcset="hero-mobile.jpg"> <img src="hero-fallback.jpg" alt="夏季新品发布：环保材料运动鞋系列，支持定制配色"> </picture>
- 上面例子中，
<img>是必需的 fallback，它的alt就是整组图片的统一描述 - 不要在
<source>上加alt（无效，浏览器忽略） - 如果不同尺寸图语义不同（极少见），应拆成多个独立
<img>并分别标注
alt，是站在用户角度想清楚：“这张图，此刻到底在说什么？”——尤其当图里有文字、有箭头、有状态色块时，漏掉任何一项都可能让依赖语音导航的人彻底迷失。 
