html5规范强制img必须带alt属性，省略会导致验证失败、构建工具报错及严重可访问性问题；alt=""表示无语义，需根据图片功能精准描述内容。
img 标签没写 alt 会直接报错
HTML5 规范强制要求 img 必须带 alt 属性，省略会导致 W3C 验证失败、eslint-plugin-jsx-a11y 拦截、Lighthouse 标记为“严重可访问性问题”，部分静态站点生成器（如 Hugo）甚至拒绝渲染页面。
常见错误现象：<img src="icon-menu.png"> —— 浏览器不报错但构建工具炸了，屏幕阅读器可能读出 “icon menu dot png”，完全偏离语义。
-
alt=""是显式声明“此图无语义”，辅助技术静音跳过 - 不写
alt是未声明状态，等于把文件名当描述甩给用户 - 哪怕只是纯装饰的分割线，也必须写
alt=""，不能靠 CSS 隐藏蒙混
alt 文本到底写什么：看图是否承载不可替代信息
判断标准不是“有没有文字”，而是“删掉这张图，用户还能不能理解上下文或完成操作”。
- 内容型图片（商品图、错误提示、banner 文字图）：用简明语言复述核心信息，比如
alt="618 大促：全场满 300 减 50"，不是alt="促销横幅" - 链接内图片（购物车图标、首页 logo）：
alt描述目标而非画面，比如alt="查看购物车"，不是alt="购物车图标" - 图文共存按钮（如“搜索”旁放大镜）：图标用
alt=""，文字本身已说明功能，重复朗读反而干扰 - 含关键数据的图表截图：提炼结论，不是照搬图中所有文字，例如
alt="Q1 用户留存率：iOS 72.3%，Android 68.1%"
响应式图片和 SVG 的 alt 处理容易漏掉
srcset 和 <picture></picture> 只解决加载哪张图，不改变 alt 的语义职责——它始终属于最内层的 <img>，且只能有一个值。
-
<picture></picture>中<source></source>上加alt无效，浏览器直接忽略 - 正确写法：
<img src="fallback.jpg" srcset="sm.jpg 480w, lg.jpg 1024w" alt="橘猫蜷在窗台晒太阳，耳朵微抖"> - 内联
<svg></svg>不支持alt，必须用<title></title>+<desc></desc>，并确保父容器有role="img" - CSS 背景图无法被屏幕阅读器识别，
aria-label补救效果有限，优先改用真实<img>
表单、图标、装饰图的 alt 写法差异很大
同一张图在不同上下文里，alt 可能完全不同。关键是别让辅助技术“猜”你图里有什么。
- 提交按钮里的图标：
alt=""，因为按钮文本（如“提交”）已说明动作 - 独立使用的警告图标：
alt="警告：密码强度不足"，不是alt="黄色感叹号" - SVG 图标嵌在链接中：
<svg aria-hidden="true"></svg>+ 外层链接文字说明意图，避免双重播报 - 用
<figure><figcaption></figcaption></figure>包裹复杂图表时，alt可简化为概要，长描述交给<figcaption></figcaption>或aria-describedby
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
