缺失 alt 属性时屏幕阅读器可能报错或跳过，alt=”” 则明确表示图像纯装饰；含信息的图像 alt 不可为空，且 alt 必须为纯文本、不解析 HTML 标签，复杂图表应结合 <figure><figcaption> 使用。
alt 属性没写或为空，屏幕阅读器会怎么读？
不写 alt 或写成 alt=""，行为完全不同：前者是缺失属性，部分旧浏览器 / 辅助技术可能报错或跳过；后者明确表示“该图纯装饰，无需描述”，是合法且推荐的空值用法。但凡图像携带信息（比如流程图里的箭头、验证码里的数字、商品图里的颜色细节），alt 就不能空。
- 用户上传头像时用了
<img src="avatar.jpg">—— 缺失alt，读屏软件可能读成“图片”或直接跳过，无法传达“张三的头像” - 用
alt=""是对的：比如背景分隔线<img src="divider.png" alt=""> - 图标按钮（如放大镜搜索）必须写
alt=" 搜索 "，不能只靠视觉符号传递功能
alt 里能塞 HTML 标签或换行吗？
不能。alt 是纯文本属性，浏览器会原样显示文字内容，不解析任何标签。写 alt="<strong> 重要 </strong>"，用户看到的就是字面的“<strong> 重要 </strong>”七个字符。
- 想强调关键词？靠 CSS 控制图像容器样式，别动
alt - 需要多行说明？优先精简到一句话；实在复杂（如信息图），改用
<figure><figcaption>组合，alt只负责最核心的图意概括 - 含引号、& 符号？用 HTML 实体：
alt=" 它 's "OK""→ 渲染为“It’s “OK””
自动化检查 alt 是否完整，有哪些靠谱方法？
靠肉眼数 <img> 标签容易漏，尤其模板渲染或 CMS 输出的页面。真正有效的检查得结合工具链和约定。
- 构建时用
html-validate配规则"html-validate/require-alt-text"，CI 流水线直接拦截缺失项 - Chrome DevTools 的 Lighthouse > Accessibility 报告里，“Image elements have
[alt]attributes”项会标出所有问题节点 - 注意动态插入的图：JS 创建的
document.createElement('img')必须同步设el.alt = "……"，否则检查工具扫不到 - 第三方组件（如 React 的
<Image />）要确认其封装是否透传alt，别被默认值骗了
React/Vue 项目里 alt 容易被忽略的三个地方
框架抽象层会让 alt 更隐蔽——不是写不出来，而是写的位置不对、条件不全、或被覆盖。
立即学习 “ 前端免费学习笔记（深入）”；
- React 中
<img src={url} />没写alt，ESLint 插件jsx-a11y/alt-text可捕获，但需启用 - Vue 模板中
v-for渲染图列表，alt写成固定字符串（如alt=" 商品图 "）就失去意义，应绑定:alt="item.name + '的商品图'" - Next.js 的
<Image />组件强制要求alt，但若传入alt={undefined}，运行时会警告且降级为alt=""，实际语义丢失
事情说清了就结束。最常漏的是 JS 动态创建的图、框架组件的属性透传、以及把空 alt 当作“懒得写”的借口——这三处一松懈，无障碍就断了一截。
