必须写alt属性，因它是可访问性合规与SEO的基础要求；缺失会导致屏幕阅读器跳过图片、加载失败无提示、搜索引擎不收录、WCAG审计失败等问题。
有必要写，而且必须写——不是“建议”，而是可访问性合规和 SEO 基础要求。
alt 属性不写会触发哪些实际问题
不写 alt 或留空（alt=""）在多数浏览器中不会报错，但会导致真实场景失效：
- 屏幕阅读器直接跳过该
<img>，视障用户完全无法获知图片意图 - 图片加载失败时，Chrome / Safari 等只显示断裂图标，无任何文字提示
- Google 图片搜索不收录无
alt的图片；常规网页搜索中，含描述性alt的页面在图文混合结果里权重更高 - 部分 WCAG 2.1 合规审计工具（如 axe、WAVE）会将缺失
alt标为 A 级错误，影响政府/教育类项目上线
alt="" 和不写 alt 的区别到底在哪
这是最常被混淆的一点：两者语义完全不同，不能互换。
-
alt=""明确声明“此图无文字等效内容”，屏幕阅读器会静音跳过，适合装饰性图片（如分隔线、纯背景图） - 完全省略
alt属性，部分旧版读屏软件（如 JAWS 早期版本）可能读出文件名或src路径，造成干扰 - HTML5 规范要求所有
<img>必须有alt属性，省略属于验证失败；现代构建工具（如 ESLint + eslint-plugin-jsx-a11y）默认报错
怎么写才算合格的 alt 文本
核心原则：用最简短的自然语言，说明“这张图在当前上下文中起什么作用”，而非描述画面本身。
- 功能型图片（如按钮图标）：
alt="搜索"，不是alt="放大镜图标" - 信息型图片（如数据图表）：
alt="2023年华东地区销售额同比增长12%，高于全国均值"，需提炼关键结论，而非罗列数据 - 头像类图片：
alt="张伟，前端工程师"，避免alt="人物头像"这类无效表述 - 含链接的图片：alt 应说明链接目标，例如
<a href="/blog"><img src="blog.png" alt="查看技术博客文章"></a>
遇到复杂图片怎么办（比如信息图、截图、公式）
单一 alt 字段装不下时，优先分级处理：
- 主图保留简洁
alt，概括用途（如alt="React 组件生命周期流程图"） - 补充说明用
<figure><figcaption>或邻近段落，确保视觉与读屏用户看到一致信息 - 超复杂图（如带多层标注的架构图），额外提供长描述链接（
aria-describedby指向隐藏<div>），或单独页面说明 - 数学公式慎用图片，优先用 MathML 或 KaTeX 渲染，天然支持读屏
很多人卡在“怕写错”或“觉得不重要”，但真正难的不是写，是判断图片在当前语境中是否承载信息。一张没 alt 的 banner 图，可能让整页内容对视障用户失去意义——这个代价，远比花 10 秒补上 alt 高得多。
