CSS背景图像alt属性

Question

这是一个我以前没有处理过的问题。我需要使用alt标签在一个网站上的所有图像，包括那些使用CSS的背景图像属性。

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

Answer 1

背景图片一定可以呈现数据！事实上，在呈现视觉图标比等效的文本格式回复信息列表更紧凑和用户友好的情况下，通常推荐这样做。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属性与alt属性的用途大致相同

标题

标题属性的标题值可以由用户代理以各种方式呈现。例如，可视浏览器经常将标题显示为“工具提示”(当定点设备暂停在对象上时出现的一条短消息)。音频用户代理可以在类似的上下文中说出标题信息。例如，在链接上设置属性允许用户代理(可视和非可视)告诉用户所链接资源的性质：

alt

alt属性在一组标记(即img、area和可选的输入和小程序)中定义，以允许您为对象提供等效的文本。

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

• 目前，网络浏览器可以在非常广泛的平台上使用，其功能非常不同；有些浏览器根本不能显示图像，或者只显示有限类型的图像；有些可以配置为不加载图像。如果您的代码在其图像中设置了alt属性，则大多数浏览器将显示您提供的描述，而不是您的某些访问者无法看到的图像，无论他们是盲人、色盲还是弱视；alt属性对于那些可以依赖它来很好地了解页面内容的人非常有帮助
• 搜索引擎机器人属于上述两类:如果您希望您的网站得到应有的索引，请使用alt属性来确保它们不会遗漏页面的重要部分。

Answer 2

在这篇Yahoo Developer Network (archived link)文章中，建议如果你一定要使用背景图片，而不是img元素和alt属性，使用ARIA属性，如下所示：

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

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

Answer 3

我认为你应该读一下克里斯蒂安·海尔曼的“this post”。他解释说，背景图像只是为了美学，不应该用来呈现数据，因此不受每个图像都应该有替代文本的规则的约束。

摘录(重点是我的)：

根据定义，

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

我同意他的观点。