第二十五天：使用真正的水平分割线（或以适当的方法伪造）

假设你想要在你的文章中间一分为二；但是典型的水平分隔线（也就是 <hr> 卷标）很无趣，所以你改用了另外一个图片。这当然行得通，而且还可以轻易地加上 alt 文字来增加亲和力。

然而你还可以更进一步地使用真实的水平分隔线，然后再用 CSS 手法，使其在主流浏览器里看起来跟图片一样。比较旧的浏览器或者是纯文字浏览器则会忽略掉 CSS 的部分，然后用原来的样子画出水平分割线（纯文字浏览器通常会用一列跟屏幕等宽的底线或横线来表示）。

我马上就会展示这两种技术。

谁因此获益？

Jackie 从中获益了。正如我们之前所看到的， JAWS 会在图片没有 alt 属性时，把档名念出来。
Marcus 从中获益了。因为 Lynx 会在图片没有 alt 属性时，显示出档名。如果你用了真的水平分割线，那么 Lynx 就会画出一堆跟你的屏幕等宽的底线。
Michael 从中获益了。因为 Links 在图片没有 alt 属性时，甚么也不会显示出来；如此一来 Michael 将无法得知这里有个分割线。我们至少需要 alt 文字，最好是直接使用真的 <hr> 卷标，这么一来 Links 就会画出一堆跟你的屏幕等宽的横线。

怎么做

如果你把一张图片当作是水平分割线来用的话，增加亲和力的最简单方法就是在你的 <img> 卷标里增加 alt 属性。同时你也应该再加一个空的 title 属性，这样子在视觉性浏览器里才不会出现工具提示。所以如果你的是像这样的话：

<img src="/images/fancyrule.gif" width="442" height="25">

把他改成这样：

<img alt="--" title="" src="/images/fancyrule.gif" width="442" height="25">

请不要发疯地在 alt 文字里填上八十个横线。两三个就够了。

怎么做：进阶版

进阶（而且也比较好）的技术就是用 <hr> 卷标。虽然在最理想的情况下，浏览器很神奇地能够支持直接定义著样式的 <hr> 卷标，我们在此仍旧沿用笨笨的 <div> 卷标来显示影像。把下列的 CSS 放在你模版顶端的 <style> 区段里（如果你用了像是 style-sites.css 的外部样式表的话，就在那个档案里面随便找个地方放；如果你用了多重样式表的话，就把他放在 Netscape 4 适用的那一个里）。

div.hr {display: none}
/*/*/a{}
div.hr {
  display: block;
  height: 25px;
  background-image: url(/images/fancyrule.gif);
  background-repeat: no-repeat;
  background-position: center center;
  margin: 1em 0 1em 0;
}
hr {display:none}
/* */

（在 height 里的是你的图片高度；在 background-image 里的是你的图片地址。）

然后在你的模版中，当你想要插入这种华丽的分隔线时，就这样做：

<div class="hr"></div><hr />

结果：

所有的主流浏览器现在都不会显示普通的水平分隔线，而是显示出你的图片。
Netscape 4 祇会显示出普通的水平分隔线。
纯文字浏览器会忽略掉 CSS ，所以他们也祇会显示出普通的水平分隔线（通常是画成一堆底线或斜线）。

Dive Into Accessibility