17370845950

alt属性是HTML中必需属性，用于在图像加载失败、屏幕阅读器读取或搜索引擎解析时提供准确、简洁、非冗余的替代文本；装饰性图片必须设为alt=""，不可省略或填充无效内容。

alt 属性不是可选的“补充信息”

它直接决定图片在多种关键场景下是否能被正确理解。浏览器加载失败、屏幕阅读器读取、搜索引擎解析图片内容，全依赖 alt 值。空字符串 alt="" 和缺失 alt 属性语义完全不同：前者明确表示“该图无文字等价内容”，后者会让辅助技术尝试猜测或跳过，反而更糟。

什么时候必须写 alt，什么时候可以为空

判断核心是：这张图是否承载了页面中不可替代的信息？

• 含关键信息的图（如产品示意图、流程图、带文字的截图）→ 必须写准确、简洁的描述，比如 alt="MacBook Pro 14寸侧面接口布局：从左至右为MagSafe、HDMI、两个Thunderbolt 4"
• 纯装饰性图片（如分隔线、背景花边、仅起视觉修饰作用的 icon）→ 应设为 alt=""，**不能省略**，也不能写“装饰图”之类无效文本
• 链接内只有图片且无其他文本（如 logo 链接）→ alt 必须说明链接目标，例如 alt="返回首页"，而非“公司 logo”

SEO 和可访问性共用一套 alt 规则

搜索引擎不会因你堆砌关键词而加分；相反，alt="买手机 手机价格 手机官网" 这类写法会被视为垃圾内容。真实有效的 alt 同时服务两类用户：

• 屏幕阅读器用户靠它理解上下文，所以需包含对象+动作/状态（如 alt="购物车图标，当前有3件商品"）
• Google 图片搜索依据 alt 匹配查询，但只信任自然、具体、与图一致的描述
• 避免使用 “图片”、“图像” 开头——屏幕阅读器已告知这是 img，重复冗余

常见错误：自动填充、CMS 默认值、复制粘贴

很多 CMS 或建站工具会默认填入文件名（如 alt="IMG_20250512_153042.jpg"），或统一设为“无标题”。这类值等于没有 alt。更隐蔽的问题是批量替换时把所有图都设成相同文案，比如全部写成 alt="产品图"。

实际检查建议：

• 用浏览器开发者工具过滤所有 img 标签，快速扫一遍 alt 值是否为空、重复、无意义
• 禁用图片加载（Chrome DevTools → Network → Disable cache + 勾选 “Disable images”），看页面信息是否断裂
• 用 VoiceOver（macOS）或 NVDA（Windows）朗读页面，听是否出现意外停顿或含糊描述

@@##@@
@@##@@
@@##@@

真正难的不是写 alt，而是每次插入图片前多问一句：如果这个图完全看不见，用户还能完成当前任务吗？答案决定了你该写什么。