第二十五天：使用真正的水平分割線（或以適當的方法偽造）

假設妳想要從文章中間一分為二，但是典型的水平分隔線（也就是 <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