CSS背景图片alt属性

这是我以前没有解决过的问题。我需要在网站上的所有图像上使用alt标签，包括CSS background-image属性使用的那些标签。

据我所知，没有这样的CSS属性，那么最好的方法是什么？

背景图像肯定可以显示数据！实际上，通常推荐使用这种方法，在这种情况下，与同等的文本内容列表相比，呈现可视图标更为紧凑和用户友好。任何使用图像精灵都可以从这种方法中受益。

酒店列表图标显示便利设施是很常见的。想象一个页面，其中列出了50家酒店，而每家酒店都有10种便利设施。CSS Sprite非常适合此类事情-更快，因此更好的用户体验。但是如何为这些图像实施ALT标签？范例网站。

答案是他们根本不使用alt文本，而是使用title包含div上的属性。

的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属性的用途相同

标题

标题属性的值可以由用户代理以多种方式呈现。例如，视觉浏览器经常将标题显示为“工具提示”（当指针设备悬停在对象上方时显示的短消息）。音频用户代理可以在类似的上下文中说出标题信息。例如，在链接上设置属性允许用户代理（可视和非可视）向用户告知链接资源的性质：

alt

alt属性在一组标签（即img，area以及可选的输入和applet）中定义，以允许您为对象提供等效的文本。

在以下常见情况下，等效文本可为您的网站及其访问者带来以下好处：

• 如今，Web浏览器可用于功能迥异的各种平台。有些根本无法显示图像，或者只能显示一组受限的图像类型；有些可以配置为不加载图像。如果您的代码在图像中设置了alt属性，则大多数此类浏览器将显示您提供的描述，而不是图像
• 您的某些访问者看不见图像，包括盲目，色盲，低视力；alt属性对于可以依靠它对页面内容有个好主意的人们有很大的帮助
• 搜索引擎机器人属于以上两个类别：如果您希望对您的网站进行索引和应有的索引，请使用alt属性以确保它们不会错过您页面的重要部分。

在此Yahoo开发人员网络（归档链接）文章中，建议如果绝对必须使用背景图像而不是img元素和alt属性，请按如下所示使用ARIA属性：

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

本文中的用例描述了Flickr如何选择使用背景图像，因为在移动设备上性能得到了极大的提高。

我认为您应该阅读Christian Heilmann的这篇文章。他解释说，背景图像是ONLY出于美学目的，不应用于呈现数据，因此免除了每张图片都应具有替代文本的规定。

摘录（强调我的）：

CSS背景图像，根据定义，仅具有美学价值，而不是文档本身的视觉内容。如果需要在页面中放置有意义的图像，请使用IMG元素，并在alt属性中为其提供替代文本。

我同意他的观点。

如其他答案中所提到的，仅img标签没有div标签的alt属性。

真正的问题是，为什么需要将alt属性添加到该网站的所有背景图像？根据此答案，它将帮助您确定采用哪种方法。

视觉/文字：如果图像加载失败，如果您只是想为用户添加文字回退，则只需使用title属性。当用户将鼠标悬停在图像上时，大多数浏览器都将提供可视化的工具提示（消息框），并且如果由于某种原因未加载图像，则其行为与图像出现故障时显示文本的alt属性相同。该技术仍然允许站点通过将图像设置为背景来加快加载时间。

屏幕阅读器：道路选项的中间部分有所不同，因为从技术上讲，将图像保留为背景，并使用标题属性方法应如上所暗示的那样起作用：“音频用户代理可以在类似的上下文中说出标题信息。” 但是，这不能保证在所有情况下都有效，包括某些读者可能会一并忽略。如果最终选择这种方法，则还可以尝试添加aria标签，以帮助确保屏幕阅读器识别这些标签。

SEO /搜索引擎：这是最重要的，如果像我一样，您添加了背景图片，一切都很好。然后几个月后，客户（或也许是您自己）意识到，由于没有图像的替代符号，您错过了一些优质的SEO黄金。请记住，根据我的研究以及此处的文章中所述，title属性对搜索引擎没有任何影响：https : //www.searchenginejournal.com/how-to-use-link-title-attribute-正确地/。因此，如果您打算进行SEO，则需要具有alt属性的img标签。一种可能的方法是仅使用alt属性在站点上加载非常小的实际图像，这样您就可以获取所有SEO，而不必重新调整现有的CSS。但是，这可能会导致额外的加载时间，具体取决于大小，Google确实在索引时会查看图像路径。简而言之，如果您要走这条路线，只需接受必须做的事情，并包括实际的图像，而不要使用背景。

人们普遍认为，您不应该将背景图像用于具有有意义语义价值的事物，因此，实际上并没有一种适当的方法来将alt数据与这些图像一起存储。重要的问题是您将如何处理替代数据？如果不加载图像，是否要显示它？您是否需要页面上的某些编程功能？您可以使用没有意义的css属性（可能会导致错误？）或通过添加具有image和alt标签的隐藏图像来任意存储数据，然后在需要背景图像alt时可以比较图像路径，然后根据需要使用一些自定义脚本来模拟所需的数据来处理数据。 我没有办法让浏览器自动处理背景图片的某种alt属性。

实现此目的的经典方法是将文本放入div并使用图像替换技术。

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

使用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%;
}

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 */
}

这是我针对此类问题的解决方案：

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

我不清楚您想要什么。

如果您希望CSS属性呈现alt属性值，那么也许您正在寻找CSS属性函数，例如：

IMG:before { content: attr(alt) }

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

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

您可以通过将alt标签放入div图片将出现的位置来实现。

例：

<div id="yourImage" alt="nameOfImage"></div>