如何为body标签的CSS背景图片添加替代文本（Alt Text）

针对body标签的CSS背景图，有两种实用的可访问性解决方案：

方案1：直接给body标签添加ARIA属性 #

body元素支持ARIA属性，你可以直接给它指定role="img"和aria-label来提供替代文本，不需要修改现有CSS，只调整HTML的body标签即可：

<body role="img" aria-label="联系页面背景：柔和的浅色调办公场景，传达专业友好的氛围">
  <!-- 页面内容 -->
</body>

屏幕阅读器会识别这个角色和标签，将背景图的信息读给用户，同时完全不影响原有的CSS背景视觉效果。

方案2：添加视觉隐藏的语义化img元素 #

如果你更倾向于用标准img标签承载图片语义，可以在body内部最顶部添加一个隐藏的img元素，用它的alt属性提供替代文本：

首先在HTML中添加：

<body>
  <!-- 视觉隐藏的背景图语义元素 -->
  <img src="contact.jpg" alt="联系页面背景：柔和的浅色调办公场景，传达专业友好的氛围" class="visually-hidden">
  
  <!-- 页面原有内容 -->
  <header>...</header>
  <main>...</main>
</body>

然后添加对应的CSS类来隐藏这个img（视觉上不可见，但屏幕阅读器可读取）：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

这个方法的优势是完全符合图片语义化标准，搜索引擎和屏幕阅读器都能很好识别，同时不干扰页面的视觉呈现。

两种方案都能解决你的问题，可根据项目对语义化的要求选择。

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