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

转载 2005年02月28日 17:20:00

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

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

  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>

《Dive Into Python》非死不可

译者言:早在 2008 年 8 月,我就曾在自己的博客发表了一篇《为什么不值得推荐》(http://blog.csdn.net/lanphaday/archive/2008/08/28/2845258...
  • lanphaday
  • lanphaday
  • 2010年05月05日 11:07
  • 24852

为什么《Dive into Python》不值得推荐

2010 年 5 月 5 日更新:我翻译了一篇《非死不可》作为对本文观点的进一步支持和对评论的回复,请见:http://blog.csdn.net/lanphaday/archive/2010/05/...
  • lanphaday
  • lanphaday
  • 2008年08月28日 11:21
  • 81545

深入 Python :Dive Into Python 中文版

http://woodpecker.org.cn/diveintopython/performance_tuning/timeit.html
  • huaweitman
  • huaweitman
  • 2013年07月23日 11:54
  • 1410

[Dive into Python:]第一个 Python 程序程

[Dive into Python:]第一个 Python 程序 Python缩进、函数定义、\__name\__
  • wssjlrw
  • wssjlrw
  • 2016年09月10日 22:02
  • 269

深入Python3 (Dive Into Python3)笔记3--解析

深入Python3 (Dive Into Python3)笔记系列
  • wangwei200508
  • wangwei200508
  • 2010年11月23日 21:19
  • 1217

在oracle里,如何取得本周、本月、本季度、本年度的第一天和最后一天的时间

在oracle里,如何取得本周、本月、本季度、本年度的第一天和最后一天的时间 ------解决方案-------------------- SQL code --本周 select tru...
  • suyujiezhang
  • suyujiezhang
  • 2015年10月15日 15:56
  • 732

Microsoft Active Accessibility

http://www.cnblogs.com/gnagwang/archive/2010/04/20/1716006.html MSAA的全称是Microsoft Active ...
  • leeo1010
  • leeo1010
  • 2013年08月28日 18:22
  • 1041

X64 Deep Dive

X64 Deep Dive This tutorial discusses some of the key aspects of code execution on the X64 CPU ...
  • CPP_CHEN
  • CPP_CHEN
  • 2012年05月15日 21:44
  • 2082

oracle EM中accessibility mode为disable解决方案

今天开启em时显示accessibility mode为disable。查询网上解决方案如下: 进入cd $ORACLE_HOME/oc4j/j2ee/oc4j_applications/appli...
  • huhu307
  • huhu307
  • 2016年04月12日 11:13
  • 584

Error 1 Inconsistent accessibility: parameter type C#编译时候出错

问题场景: 我在C#定义了一个类A,其类型是默认类型,也就是只对命名空间内部全部开放。 另外我又在另外一个命名空间里定义了另外一个类B(为public类型),并且在这个类中定义了A的public对...
  • jaylong35
  • jaylong35
  • 2012年12月14日 22:53
  • 4212
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Dive Into Accessibility 第十天:先呈现你的主要内容
举报原因:
原因补充:

(最多只允许输入30个字)