CSS背景图片alt属性

Question

这是我之前没有遇到过的问题。我需要在网站中的所有图像上使用alt标签，包括CSS background-image属性中使用的图像。

据我所知，并没有类似于此的CSS属性，那么请问最好的方法是什么？

- Sixfoot Studio

---

据我所知，你不能这样做。你可以尝试给带有背景图片的元素添加title属性，但这并不适用于所有元素。你为什么需要这样做？你是想处理无法加载的图像，还是想在加载的图像上添加工具提示？ - Cᴏʀʏ

我会把它放在<div>中，即使它不被验证，你仍然可以在其中获得关键词，并且谷歌也喜欢它。 - user1850679

Answer 1

背景图片确实可以展示数据！实际上，这通常被建议在呈现视觉图标比等价的文本摘要列表更紧凑和用户友好的情况下使用。任何使用图像精灵的地方都可以从这种方法中受益。

酒店列表图标通常用于显示便利设施。想象一下一个页面列出了50个酒店，每个酒店有10个便利设施。CSS Sprite非常适合这种情况——更好的用户体验，因为速度更快。但是如何为这些图像实现ALT标签呢？请参考示例站点。

答案是它们根本不使用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 alt属性被定义在一组标签中（即img、area以及可选的input和applet），使您能够为对象提供文本等效内容。在以下常见情况下，文本等效内容为您的网站及其访问者带来以下好处：

• 现在，Web浏览器在很多不同平台上都有非常不同的容量；有些根本无法显示图像，或只能显示受限类型的图像；有些可以配置为不加载图像。如果您的代码设置了图像的alt属性，则大多数这些浏览器将显示您提供的描述，而不是图像。
• 其中一些访问者无法看到图像，无论是因为失明、色盲还是视力低下；对于那些可以依赖它来获取页面上内容的良好概念的人来说，alt属性非常有帮助。
• 搜索引擎机器人属于以上两类：如果您希望您的网站得到应有的索引，请使用alt属性以确保它们不会错过您网页中的重要部分。

- Randy Greencorn

---

好的答案，类似问题的解决方案：加上一些补充。 - Ani Menon

还有一点需要注意，符合ADA标准的网站图片必须具备alt标签！ - cpcdev

那爆炸的工具提示怎么办？ - Joel Farris

规范并没有暗示标题和alt属性具有“很多相同的作用”，它清楚地阐述了两者之间的差异。无论作者如何滥用它们，浏览器和辅助技术都会不同对待它们。如果您关心无障碍性并希望添加alt文本，您不应该在需要使用img元素和alt属性的地方使用title属性的背景图像，以便使页面加载更快。以牺牲无障碍性为代价来加速加载速度，并不会对那些依赖于它的人产生更好的用户体验。 - BoltClock

Answer 2

在这篇Yahoo Developer Network（存档链接）文章中建议，如果您一定要使用背景图像而不是img元素和alt属性，则应使用以下ARIA属性：

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

这篇文章中描述的使用案例展示了Flickr选择使用背景图像的原因是因为这样可以显著地提高移动设备的性能。

- Ian Lunn

---

我认为Flickr的真正意图是让图片下载更加困难，但我同意ARIA标签。 - Cᴏʀʏ

雅虎开发者网络文章的链接不再可用。是否有更新或替代链接的可能性？ - Antoni4

@Antoni4 请看这里：https://web.archive.org/web/20160728160132/https://developer.yahoo.com/blogs/ydn/restoring-semantics-accessibility-aria-while-optimizing-mobile-performance-52427.html - Ian Lunn

Answer 3

我认为你应该阅读Christian Heilmann的这篇文章，可以通过此链接查看。他解释说，背景图片仅用于美学目的，不应用于呈现数据，因此可以豁免每个图像都应有替代文本的规定。

引用摘录（我强调）：

CSS背景图片只具有美学价值而非文档本身的视觉内容。如果你需要在页面中放置具有含义的图像，则使用IMG元素并在alt属性中提供替代文本。

我同意他的观点。

- Cᴏʀʏ

---

谢谢Cory。这是一篇非常好的文章，足以让客户相信背景图片不能有alt属性。 - Sixfoot Studio

使用CSS背景图像通过为元素应用类并控制其样式，例如投票按钮和收藏星标，会更加整洁。您只需有条件地应用类，并让CSS处理它即可。否则，您需要根据其状态通过JavaScript加载图像文件，然后在单击时交换图像并检测单击或后端变量的状态。这两种方法哪种更复杂一些？ - ahnbizcad

