我刚想出这个,它似乎适用于所有现代浏览器,我只是在(IE8/兼容性、Chrome、Safari、Moz)上对其进行了测试
HTML
<img id="my_image" alt="my text" src="images/small_transparent.gif" />
CSS
#my_image{
background-image:url('images/my_image.png');
width:100px;
height:100px;}
专业人士:
- 图像替代文本是可访问性/seo 的最佳实践
- 没有额外的 HTML 标记,而且 css 也非常小
- 解决 css on/images off 问题,其中“文本缩进”技术仍然为低带宽用户隐藏文本
我能想到的最大缺点是 css off/images on 情况,因为你只会发送一个透明的 gif。
可能可以编写一些 javascript 来帮助解决这个问题,用它们的背景图像 css 属性替换所有图像源。但这只有在浏览器仍然将 css 属性附加到元素然后忽略它们时才有效。我不知道是不是这样,我得测试一下。您还想开发一个基于 javascript 的测试来查看是否将 css 应用于页面(可能检查某些测试元素的位置)。
顺便说一句,我想知道,谁使用没有样式表的图像?某种手机什么的?
编辑:
根据下面的评论...内联样式 hrm...也许我应该只制作一个 php 辅助函数,例如<?php echo css_image('image_id','my text','image_url');?>
生成一些这样的代码:
HTML
<div id="image_id" style="background-image:url('image_url')" class="image">
<img src="image_url" class="alt_text" alt="my text" />
<p>my text</p>
</div><!--/#my_image-->
然后在样式表中附加一些 CSS
#image_id{width:*image width*;height:*image height*}
.alt_text{position:absolute;top:0px;left:0px}
.image{display:block;background-position:left top}
.image p{position:absolute;left:-9999em}
这是我正在使用的一种较旧的技术,但不确定我在哪里找到它。它适用于 CSS on/images off、CSS off/images on、CSS on/images on。
如果关闭 CSS/图像的用户访问,他们会看到双倍的文本。如果搜索引擎蜘蛛访问,他们会看到替代文本和常规文本,智能蜘蛛可以很容易地识别出它是什么,这是一种无辜的图像替换技术。
因此,这种技术对于屏幕阅读器来说是最糟糕的,因为会读取 alt 文本,但这些用户应该能够跳到下一段,这就是我坚持<p></p>
“我的文本”的原因。
其他所有关闭 CSS 和图像的人都是某种机器人,对吧?