img 的 alt 属性必须显式声明，alt="" 表示无信息量可跳过，缺失则被校验工具视为错误；装饰图优先用 CSS background-image，否则必须写 alt=""；链接内图片的 alt 应说明功能与状态而非外观。
img 的 alt 属性必须显式声明，空字符串不是“省略”，而是明确语义
不写 alt 属性，和写 alt="" 是两回事。浏览器、Lighthouse、WCAG 校验工具都会把缺失 alt 视为错误；而 alt="" 是合法且被正确解析的——它告诉屏幕阅读器“这张图无信息量，请跳过”。常见误操作包括：
– 用 CMS 上传图片后留空“替代文本”字段（等于没写）
– 把 alt 错写在父级 <div> 上（无效）
– 用 title 替代 alt（title 只是悬停提示，不参与无障碍链路）
– 动态 JS 创建 <img> 后忘记设 el.alt = "描述"
链接中的 img，alt 要说明“点这个去哪”，不是“这图长啥样”
当 <img> 是唯一可点击内容时，它的 alt 就不再是图像描述，而是动作指令。视障用户靠这个决定是否触发跳转，不能靠猜。
– 错误写法：<a href="/cart"><img src="cart.png" alt="购物车图标"></a>（听到“购物车图标”，但不知道点了是结算、清空，还是跳转）
– 正确写法：<a href="/cart"><img src="cart.png" alt="查看购物车，当前有3件商品"></a>（含功能 + 实时状态）
– 同一张图在不同链接中出现？alt 必须重写。首页 logo 链到首页，写 alt="返回首页"；若某处 logo 链到品牌故事页，则必须改为 alt="了解品牌故事"
装饰性图片必须用 alt=""，但优先改用 CSS background-image
纯样式用途的图片（如分隔线、圆点 icon、背景花边），不该出现在 HTML 结构里。最佳实践是移入 CSS：background-image: url("dot.svg");。如果因历史原因或框架限制不得不保留 <img>，则必须写 alt=""，而不是删掉属性或填 alt="装饰图"。
– alt="装饰图" 会被读屏软件朗读，造成干扰
– alt=" "（含空格）也不行，会被当作非空字符串处理
– SVG 图标若含语义（如流程图文字），不用 alt，改用 <title> 或 aria-label
复杂图表、带文字截图等信息图，alt 只写结论，长描述放邻近元素
alt 不是全文照搬，而是摘要句。超过 125 字符会被多数屏幕阅读器截断，且 Google 图片搜索也倾向简短描述。
– 正确做法：<img src="sales-q2.png" alt="2024年Q2华东区销售额达128万元，同比增长17%">，紧接其后用 <p id="sales-desc">Q1 新增12.4万，Q2环比上升8.2%…</p>，再通过 aria-describedby="sales-desc" 关联
– 禁用已废弃的 longdesc 属性
– 切忌把标题/价格/行动号召做成图片再配模糊 alt；优先用 HTML + CSS 实现文字层，图片只作底图
– 验证码、签名、徽章类特殊图片，需额外提供文本替代方案（如隐藏文本、结构化数据接口）
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的，是「同一张图在不同上下文中的语义漂移」和「JS 动态插入时alt 的手动补全」——这两处不报语法错误，但上线后立刻影响真实用户的操作路径与理解效率。 
