Dive Into Accessibility 第十天：先呈现你的主要内容

纯粹祇用 CSS 来处理版面的主要好处之一，是可以轻松的重新编排 HTML 源码中各组件的顺序，而不影响到实际的版面。因此当其它数据还在加载时，主要内容早就已经显示出来了。我发现许多网站仍在使用表格来制作版面，所以我为你撰写了这个诀窍。

如果你用表格设计版面，对 Marcus 与 Jackie 等失明的使用者来说，你放在左侧的浏览列会比主要内容更早显示出来。我不知道怎么形容随之而来的问题，不过你可以自己看看：

1. 用表格制作的版面。
2. 修改过的版面，这次内文在前面。在图形接口的浏览器上看起来应该一样，但是在 Lynx 上有著明显的差异。
3. 原本的版面在 Lynx 下的效果。
4. 修改过的版面在 Lynx 下的效果。主要内文会先显示，然后才是导览列。

你不需要从头规划整个模版来避免这个问题。我们可以用一些（相对之下）较简单的技术来让主要内文先显示，并且让导览列维持在左侧。我们称这些技术叫「表格秘诀」。

谁因此获益？

1. Marcus 从中获益了。就跟上面的范例所展示的一样， Lynx 会依照 HTML 源码的顺序显示内容。这代表 Marcus 每次浏览你的网页时都必须要卷动屏幕来跳过导览列。卷页烂透了。
2. Jackie 从中获益了。因为 JAWS 跟 Lynx 一样，都会依照 HTML 源码的顺序显示内容；不过 JAWS 的情况会更糟，因为 Jackie 必须要坐著等 JAWS 念完整个导览列后才能听到真正的内容，而且还没有保证能直接跳到主要内容的方法。（明天我们就会谈到这个问题。）
3. 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>