alt 属性是 HTML5 和 WCAG 强制必需属性，必须显式声明；空字符串 alt="" 表示无语义可忽略，缺失则导致屏幕阅读器误读；装饰图用 alt=""，含信息图需有意义描述，动态图片须手动设置，链接内图片 alt 应说明动作目标而非外观，CMS/框架中易漏配，禁用父容器或背景图替代，长度控制在125字符内且避免冗余。
alt 属性不是“可选补充”，而是 HTML5 和 WCAG 强制要求的必需属性；不写、写错位置、填无效内容，都会直接导致可访问性校验失败、屏幕阅读器跳过或误读、Lighthouse 报错 Image elements do not have [alt] attributes。
alt 属性必须显式声明，空字符串 alt="" 和缺失 alt 完全不同
浏览器和辅助技术把 alt="" 理解为“这张图无语义信息，可安全忽略”；而缺失 alt 属性会被视为错误，部分屏幕阅读器会读出文件名（如 IMG_20240512.jpg）或直接报“图像”，用户完全无法判断上下文。
- 装饰性图片（如分隔线、背景花边、纯样式 icon）→ 必须写
alt=""，不能删掉属性，也不能写alt="装饰图" - 含信息的图片（哪怕只是 logo 或按钮图标）→ 必须写有意义的描述，如
alt="返回首页"，不是alt="home-icon.png" - 动态插入的图片（JS 创建
document.createElement('img')）→ 必须手动设置el.alt = "描述"，不会自动继承
链接中的 img 标签，alt 要说明“点这个去哪”，不是“这图长啥样”
当 <img> 套在 <a> 里作为唯一可点击内容时，alt 的职责就从“描述图像”切换为“说明动作目标”。视障用户靠它决定是否点击，不是靠猜。
- 错误写法：
<img src="cart.png" alt="购物车图标">→ 用户听到“购物车图标”，但不知道点了会清空、结算，还是跳转到购物车页 - 正确写法：
<img src="cart.png" alt="查看购物车，当前有2件商品">→ 包含功能 + 状态，信息完整 - 同一张图在不同链接中出现？alt 必须重写。比如首页 logo 链接到首页，alt 是
"返回首页"；产品页 logo 链接到首页，alt 还是"返回首页"；但若某处 logo 链接到品牌故事页，alt 就得改成"了解品牌故事"
CMS、富文本编辑器和框架中 alt 容易被覆盖或漏掉
很多 CMS（如 WordPress、Drupal）或富文本编辑器（如 CKEditor、TinyMCE）上传图片时，“替代文本”字段默认为空或自动填入文件名。这类值等于没写，且极难批量修正。
立即学习“前端免费学习笔记（深入）”；
- Yii2 中用
Html::img()生成标签时，alt必须塞进第二个参数数组：Html::img('@web/images/logo.png', ['alt' => '公司首页'])；写成Html::img('@web/images/logo.png')就完全没 alt - 别把
alt错写在父容器上，比如<div alt="xxx"><img src="x.jpg"></div>—— 浏览器只认<img>自身的alt - 用 CSS
background-image展示关键内容？不行。背景图无法加alt，必须改用<img>标签，或补aria-label+role="img"
长度、冗余与关键词堆砌：125 字符是实际可用上限
多数屏幕阅读器（如 NVDA、VoiceOver）只朗读前约 125 个字符，超出部分常被截断。这不是理论限制，而是真实交互瓶颈。
- 优先把核心信息放前面：用
alt="iPhone 15 Pro 钛金属边框特写，右侧对比A17芯片性能"，而不是"一张手机产品图，展示新款iPhone..." - 禁止冗余词：
"图片显示..."、"图标是..."、"Logo 图像"全部多余，屏幕阅读器已播报这是图片 - 含文字的图（如 banner 上“618大促”），alt 必须包含原文，但不要加“图中文字：”，直接写
alt="618大促：全场满299减80" - SEO 不买关键词堆砌的账：
alt="咖啡 咖啡机 咖啡豆 咖啡店 咖啡教程"会被视为垃圾内容，反而损害语义可信度
最常被忽略的其实是上下文适配——同一张图在首页、搜索结果页、邮件模板里出现，alt 都可能不同；而批量替换工具或 CMS 导出脚本往往直接复用一个值，结果全站 alt 失效。检查时禁用图片加载，再听一遍 VoiceOver，比跑十次 Lighthouse 更管用。
