html图片无障碍核心是alt属性必须存在且准确：装饰图用alt=""，功能图描述动作而非外观，动态插入需js显式赋值，响应式图片共用一个语义化alt，缺失alt将导致屏幕阅读器误读且lighthouse报严重错误。
HTML 图片的无障碍核心就一条：alt 属性必须存在，且值必须匹配图片在当前上下文中的真实作用。不写、乱写、用 title 或 aria-label 替代，都会让屏幕阅读器用户丢失关键信息，Lighthouse 也会直接标为严重错误。
装饰性图片必须写 alt=""，不能删掉属性
纯分隔线、背景花纹、视觉强化图标（旁边已有文字说明）——这些图删掉不影响信息传达，就必须显式写 alt=""。这不是“可选”，而是 WCAG 1.1.1 的强制要求。
- ❌
<img src="dot.png">—— 缺失alt，读屏器可能朗读"dot.png"，用户完全不知所云 - ✅
<img src="dot.png" alt="">—— 明确声明“无信息价值”，读屏器静默跳过 - ⚠️ 即使加了
aria-hidden="true"，也仍需保留alt=""；旧版 NVDA 或 JAWS 对空alt处理不一致，双保险更稳 - ? 绝对不要写
alt="decorative"或alt="spacer"，这会让读屏器播报冗余词，打断阅读流
功能性图片的 alt 要描述“能做什么”，不是“长什么样”
当 <img> 是按钮、链接、操作控件时，alt 文本必须告诉用户点击后发生什么，而不是描述图像外观。
- ❌
<img src="search-icon.png" alt="放大镜图标">—— 视障用户不知道点它能搜 - ✅
<img src="search-icon.png" alt="搜索">—— 直接传达动作意图 - ✅
<img src="logo.png" alt="返回首页">—— 前提是该 logo 确实链接到首页 - ⚠️ 同一张图在不同页面功能不同（如首页 logo 跳首页，产品页 logo 跳品牌页），
alt必须随上下文动态更新，不能硬编码
动态插入的图片最容易漏掉 alt，JS 渲染必须显式赋值
React/Vue 模板、CMS 输出、轮播图 JS、懒加载逻辑——只要最终 DOM 里是 <img> 标签，alt 就不能靠“默认”或“留空”。自动化工具几乎无法修复这类缺失。
- ❌
el.innerHTML = '<img src="p1.jpg">';—— 没alt，Lighthouse 立刻报红 - ✅
el.innerHTML = '<img src="p1.jpg" alt="iPhone 15 Pro 深空黑色正面图">'; - ✅ 更稳妥：
const img = document.createElement('img'); img.src = 'p1.jpg'; img.alt = 'iPhone 15 Pro 深空黑色正面图'; el.appendChild(img); - ⚠️ React 中别写
alt={item.desc}，万一item.desc是undefined，会渲染成字面量alt="undefined"；应写alt={item.desc || ''}
响应式图片和 <picture></picture> 共享同一个 alt，不能按尺寸拆分
srcset、sizes、<source></source> 只控制“哪张图被加载”，不改变“图的含义”。所有变体都指向同一语义内容，alt 只需写一次，且必须准确概括这个共同语义。
- ✅
<picture><source media="(min-width: 768px)" srcset="chart-lg.webp"><source srcset="chart-sm.webp"><img src="chart-fallback.png" alt="2024 Q1 用户留存率下降 12%，主因新用户次日流失上升"></source></source></picture> - ❌ 为 desktop 版写
alt="桌面端趋势图"、mobile 版写alt="移动端简化版"—— 语义割裂，读屏器无法建立连贯理解 - ⚠️ 若艺术性裁剪导致语义差异极大（如桌面版是全景会议照，手机版只截发言人脸部），应拆成两张独立图片 + 两个不同
alt，而非强塞一个
最常被忽略的其实是“图片加载失败时的用户体验”——浏览器只显示空白方框加路径，而用户根本看不到 alt 文字，除非你写了。这不是理论问题，是页面一上线就暴露的缺陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
