这是我以前没有解决过的问题。我需要在站点中的所有图像上使用 alt 标签，包括 CSS background-image 属性使用的图像。
据我所知，没有这样的 CSS 属性，请问最好的方法是什么？
【问题讨论】：
title 属性，但这对所有元素都没有意义。为什么需要这样做？您是在尝试处理无法加载的图像，还是尝试在加载的图像上添加工具提示？
<div> 中，即使它不能验证您仍然可以在其中获得关键字并且谷歌喜欢它。
我不清楚你想要什么。
如果您想要一个 CSS 属性来呈现 alt 属性值，那么您可能正在寻找 CSS attribute function 例如：
IMG:before { content: attr(alt) }
如果您想将 alt 属性放在背景图像上，那么……这很奇怪，因为 alt 属性是 HTML 属性，而背景图像是 CSS 属性。如果你想使用 HTML alt 属性，那么我认为你需要一个相应的 HTML 元素来放入它。
为什么“需要在背景图像上使用 alt 标签”：这是出于语义原因还是出于某种视觉效果原因（如果是，那么是什么效果或什么原因）？
【讨论】：
一般认为，您不应该将背景图像用于具有有意义的语义价值的事物，因此实际上没有合适的方法来存储这些图像的 alt 数据。重要的问题是您将如何处理这些 alt 数据？如果图像未加载，您是否希望它显示？页面上的某些编程功能是否需要它？ 您可以使用没有意义的合成 css 属性（可能会导致错误？）任意存储数据，或者通过添加具有图像和 alt 标签的隐藏图像，然后当您需要背景图像 alt 时，您可以比较图像路径，然后处理您想要的数据，使用一些自定义脚本来模拟您需要的内容。我不知道如何让浏览器自动处理背景图像的某种 alt 属性。 p>
【讨论】：
我认为您应该阅读 Christian Heilmann 的 this post。他解释说，背景图像仅出于美学考虑，不应用于呈现数据，因此不受每张图像都应具有替代文本的规则的约束。
摘录（重点是我的）：
根据定义仅具有审美价值的 CSS 背景图像 – 不是文档本身的视觉内容。如果你需要放一个 页面中有意义的图像然后使用 IMG 元素并给出它 alt 属性中的替代文本。
我同意他的观点。
【讨论】：
background-size 和background-position 样式与普通的<img> 标签一起使用吗？这些使您的背景图像定位非常灵活，例如，在响应式英雄空间中，图像可能包含至关重要的信息。
这是我对此类问题的解决方案：
在 CSS 中创建一个新类并放置在屏幕外。然后将您的 alt 文本放在 HTML 中调用背景图像的属性之前。可以是任意标签，H1、H2、p等
CSS
<style type="text/css">
.offleft {
margin-left: -9000px;
position: absolute;
}
</style>
HTML
<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image> </div>
【讨论】：
您可以通过将alt 标记放在div 中来实现这一点，这样您的图像就会出现。
例子：
<div id="yourImage" alt="nameOfImage"></div>
【讨论】：
alt 属性添加到 <div>
alt 属性添加到div！！
背景图片确实可以呈现数据！事实上，在呈现视觉图标比等效的文本简介列表更紧凑和用户友好的情况下，通常建议这样做。对image sprites 的任何使用都可以从这种方法中受益。
酒店列表图标显示设施是很常见的。想象一下列出 50 家酒店的页面，每家酒店都有 10 种便利设施。 CSS Sprite 非常适合这类事情——更好的用户体验，因为它更快。但是如何为这些图像实现 ALT 标签呢？ Example site.
答案是他们根本不使用alt 文本，而是在包含的div 上使用title 属性。
HTML
<div class="hotwire-fitness" title="Fitness Centre"></div>
CSS
.hotwire-fitness {
float: left;
margin-right: 5px;
background: url(/prostyle/images/new_amenities.png) -71px 0;
width: 21px;
height: 21px;
}
根据 W3C（参见上面的链接），title 属性与 alt 属性的用途大致相同
标题
title 属性的值可以由用户代理以多种方式呈现。例如，视觉浏览器经常将标题显示为“工具提示”（指点设备在对象上暂停时出现的短消息）。音频用户代理可以在类似的上下文中说出标题信息。例如，在链接上设置属性允许用户代理（可视和非可视）告诉用户链接资源的性质：
替代
alt 属性定义在一组标签（即 img、area 和可选的 input 和 applet）中，以允许您为对象提供等效的文本。
文本等价物在以下常见情况下为您的网站及其访问者带来以下好处：
- 如今，Web 浏览器可用于各种平台，具有不同的能力。有些根本无法显示图像或仅显示有限的一组图像；有些可以配置为不加载图像。如果您的代码在其图像中设置了 alt 属性，则这些浏览器中的大多数将显示您提供的描述而不是图像
- 您的一些访问者无法看到图像，他们可能是盲人、色盲、弱视； alt 属性对于那些可以依靠它来很好地了解您页面上的内容的人来说非常有帮助
- 搜索引擎机器人属于上述两个类别：如果您希望自己的网站得到应有的索引，请使用 alt 属性确保它们不会错过您网页的重要部分。
【讨论】：
实现这一点的经典方法是将文本放入 div 并使用图像替换技术。
<div class"ir background-image">Your alt text</div>
with background-image beeing 你分配背景图像的类，ir 可以是 HTML5boilerplates 图像替换类，如下：
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
【讨论】：
在这篇Yahoo Developer Network (archived link) 文章中，建议如果您绝对必须使用背景图像而不是img 元素和alt 属性，请使用以下ARIA 属性： p>
<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>
文章中的用例描述了 Flickr 如何选择使用背景图片，因为在移动设备上的性能得到了极大的提升。
【讨论】：
正如其他答案中提到的，只有 img 标签的 div 标签没有（支持的）alt 属性。
真正的问题是为什么需要为网站的所有背景图片添加 alt 属性？根据这个答案，它将帮助您确定在您的方法中采用哪条路线。
视觉/文本：如果您只是尝试在图像加载失败时为用户添加文本后备，只需使用标题属性即可。当用户将鼠标悬停在图像上时，大多数浏览器都会提供一个视觉工具提示（消息框），如果图像由于某种原因没有加载，它的行为与图像失败时显示文本的 alt 属性相同。这种技术仍然允许网站通过将图像设置为背景来加快加载时间。
屏幕阅读器：中间选项，这会有所不同，因为从技术上讲，将图像作为背景并使用标题属性方法应该如上所述，“音频用户代理可能会说话标题信息在类似的上下文中。” 但是，这并不能保证在所有情况下都有效，包括一些读者可能会一起忽略它。如果您最终选择了这种方法，您还可以尝试添加 aria-labels 以帮助确保屏幕阅读器能够识别这些内容。
SEO/搜索引擎：这是最重要的，如果您像我一样，添加了背景图片，一切都很好。几个月后，客户（或者你自己）意识到你错过了一些优质的 SEO 黄金，因为你的图片没有 alt。请记住，title 属性在搜索引擎中没有任何权重，根据我的研究和本文中的一篇文章所述：https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/。因此，如果您的目标是 SEO，那么您将需要一个带有 alt 属性的 img 标签。一种可能的方法是在网站上加载带有 alt 属性的非常小的实际图像，这样您就可以获得所有的 SEO，而不必重新调整现有的 CSS。然而，这可能会导致额外的加载时间，具体取决于大小，谷歌在索引时确实会查看图像路径。简而言之，如果您要走这条路，只需接受必须要做的事情并包含实际图像而不是使用背景。
【讨论】：
W3C 的这篇文章告诉你他们认为你应该做什么 https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage
这里有例子 http://mars.dequecloud.com/demo/ImgRole.htm
其中
<a href="http://www.facebook.com">
<span class="fb_logo" role="img" aria-label="Connect via Facebook">
</span>
</a>
不过，如果像上面的例子一样，包含背景图像的元素只是一个空容器，我个人更喜欢将文本放入其中并使用 CSS 隐藏它；就在您显示图像的位置：
<a href="http://www.facebook.com"><span class="fb_logo">
Connect via Facebook
</span></a>
.fb_logo {
height: 37px; width: 37px;
background-image: url('../gfx/logo-facebook.svg');
color:transparent; overflow:hidden; /* hide the text */
}
【讨论】：
这是我的即时修复解决方案：
删除背景图片后，替换文字将从 Img 标记中可见。
.alt-image {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-image{
background:url("https://www.w3schools.com/images/picture.jpg") no-repeat;
width:100%;
height:500px;
position:relative;
}<div role="img" aria-label="place alt text here" title="place alt text here" class="background-image">
<img src="" alt="place alt text here" class="alt-image"/>
</div>【讨论】：