必须为img标签添加alt属性，否则无法通过可访问性检测；内容图需说明主体+状态+上下文，装饰图须写alt=""，功能图描述动作，含文字图须完整包含可见文案，动态渲染时需处理undefined，title和role="img"不可替代alt。
必须加 alt，不是“加了更好”，而是不加就过不了可访问性检测、屏幕阅读器直接跳过、搜索引擎当这张图不存在。
img 标签的 alt 属性怎么写才有效
它不是图片说明栏，而是语义锚点——得同时回答“图里有什么”和“为什么放这儿”。
- 内容图（产品图、截图、信息图）：用一句话带出主体+状态+关键上下文，比如
alt="iPhone 16 Pro 拆机图，显示A18芯片与双层主板布局" - 装饰图（分隔线、背景花纹）：必须写
alt=""，不是删掉alt，也不是写alt="decorative" - 功能图（图标按钮、操作入口）：描述动作，不是形状，比如
alt="导出为 CSV"，别写alt="下载图标" - 含文字的图（Banner 上带促销文案）：alt 必须完整包含可见文字，比如
alt="618大促：全场满299减50，限时至6月18日"
React/Vue 动态渲染时 alt 容易漏或崩
JS 模板里直接绑定未定义字段，会导致页面上出现字面量 undefined，无障碍测试 100% 报错。
- Vue 中别写
v-bind:alt="item.alt"，要写v-bind:alt="item.alt || ''" - React 中别写
alt={item.alt}，应改为alt={item.alt ?? ''}或加条件判断 - 后端模板（如 Yii2）用
Html::img($src, ['alt' => $desc])，alt必须进第二个参数数组，不能拼在路径里
title 和 role="img" 不是 alt 的替补
这两个属性常被误用，但它们根本不参与图片语义解析。
-
title只触发悬浮提示，移动端基本无效；和alt内容重复会干扰读屏器，纯堆关键词更可能被判定为垃圾信号 -
role="img"只用于非<img>元素（比如用<div> 模拟图片），且必须配 <code>aria-label或aria-labelledby，否则照样没描述 -
<svg></svg>内联时，alt无效，得用<title></title>标签包裹文本，并确保外层有aria-hidden="false"
最常被忽略的是 CMS 或接口返回的图片数据——上传时没填描述，后端 fallback 到空字符串比 fallback 到 "image" 或文件名更安全；而前端拿到 undefined 就渲染成字面量，这种 bug 往往上线后才被无障碍扫描工具揪出来。
