本文聚焦在 HTML 中装饰性图片的正确标记方法，并提供兼顾无障碍与SEO（搜索引擎优化）的实用要点。通过合理的标记，可以让屏幕阅读器正确忽略无信息量的图像，同时避免对搜索引擎造成不必要的干扰。下面按结构层级展开，帮助你在实际页面中落地执行。
1.1 装饰性图片的定义与区分
在网页设计中，装饰性图片指的是不传达核心信息的图像，仅用于美化或布局辅助，而非传递关键内容。对于这类图片，屏幕阅读器不应读取其内容，因此应遵循空 alt 属性的标记原则。通过正确处理，可以提升无障碍体验并避免搜索引擎对图片内容进行误判。第一要点是明确区分“信息性图片”和“装饰性图片”，避免混淆。
无障碍实践的核心在于：对装饰性图片使用空 alt，并在需要时使用其他辅助属性进行标记，以确保语义清晰且可访问性友好。此举还对 SEO 更友好，因为搜索引擎将把重点放在有意义的内容上。
<img src="decorative-waves.png" alt="" />
1.2 为什么要区分对待
信息性图片应提供描述性 alt 文本，以便搜索引擎理解图像语义并提升相关性；而装饰性图片若继续使用描述性文本，则可能对页面权重造成干扰，且给屏幕阅读器增加不必要的语音输出。正确的做法是让两者各司其职，以实现更清晰的页面结构与更好的用户体验。
在实际开发中，区分这两类图片还能帮助你实现更简单的维护和更好的页面加载性能。避免把装饰性图片塞满 alt 文本，否则会误导搜索引擎并影响可访问性。
2.1 何时使用空 alt 与 aria-hidden 的组合
当图片仅仅用于视觉美化或排版时，应使用 alt=""，并可加上 aria-hidden="true" 来明确告知辅助技术暂时忽略该元素。这样既保留了视觉效果，又确保了屏幕阅读器的高效输出。
另一种场景是图片被嵌入在需要的 UI 控件内，如装饰性的图标点缀按钮，这时仍应使用空 alt，防止干扰用户的语音浏览。 aria-hidden 的使用应与 alt 属性保持一致，避免产生冲突。
<img src="decorative-icon.svg" alt="" aria-hidden="true" />
2.2 信息性图片的替代文本撰写要点
若图片传达信息或具有语义意义，应提供简洁而精准的 alt 文本，让搜索引擎和屏幕阅读器均能正确理解图像内容。文本应避免冗长，并尽量包含对页面核心主题的描述。
在多语言站点中，alt 文本需要与页面语言保持一致，确保用户在不同语言环境下获得一致的可访问性体验。 避免使用“图片1”等模糊描述，应尽量还原图片要表达的具体信息。
<img src="team-photo.jpg" alt="团队合影：研发部成员合影，2025 年春季" />
2.3 将图片分为信息性与装饰性并选择标记方案
一个清晰的策略是：把信息性图片作为内容的一部分，装饰性图片作为视觉修饰。信息性图片需要 alt 文本，装饰性图片应设为空 alt，并在必要时采用 aria-hidden 标记。这样可以在保证无障碍性的同时，避免搜索引擎对无信息图片的误解。
另外，若图片并非必要信息点，却对页面布局有贡献，可以考虑使用 CSS 背景图来实现装饰效果，这样就彻底避免了将其作为图像资源带来的无障碍负担。 背景图是装饰性标记的一个优雅替代，且不被屏幕阅读器直接读取。
/* 使用背景图片实现装饰性效果 */
.hero-banner { background-image: url('decorative-banner.png'); width: 100%; height: 240px; }
3.1 场景化实战：布局中的装饰性图片标记示例
在页面的装饰性图像场景中，直接使用图片标签并设置空 alt 是常见做法。此处强调：只要图像不传达信息，就应保持 alt=""，避免冗余文本被屏幕阅读器读取。
当装饰性图片需要参与响应式设计或性能优化时，优先考虑图片的尺寸、占位符和延迟加载，确保视觉效果与加载性能之间达到平衡。 使用 loading="lazy" 可提升首屏渲染速度，这对提升 SEO 影响尤为显著。
<img src="decorative-wave.png" alt="" loading="lazy" width="1200" height="300" />
3.2 信息性图片的标记示例
对于传达信息的图片，alt 文本应准确描述图像中的核心信息，帮助搜索引擎理解上下文，并支持屏幕阅读器用户获取等效信息。下例展示一个信息性图像的典型标记：
<img src="product-chart.png" alt="年度销售额柱状图，显示第一季度到第四季度的对比" />
3.3 将图像与文本搭配的可访问性注意点
若图像与文本一起传达同一信息，应确保文本与图像的语义一致，避免文本信息被图像隐藏。优先将关键信息放在文本节点中，并将图像用于补充，这样有助于搜索引擎正确索引并提升可读性。
在对话式或无障碍交互中，确保图像中的动效不会造成屏幕阅读器混乱，如需要，请提供可跳过的文本或控件以提高可访问性。 动效应可控，避免对用户造成干扰。
4. 进一步的实现要点与常见误区
实现装饰性图片的正确标记需要在标记语义、可访问性和搜索引擎理解之间取得平衡。本文给出的一系列做法，目标是帮助你在实际页面中快速落地，形成可维护的标记规范。 坚持使用空 alt 与必要时的 aria-hidden，并在信息性图片中加入清晰的 alt 文本，是核心原则。
常见误区包括：给装饰性图片添加冗长的描述文本、将背景图误作为 img 使用、在装饰性图片上阻塞屏幕阅读器等。正确做法能明显提升页面质量与用户体验。
5.1 逐条要点回顾与代码要点
要点聚焦于两大核心：无障碍性与搜索引擎友好性，以及在实际开发中的可维护性。通过规范的标记、明确的文本替代与合适的替代方式，可以实现页面的一致性与高可用性。
以下给出一个聚焦场景的简要代码总结，帮助你快速在项目中落地：
<!-- 信息性图片示例 -->
<img src="logo.png" alt="公司名称官方标识，位于导航条左侧" /><!-- 装饰性图片示例（空 alt，屏幕阅读器跳过） -->
<img src="divider.png" alt="" aria-hidden="true" /><!-- 使用背景图的装饰性替代方案（推荐在布局中使用） -->
<div class="hero" style="background-image: url('hero-decor.png');" aria-label="页面头部装饰" role="img"></div>
