在网站开发与设计中，图片的 alt（Alternative Text，替代文本）标签不仅关乎网站的SEO（搜索引擎优化），更是**Web无障碍访问（Accessibility）**的核心环节。它能在图片无法加载时向用户传达信息，也能让使用屏幕阅读器的视障人士“听”懂图片内容。

要做好 alt 标签的设置，建议遵循以下核心原则与实操规范：

1. 核心原则：准确描述，简明扼要

alt 标签的目的是传达图片的功能或核心信息，而不是对图片进行文学创作。

• 字数控制：通常建议在 125个字符以内。大多数屏幕阅读器在超过这个长度时会截断或停止朗读。
• 客观描述：描述图片中最重要的内容，避免使用“图片”、“照片”、“图标”等冗余词汇，因为屏幕阅读器已经会自动提示这是一张图片。

2. 根据图片类型“对症下药”

不同类型的图片，alt 的设置策略完全不同：

• 信息类图片（传递核心内容）
  • 场景：产品图、新闻配图、数据图表。
  • 做法：简明扼要地描述图片传达的信息。
  • 示例：alt="2023年Q4全球智能手机出货量柱状图"（而不是 alt="一张图表"）。
• 功能类图片（可点击/有交互）
  • 场景：Logo、搜索按钮、购物车图标、带链接的Banner。
  • 做法：描述点击后的动作或链接的目的地，而不是描述图片长什么样。
  • 示例：alt="返回首页"、alt="搜索商品"、alt="立即注册"。
• 装饰类图片（纯美化）
  • 场景：背景图、分隔线、纯装饰性的插画、为了排版留白的图片。
  • 做法：必须留空，即 alt=""。这会让屏幕阅读器直接跳过它，避免给视障用户带来无意义的噪音。
• 文本类图片
  • 场景：海报、包含文字的图片。
  • 做法：将图片上的文字完整复制到 alt 中。
  • 示例：alt="全场商品5折起，活动时间11月1日-11日"。
• 复杂图表/信息图
  • 场景：复杂的流程图、长图。
  • 做法：alt 中写简短标题，然后在图片下方或页面中提供详细的文字说明，并通过 aria-describedby 属性关联。

3. 千万要避开的 SEO 误区

很多开发者为了SEO，会在 alt 里疯狂堆砌关键词，这是非常危险的做法：

• 错误示范：alt="北京装修公司 北京装修公司 北京最好的装修公司 装修"
• 正确做法：alt="北京现代简约风格客厅装修实景案例"
• 原则：alt 首先是写给“人”（尤其是视障用户）看的，其次才是给搜索引擎看的。自然、准确的描述本身就能带来良好的SEO效果。

4. 代码规范与细节注意

• 不要省略 alt 属性：如果图片没有 alt，屏幕阅读器可能会直接读出图片的文件名（如 img_20231024.jpg），这会让用户非常困惑。
• 避免在 alt 中使用特殊字符：尽量不要在 alt 文本中使用 HTML 实体或复杂的转义字符，保持纯文本即可。
• CSS 背景图的处理：通过 CSS background-image 引入的纯装饰图片，不需要也无法设置 alt。但如果背景图包含重要文字信息，应使用 CSS 隐藏真实文本（如 text-indent: -9999px;）或使用 aria-label 来提供无障碍支持。

5. 开发阶段的自动化与测试

• CMS 强制校验：如果在 WordPress、Shopify 等后台开发，可以安装插件（如 WP Accessibility），在上传或发布文章时，如果缺少 alt 标签会弹出警告。
• 自动化测试工具：在代码提交前，可以使用 Lighthouse、axe DevTools 或 WAVE 等无障碍测试工具，一键扫描页面中缺失或不合格的 alt 标签。
• AI 辅助生成：现在有很多工具（如 Cloudinary、WordPress 的 AI 插件）可以通过图像识别自动生成基础的 alt 文本，但强烈建议人工复核，因为 AI 往往无法理解图片在特定业务场景下的真实意图。

总结：优秀的 alt 标签设置，本质上是同理心的体现。在开发时，不妨闭上眼睛，想象自己正在通过屏幕阅读器“听”你的网站，如果某张图片的描述让你觉得突兀、啰嗦或不知所云，那就需要重新修改了。