此外，对于需要更改的图像，您无法使用精灵图。 - ahnbizcad

那么，您能在普通的<img>标签中使用background-size和background-position样式吗？这些样式使得背景图片的定位非常灵活，例如在响应式的主页空间中，图像很可能包含一个至关重要的信息。 - Jeff Ward

我看到应该使用img标签来处理内容。但在object-fit和object-fill得到良好的跨浏览器支持之前，放弃background-image还不现实。 - Skitterm

Answer 4

如其他回答所述，div标签没有（受支持的）alt属性，只有img标签才有。

真正的问题是为什么需要为网站中的所有背景图片添加alt属性？根据这个答案，它将帮助你确定在处理中采取哪种方法。

视觉/文本：如果你只是想在图像无法加载时为用户添加文本回退，那么简单地使用title属性即可。大多数浏览器会在用户悬停在图像上时提供一个视觉工具提示（消息框），如果由于某种原因图像未加载，则行为与alt属性一样呈现文本。此技术仍允许网站通过保持图像设置为背景来加快加载时间。

屏幕阅读器：中间路线的选择，这取决于具体情况，因为从技术上讲，将图像保持为背景并使用标题属性方法应该能够正常工作，正如上面所暗示的那样，“音频用户代理可以在类似的上下文中发出标题信息。”但是不能保证在所有情况下都能正常工作，包括一些读者可能完全忽略它。如果你最终选择采用这种方法，可以尝试添加aria-labels来帮助确保屏幕阅读器捕捉到这些信息。

SEO/搜索引擎： 这是个大问题，如果你跟我一样，添加了背景图片并且一切看起来都很好。几个月后，客户（或者也许是你自己）才意识到由于没有为图像添加alt属性而失去了一些主要的SEO优势。请注意，标题属性在搜索引擎中没有任何权重，根据我的研究以及本文所述：https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/。因此，如果您想要实现SEO，那么必须在img标签中使用alt属性。一种可能的方法是在网站上加载非常小的实际图像，并带有alt属性，这样您就可以获得所有的SEO，并且无需重新调整已存在的CSS。然而，这可能会导致额外的加载时间，具体取决于图像的大小，而Google在索引时确实查看图像的路径。简而言之，如果您选择这种方法，请接受必须完成的任务并包含实际的图像，而不是使用背景。

- javaBean007

Answer 5

一般认为，你不应该在具有意义的语义值的元素中使用背景图像，因此没有真正正确的方法来存储这些图像的替代数据。重要的问题是，你将用替代数据做什么？你想在图像未加载时显示它吗？你需要它用于页面上的某些编程功能吗？你可以使用毫无意义的虚构CSS属性任意地存储数据（可能会导致错误？）或通过添加具有图像和alt标签的隐藏图像，然后当你需要一个背景图像的alt时，你可以比较图像路径，然后使用一些自定义脚本处理数据以模拟你需要的内容。目前我不知道如何让浏览器自动处理背景图像的替代属性。

- ameer

---

谢谢您的贡献，Ameer！ - Sixfoot Studio

它们通常用于盲人。 - Dominic

Answer 6

这篇来自W3C的文章告诉你在IT技术中应该怎样做。以下是具体实例： - 这里有W3C提供的关于使用ImgRole和aria-label为CSS背景图片的技巧：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 */
}

- commonpike

Answer 7

传统的方法是将文本放入 div 中，然后使用图像替换技术实现。

<div class"ir background-image">Your alt text</div>

“with background-image”是一个类名，用于指定背景图片。可以使用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%;
}

- emik

Answer 8

这里是我对即时修复的解决方案：

一旦背景图像被移除，就会从Img标签中显示alt文本。

.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>

- fideliis francis

Answer 9

以下是我对这类问题的解决方案：

在CSS中创建一个新类并将其定位到屏幕外。然后，在调用背景图像的属性之前，将您的替代文本放在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>

- sloga

Answer 10

我不清楚你想要什么。

如果你想让CSS属性呈现alt属性的值，那么也许你正在寻找CSS属性函数，例如：

IMG:before { content: attr(alt) }

如果您想在背景图像上使用alt属性，那么...这有点奇怪，因为alt属性是HTML属性，而背景图像是CSS属性。如果您想使用HTML alt属性，我认为您需要一个相应的HTML元素来放置它。

您为什么“需要在背景图像上使用alt标签”：这是出于语义原因还是出于某些视觉效果原因（如果是，则是什么效果或原因）？

- ChrisW

---

谢谢Chris。我已经决定不再使用这种方法，但我也感谢你的建议！ - Sixfoot Studio