alt属性是html5和wcag 1.1.1强制要求的必需属性，省略即违反规范；不写或写成alt="图片"会导致屏幕阅读器误读、seo语义断裂、lighthouse报错及加载失败时信息缺失。
必须为每个 <img> 添加 alt 属性，否则会直接违反 WCAG 1.1.1 和 HTML5 规范——不是“建议”，是强制要求。
不写 alt 或写成 alt="图片" 会触发什么问题
屏幕阅读器会读出“图片”或直接跳过（取决于实现），用户完全不知道上下文；搜索引擎无法建立图片与页面主题的语义关联；Chrome DevTools 的 Lighthouse 无障碍审计会标红报错 Image elements do not have [alt] attributes；部分浏览器在图片加载失败时显示空白框，破坏信息完整性。
- 空
alt（alt=""）只适用于纯装饰性图片，比如背景分隔线、视觉边框 -
alt="图片"、alt="icon"、alt="logo.png"全部属于无效写法，等同于没写 - 如果图片是链接的一部分（如
<a href="/home"><img src="home.png"></a>），alt必须说明链接目的，例如alt="返回首页"，而不是描述图标样式
Varlet 组件中 alt 的实际写法差异
Varlet 的 <var-image></var-image>、<var-avatar></var-avatar>、<var-card></var-card> 都把 alt 设为 props，但语义责任不同：
-
<var-image src="/product.jpg" alt="iPhone 15 Pro 钛金属机身特写"></var-image>：强调产品特征与视觉重点 -
<var-avatar src="/u123.jpg" alt="用户李四的头像"></var-avatar>：必须包含“用户”+“姓名”+“头像”三要素，不能省略“头像” -
<var-card src="/cat.jpg" alt="橘猫蜷缩在窗台晒太阳"></var-card>：需还原场景动作，避免抽象词如“可爱”“温馨”
注意：<var-uploader></var-uploader> 的预览图默认不带 alt，必须手动传入，否则上传列表里的缩略图对屏幕阅读器不可见。
alt 文本长度和关键词怎么平衡
WCAG 明确建议控制在 125 字符内，因为多数屏幕阅读器会在该长度后截断。关键词自然嵌入即可，堆砌毫无意义——Google 已在 2021 年后大幅降低 alt 的 SEO 权重，现在只用它做基础语义归类。
- 正确：
alt="北京中关村Apple Store门店外景，玻璃幕墙与Logo清晰可见"（86 字符） - 错误：
alt="Apple 苹果旗舰店 北京 中关村 门店 外观 图片 照片 实景"（堆砌+无动词） - 含文字的图（如海报）必须逐字写出所有可读文字，哪怕有 5 行，也要完整复制进
alt
最容易被忽略的是：当同一张图在页面中多次出现（比如商品列表页），每次的 alt 必须根据上下文微调，不能复用同一段文案。
