必须写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></figcaption></figure> 或邻近段落，确保视觉与读屏用户看到一致信息
• 超复杂图（如带多层标注的架构图），额外提供长描述链接（aria-describedby 指向隐藏 <div>），或单独页面说明 <li>数学公式慎用图片，优先用 MathML 或 KaTeX 渲染，天然支持读屏</li> <p>很多人卡在“怕写错”或“觉得不重要”，但真正难的不是写，是判断图片在当前语境中是否承载信息。一张没 alt 的 banner 图，可能让整页内容对视障用户失去意义——这个代价，远比花 10 秒补上 <code>alt 高得多。