这是我以前没有必须解决的问题.我需要在站点中的所有图像上使用alt标记,包括CSS background-image属性使用的那些图像.
据我所知,没有像这样的CSS属性,那么最好的方法是什么呢？
Ran*_*orn 126
背景图片肯定可以呈现数据!事实上,这通常被推荐用于呈现视觉图标比同等的文本模糊列表更紧凑和用户友好.任何使用图像精灵都可以从这种方法中受益.
酒店列表图标显示设施是很常见的.想象一下列出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属性以确保它们不会错过您网页的重要部分.
Ian*_*unn 35
在这篇Yahoo Developer Network(存档链接)文章中,建议如果您绝对必须使用background-image而不是img element和alt属性,请使用ARIA属性,如下所示:
<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>
本文中的用例描述了Flickr如何选择使用背景图像,因为移动设备的性能得到了极大的提升.
Cᴏʀ*_*ᴏʀʏ 34
我想你应该阅读Christian Heilmann的这篇文章.他解释说,背景图像仅用于美学,不应用于呈现数据,因此不受每个图像应具有替代文本的规则的约束.
摘录(强调我的):
CSS背景图像根据定义仅具有审美价值 - 而不是文档本身的可视内容.如果您需要在具有含义的页面中放置图像,请使用IMG元素并在alt属性中为其提供替代文本.
我同意他的看法.
如前面的答案中所述,对于img标记,div标记没有(支持)alt属性.
真正的问题是为什么你需要为网站的所有背景图像添加alt属性？根据这个答案,它将帮助您确定您的方法采取的路线.
视觉/文本:如果您只是尝试为站点用户添加文本回退,请继续使用title属性.当用户将鼠标悬停在图像上时,大多数浏览器将提供可视化工具提示(消息框),并且如果图像由于某种原因未加载,则其行为与图像失败时呈现文本的alt属性相同.此技术仍允许网站通过将图像设置为背景来加快加载时间.
屏幕阅读器:道路中间选项,这种情况会有所不同,因为在技术上将图像保留为背景并使用标题属性方法应该如上所述,"音频用户代理可以在类似的上下文中说出标题信息." 然而,这并不能保证在所有情况下都有效,包括一些读者可能会忽略它们.因此,您可能最终选择这种方法,甚至可能添加咏叹调标签以帮助确保这些方法被捕获,或者实际上用实际图像替换背景是安全的.
搜索引擎优化/搜索引擎:这是最重要的一个,如果你像我一样,你添加了你的背景图像,一切都很好.然后几个月后,顾客(或者你自己)意识到你错过了一些主要的SEO黄金,因为没有替代你的图像.请记住,标题属性对我的研究和搜索引擎没有任何影响,如下文中的文章所述:https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /.因此,如果您的目标是搜索引擎优化,那么您将需要一个带有alt属性的img标记.一种可能的方法是使用alt属性在网站上加载非常小的实际图像,这样您就可以获得所有搜索引擎优化,而不必重新调整现有的CSS.然而,这可能导致额外的加载时间取决于大小,谷歌确实在索引时查看图像路径.简而言之,如果你要走这条路线,只需接受必须做的事情并包括实际图像而不是背景.
一般的看法是，您不应该将背景图像用于具有有意义的语义值的事物，因此没有真正正确的方法将替代数据与这些图像一起存储。重要的问题是你打算用这些替代数据做什么？如果图像未加载，您是否希望它显示？页面上的某些编程功能需要它吗？您可以使用没有意义的组成 css 属性（可能会导致错误？）或通过添加具有图像和 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%;
}
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 属性呈现 alt 属性值，那么您可能正在寻找CSS 属性函数，例如：
IMG:before { content: attr(alt) }
如果您想将 alt 属性放在背景图像上，那么...这很奇怪，因为 alt 属性是 HTML 属性，而背景图像是 CSS 属性。如果您想使用 HTML alt 属性，那么我认为您需要一个相应的 HTML 元素来放入它。
为什么“需要在背景图像上使用 alt 标签”：这是出于语义原因还是出于某种视觉效果原因（如果是这样，那么是什么效果或什么原因）？