CSS背景图片alt属性

这是我以前没有必须解决的问题.我需要在站点中的所有图像上使用alt标记,包括CSS background-image属性使用的那些图像.

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

1> Randy Greenc..：

---

背景图片肯定可以呈现数据!事实上,这通常被推荐用于呈现视觉图标比同等的文本模糊列表更紧凑和用户友好.任何使用图像精灵都可以从这种方法中受益.

酒店列表图标显示设施是很常见的.想象一下列出50家酒店的页面,每家酒店都有10个设施.CSS Sprite非常适合这类事情 - 更好的用户体验,因为它更快.但是,如何为这些图像实现ALT标签？示例站点.

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

HTML

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属性以确保它们不会错过您网页的重要部分.

---

该规范绝没有暗示title和alt属性具有“许多相同的目的”。它清楚地阐明了两者之间的区别。浏览器和AT *会对它们进行不同的处理，无论有多少作者滥用它们。如果您足够关心可访问性以添加替代文本，则不应使用具有title属性的背景图像，而应使用具有alt属性的img元素作为开始，以使页面加载速度更快。对于那些依赖它的人来说，以无障碍为代价更快地加载并不能为用户带来更好的用户体验。

---

被炸掉的工具提示呢？

2> Ian Lunn..：

---

在这篇Yahoo Developer Network(存档链接)文章中,建议如果您绝对必须使用background-image而不是img element和alt属性,请使用ARIA属性,如下所示:

  ...

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

3> Cᴏʀʏ..：

---

我想你应该阅读Christian Heilmann的这篇文章.他解释说,背景图像仅用于美学,不应用于呈现数据,因此不受每个图像应具有替代文本的规则的约束.

摘录(强调我的):

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

我同意他的看法.

---

那么,你可以使用`background-size`和`background-position`样式和普通的``标签吗？这些使得背景图像的定位非常灵活,例如,在响应的英雄空间中,图像可能包含非常重要的消息.

---

但是,将一个类应用于一个元素并用css背景图像控制它的图像是不是有点整洁 - 比如投票按钮和喜欢的星星？你可以有条件地应用一个类,并让css处理它.否则,您必须通过javascript加载图像文件,具体取决于它的状态,然后在单击时交换图像,并检测单击或后端变量的状态.一种方法比另一种方法复杂得多吗？

---

我看到img标签应该用于内容.然而,在对象适合和对象填充的良好跨浏览器支持之前,抛弃背景图像是不现实的.

4> javaBean007..：

---

如前面的答案中所述,对于img标记,div标记没有(支持)alt属性.

真正的问题是为什么你需要为网站的所有背景图像添加alt属性？根据这个答案,它将帮助您确定您的方法采取的路线.

视觉/文本:如果您只是尝试为站点用户添加文本回退,请继续使用title属性.当用户将鼠标悬停在图像上时,大多数浏览器将提供可视化工具提示(消息框),并且如果图像由于某种原因未加载,则其行为与图像失败时呈现文本的alt属性相同.此技术仍允许网站通过将图像设置为背景来加快加载时间.

屏幕阅读器:道路中间选项,这种情况会有所不同,因为在技术上将图像保留为背景并使用标题属性方法应该如上所述,"音频用户代理可以在类似的上下文中说出标题信息." 然而,这并不能保证在所有情况下都有效,包括一些读者可能会忽略它们.因此,您可能最终选择这种方法,甚至可能添加咏叹调标签以帮助确保这些方法被捕获,或者实际上用实际图像替换背景是安全的.

搜索引擎优化/搜索引擎:这是最重要的一个,如果你像我一样,你添加了你的背景图像,一切都很好.然后几个月后,顾客(或者你自己)意识到你错过了一些主要的SEO黄金,因为没有替代你的图像.请记住,标题属性对我的研究和搜索引擎没有任何影响,如下文中的文章所述:https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /.因此,如果您的目标是搜索引擎优化,那么您将需要一个带有alt属性的img标记.一种可能的方法是使用alt属性在网站上加载非常小的实际图像,这样您就可以获得所有搜索引擎优化,而不必重新调整现有的CSS.然而,这可能导致额外的加载时间取决于大小,谷歌确实在索引时查看图像路径.简而言之,如果你要走这条路线,只需接受必须做的事情并包括实际图像而不是背景.

5> emik..：

---

实现这一目标的经典方法是将文本放入div中并使用图像替换技术.

Your alt text

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