alt 是 img 标签的必需属性，省略或错误填写会导致 W3C 验证失败、浏览器可访问性警告及 Lighthouse 审计归零；装饰图须用 alt=""（无空格），内容图需按功能精准描述关键实体信息。
必须填，不填就是 HTML 缺陷，不是“建议”，是硬性要求。
为什么浏览器和校验工具会报错
HTML5 规范明确将 alt 定义为 <img alt="alt属性必须填写吗_图片替代文本重要性【解答】" > 的必需属性。省略它会导致：
- W3C 验证器报
Bad value “” for attribute “alt” on element “img”类错误（即使你写了空字符串但拼写错误，比如alt=" "多了个空格） - Chrome 和 Firefox 在开发者工具的 Accessibility 面板中直接标记该
<img alt="alt属性必须填写吗_图片替代文本重要性【解答】" >为 “Missing alternative text” - Lighthouse 可访问性审计得分为 0，影响 SEO 报告评级
alt="" 是合法且常见的情况
装饰性图片（如分隔线、纯背景纹理、图标仅作视觉强化）不能留空或写 alt="icon"，而应显式设为 alt=""（空字符串，无空格）。
这样做既满足规范，又告诉屏幕阅读器“跳过此图”，避免冗余播报。常见误操作包括：
- 写成
alt=" "（含空格）→ 屏幕阅读器会读出“空白”，反而干扰 - 写成
alt="decorative"或alt="spacer"→ 违反 WCAG 1.1.1，属于“无效替代文本” - 用 CSS
background-image替代<img alt="alt属性必须填写吗_图片替代文本重要性【解答】" >却仍想加 alt → 背景图本身不支持alt，应改用<img alt="alt属性必须填写吗_图片替代文本重要性【解答】" >+alt=""或用aria-hidden="true"
内容型图片的 alt 文本怎么写才有效
关键不是“描述画面”，而是“说明功能”。例如：
- 商品列表页的缩略图：
alt="iPhone 15 Pro 深空黑色 256GB 官方正品图"（含品牌、型号、颜色、容量、可信来源） - 楼盘图：
alt="北京朝阳XX楼盘实景园林图"（城市+区域+楼盘名+场景，无形容词） - 按钮类图片：
alt="提交注册表单"（动词开头，说明用户点击后发生什么）
避免：alt="一张产品图"、alt="IMG_20240101.jpg"、alt="超赞户型！" —— 这些对屏幕阅读器用户和搜索引擎都无意义。
外贸/房产等业务场景容易被忽略的细节
这类网站常因多语言、多地域、多图类型导致 alt 管理混乱：
- 同一张图在不同页面出现时，
alt必须随上下文变化：首页轮播图写alt="上海浦东XX楼盘售楼处入口实拍"，详情页则应为alt="上海浦东XX楼盘售楼处内部接待区实景" - AI 搜索（如 Google Images、百度识图）依赖
alt中的实体词匹配，漏掉“城市”“楼盘名”“户型面积”等关键词，图片几乎不会出现在 GEO 搜索结果中 - 自动构建的 CMS 页面若未强制校验
alt字段非空，上线后可能批量缺失——建议在构建脚本里加if (!img.alt) throw new Error("Missing alt on: " + img.src)
最常被跳过的其实是“图加载失败时用户看到什么”——那个破碎图标旁的空白，就是你没写 alt 的直接后果。它不炫技，但缺了就真不行。
