第十天：先呈現妳的主要內容

純粹祇用 CSS 來處理版面的主要好處之一，是可以輕鬆的重新編排 HTML 源碼中各元件的順序，而不影響到實際的版面。因此當其它資料還在載入時，主要內容早就已經顯示出來了。我發現許多網站仍在使用表格來製作版面，所以我為妳撰寫了這個訣竅。

如果妳用表格設計版面，對 Marcus 與 Jackie 等失明的使用者來說，放在左側的瀏覽列會比主要內容更早顯示出來。我不知道怎麼形容隨之而來的問題，不過妳可以自己看看：

用表格製作的版面。
修改過的版面，這次內文在前面。在圖形介面的瀏覽器上看起來應該一樣，但是在 Lynx 上有著明顯的差異。
原本的版面在 Lynx 下的效果。
修改過的版面在 Lynx 下的效果。會先顯示主要內文，然後才是導覽列。

妳不需要從頭規劃整個模版來避免這個問題。我們可以用一些（相對之下）較簡單的技術來讓主要內文先顯示出來，並且讓導覽列維持在左側。我們稱這些技術叫「表格秘訣」。

誰因此獲益？

Marcus 從中獲益了。就跟上面的範例所展示的一樣， Lynx 會依照 HTML 源碼的順序顯示內容。這代表 Marcus 每次瀏覽妳的網頁時都必須要捲動螢幕來跳過導覽列。捲頁爛透了。
Jackie 從中獲益了。因為 JAWS 跟 Lynx 一樣，都會依照 HTML 源碼的順序顯示內容；不過 JAWS 的情況會更糟，因為 Jackie 必須要坐著等 JAWS 唸完整個導覽列後才能聽到真正的內容，而且還沒有保證能直接跳到主要內容的方法。（明天我們就會談到這個問題。）
Google 從中獲益了。越接近頂端的內容，Google會給予越多的加權。這裡的頂端不是指看起來的，而是指 HTML 源碼的頂端。實際上許多瞭解這個技術的人，都參與著搜尋引擎最佳化的研究；對他們來說，網站親和力反倒是其次了。

怎麼做

用 Lynx Viewer 檢查妳的網站，確定每天的文章都會比導覽列先顯示。Movable Type 的預設模版就已經是正確的了；如果妳用的是預設的模版，大概就不需要再做任何事情了；不過還是用 Lynx Viewer 試試看吧，妳會因此對這個議題有更深一層的瞭解。

如果妳使用的是 Radio 的預設模版，也許就需要修改表格，讓主要內文放在前面了。這沒有辦法用複製/貼上的方式做到；妳必須鑽研自己的模版，並且檢視表格的架構。簡單版面與修改過的版面展示了基本的技術。

用表格製作的版面：

<table>
<tr>
  <td valign="top" align="left" width="25%">
    ... navigation bar ...
  </td>
  <td valign="top" align="left">
    ... main content ...
  </td>
</tr>
</table>

我們做了這樣的修改：

<table>
<tr>
  <!-- spacer GIF in upper-left cell -->
  <td><img src="/images/1.gif" width="1" height="1" alt=""></td>
  <!-- main content cell first, with rowspan=2 -->
  <td valign="top" align="left" rowspan="2">
    ... main content ...
  </td>
</tr>
<tr>
  <td valign="top" align="left" width="25%">
    ... navigation bar ...
  </td>
</tr>
</table>

Dive Into Accessibility

第十天：先呈現妳的主要內容

誰因此獲益？

怎麼做

延伸閱讀

站內連結