标记语言——图片替换(4)

方法C: Phark法

网络最棒的地方,就是一只会有人改进现有技术,寻找出要完成相同目标可用的不同方法.在2003年8月,开发者Mike Rundle制造出自己的图片替换法变形(http://phark.typepad.com/phark/2003/08/accessible_imag.html),以特殊的点子,为想要隐藏的文字指定很大的负数text-indent值.文字理论上仍然会出现在屏幕上,但是超出显示范围太多,就算在最大的屏幕上也不会显示出来,这真是聪明的方法.

标记语言和CSS

与方法B类似,Phark法(以Mike网站的昵称为名)同样不需要额外的标签就能正常运作.使用方法C后标题标记源代码就像这样:

<h1 id="phark">The Phark Method</h1>

这个方法不必用上FIR法额外需要的<span>标签,让我们看看隐藏文字,把它置换成图14-5中的图片所需的简单CSS内容:

图14-5 我们用来替换文字的高26像素的图片phark.gif

#phark {

  height: 26px;

  text-indent: -5000px;

  background: url(phark.gif) no-repeat;

  }

如你所见,方法C是目前最简单的方法,不需要打上盒模型Hack或额外的标签,通过为文字设定夸张负缩进值,就能把文字推到屏幕之外,让使用者看不见它的内容.

与方法B一样,使用这个方法的时候,屏幕阅读器的使用者应该也能正常听到标题文字的内容,这的确是个进步.

仍然不完美

虽然Phark法最容易实现,但是它仍然会在"关闭图片显示,启用CSS"的情况下发生问题,虽然听起来实在不容易发生,但是这代表了在撰写这段文字的时候,暂时还没有完美的解决方法可用.

让我们复习一下先前展示的三种方法,并且归纳它们的差异.