如何为非装饰性背景图片添加语义化Alt文本？提升页面可访问性

这个问题问得特别到位——很多人在用CSS背景图实现视觉效果时，很容易忽略它的可访问性，尤其是当这些图片承载着页面关键信息的时候。毕竟CSS背景图本身不会被屏幕阅读器识别，所以我们得用HTML来补充语义化的替代方案，下面是几种最靠谱的做法：

1. 首选：用<img>配合object-fit实现效果（最语义化） #

既然图片是内容的一部分，那直接用<img>元素才是最符合HTML语义的选择，我们可以通过object-fit: cover来实现和background-size: cover完全一样的填充裁剪效果，同时原生支持alt属性。

示例代码：

<div class="content-image-wrapper">
  <img 
    src="your-key-image.jpg" 
    alt="这里写图片的核心信息，比如：2024年珠峰登山队登顶瞬间，队员们高举五星红旗"
    class="cover-image"
  >
</div>

对应的CSS：

.content-image-wrapper {
  width: 100%;
  height: 500px; /* 根据你的需求设置尺寸 */
  overflow: hidden;
  position: relative;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等价于background-size: cover */
  object-position: center; /* 可选，控制图片裁剪的焦点位置 */
}

这种方法的优势在于：完全符合语义规范，屏幕阅读器能直接读取alt文本，同时视觉效果和背景图完全一致，是优先级最高的方案。

2. 必须用CSS背景图时：添加隐藏的<img>元素 #

如果因为业务需求（比如要在图片上叠加多层文字、按钮等复杂内容）必须用CSS背景图，那我们可以在容器内添加一个视觉上隐藏，但屏幕阅读器能识别的<img>元素来提供alt文本。

示例代码：

<div class="bg-image-container">
  <!-- 这个img仅用于提供语义化描述，视觉上隐藏 -->
  <img 
    src="your-key-image.jpg" 
    alt="关键信息描述：复古咖啡馆内景，木质吧台摆满手工咖啡器具"
    class="sr-only"
  >
  <!-- 这里放你需要叠加的内容 -->
  <div class="overlay-content">
    <h2>复古咖啡体验</h2>
    <p>手工烘焙，匠心制作</p>
  </div>
</div>

对应的CSS：

.bg-image-container {
  width: 100%;
  height: 500px;
  background: url('your-key-image.jpg') center/cover no-repeat;
  position: relative;
  color: white;
}

/* 行业标准的屏幕阅读器专用隐藏样式：视觉不可见，但辅助技术可读取 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.overlay-content {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

这里的.sr-only类是可访问性开发的通用方案，确保只有屏幕阅读器能获取到这个img的alt文本，不会影响页面的视觉布局。

避坑提醒 #

• 绝对不要用空的alt=""：这会告诉屏幕阅读器“这是一张装饰性图片”，完全不符合你的需求，必须填写准确的内容描述。
• alt文本要精准：不用冗余的“一张XX的图片”，直接描述图片承载的核心信息，比如“搭载骁龙8 Gen3的旗舰手机正面展示，屏幕显示高清壁纸”。
• 避免重复描述：如果容器内已经有文字说明了图片内容，alt文本可以适当简化，但要确保覆盖未看到图片的用户需要的关键信息。

内容的提问来源于stack exchange，提问作者Sean