|
打造更具亲和力的网站
|
|
来源：sysku.com 作者：Mark Pilgrim 发布时间：2008-02-03
|
|
这是我所见到的第一篇免费的关于网站亲和力的书
，读来很收获。本书获得2003 Weblog Awards的Best articl or essay about weblog.
这篇书作者Mark Pilgrim将原作放在http://www.diveintoaccessibility.org/，由hlb和Jedi合作翻译成中文，我的学习就以这书为课本的。
第6天，选择DOCTYPE.
每个页面都要使用DOCTYPE,在html文件的第一行注明。为什么要用，可参考：
* A List Apart：Fixing Your Site With The Right DOCTYPE
* MSDN：Quirks mode in IE 6 （注意：某些版本的 Netscape 跟 Mozilla 无法浏览这个网站；这是 Microsoft 的问题，不是我的。）
* Quirks mode in Mozilla
有哪些DOCTYPE，可参考http://www.w3.org/QA/2002/04/valid-dtd-list.html.
第7天，指定所用的语言。
语言的指定，要用ISO 639-1规定的两节字码。且根据DOCTYPE的不同，具体操作也有差异。
1. HTML 4,<html lang="en">
2. XHTML 1.0,<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
3. XHTML 1.1,<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html lang="de">
...
<blockquote lang="en">
...
</blockquote>
第8天，建立有意义的网页标题 不但有助于理解、显示或朗读软件，而且会影响到GOOGLE的排名呢。
第9天，提供额外的导游帮助
利用标签，这个标签在图形浏览器中不会显示，但会显示在lynx中，且有助于google的搜索。我根据书的建议，打算修改MT的模板，后来发现MT已经做了这个工作了。
第10天,先呈现你的主要内容
以前没有注意过这个问题的实现技巧，现在终于明白了。浏览器，特别是字符型浏览器，是以字符流的顺序展示收到页面的内容的，先到者先显示。所以，想展示的主要内容，要放在文件的前面。可是，一般来说人们都习惯于将菜单栏放在顶端或左端，这些几乎在每个页面上都会显示的文字，抢占了非图形浏览器中人们的视野。下面这个小技巧，可以对付菜单在左边的情况。
<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>
第11天，跳过导航的链结
就是用一个在图形浏览器中不显示而在字符浏览器会显示出来的页内链接，跳过导航连接，直接到达主要显示内容。
链接的实现，需要在<style>后面定义.skiplink {display:none}；然后将链接定义为<a class="skiplink" href="#startcontent">跳到主要内容</a>即可。
而对页内的锚接定义，则因DOCTYPE的不同而有所不同，如下：
1. HTML 4,<a name="startcontent"></a>
2. XHTML 1.0,<a name="startcontent" id="startcontent"></a>
3. XHTML 1.1,<a id="startcontent"></a>
我前几天检查页面死链时，就在分析其报告时，闹了笑话。
第12天，安全地使用色彩
主要注意文字色与背景色不要太相近，及最后能在链接上加一些装饬如粗体、斜体及下划线等，以便照顾色弱者。用VisCheck提供的Photoshop插件，可以模拟出色弱者看到屏幕状态。
第13天，使用真实链接
如果一个链接是“javascript:...”，那么对使用不支持javascript的浏览器的读者来说是一种灾难。而且，这种链接也不会google所分析。
如果你非要用，可以如下变通，如：
<a href="javascript:OpenComments(<$MTEntryID$>)">Comments (<$MTEntryCommentCount$>)</a>
改为
<a href="<$MTCGIPath$>mt-comments.cgi?entry_id=<$MTEntryID$>" onclick="OpenComments(<$MTEntryID$>); return false">Comments (<$MTEntryCommentCount$>)</a>
另外，如果javascript开新窗口，则可用 target="..." 来模拟。
第14天，在链接上加入标题
在链接上加上标题，可以事先告诉用户要去什么地方或将看到什么内容或补充解释一下链接的文字，等，但也不要滥用哟。举个例子。
<a title="referrers and other visitor statistics" href="/stats/">Statistics</a>
第15天，定义快捷键
HTML中链接和表单项可以定义快捷键，按下alt+快捷键（windows是alt,mac是control），前者可直接跳到相应的页面，后者可取得输入焦点。
约定俗成alt+1到主页，alt+2到主要内容，alt+9到写信。
我用的MT的单文档归档模板中，定义了alt+1,但没跳过导航菜单的链接，我作了修改并加了个alt+2键，我用NetScape7.1试了试，确实如此，但是对IE6.0好象只能跳到accesskey所在URL在页面中的位置。
第16天，不要开出新窗口
不要开新窗口，或者由用户决定。如果非开不可，请明确告诉读者。
<a>的target是被反对使用的，且会使页面无法通过HTML4.0strict及XHTML 1.0 strict检测。
第17天，定义首字母缩略词
定义<acronym title="hypertext markup language">HTML</acronym>;
显示<style> acronym{border-bottom: 1px dotted black;}</style>
例如：OSW.
当然，要想显示出下划虚线，当然要修改模板，并重建页面了。
第18－20天，使用表格的标题，列头标题和表格摘要。
<table summary="这是一个带有每天发文归档的日历">
<caption> 日历 </caption>
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</table>
显示为：
日历 Sun Mon Tue Wed Thu Fri Sat
1 2 3 4 5 6 7
第21天，让浏览器忽略占位图片
在<img>中置alt=""。占位图片，一般都不是用来显示的，大都与背景着色相同。如前面显示主要内容一节中的小图片。
第22天，让
显示更亲和。
* 可以利用CSS，来控制显示每个前的符号或图片，以及字串的对齐方式。如。
<style type="text/css">
ul.blogroll {
list-style: url(/images/fancydot.gif) disc;
text-aling: right;
}
</style>
第23－24天，提供替代图片的文字
每一个页面里的每一张图片（包括地图<map>中的每超链区域），都该提供足以取代的文字部分，也就是所谓的「 alt 文字」；这是用 <img> 或<area>里用 alt 属性加以指定的。例如：
<img alt="Site navigation links" src="footer.gif" width="500" height="212" usemap="#Map">
<map name="Map">
<area alt="previously..." shape="rect" coords="203,114,258,129" href="/archives.html">
<area alt="by category" shape="rect" coords="277,113,348,129" href="/category/">
<area alt="about the site" shape="rect" coords="364,113,401,128" href="links.html">
<area alt="about leslie" shape="rect" coords="418,114,488,130" href="leslie.html">
<area alt="Powered by Movable Type" shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org">
</map>
第25天，使用华丽的水平分隔线
先这样定义：
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}
/* */
然后这样使用：
<div class="hr"></div><hr />
第26天，使用相对字体大小
抄一段设定字体的技巧吧。
p {
font-size: 12px;
}
/*/*/a{}
body p {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body p {
font-size: small;
}
/* */
接下来的都很重要，所以请注意。
1.首先，我们定义 <p> 的绝对尺寸 (12px) 。包括 Netscape 4 在内，所有的浏览器都会接受这个样式设定。
2.接著我们加入「 /*/*/ 」这个古怪的批注。根据 Netscape 4 的错误，所有在这个批注之后的东西都会被忽略掉。如此一来，只有 Netscape 4 以外的浏览器才会看到之后的样式。
3.紧接在那个古怪的批注之后，我们又加入一个空白的样式「 a {} 」。 Mac 上充满错误的 Opera 5 会忽略这个样式（只有这一个），而接受其它所有的。
4.现在我们已经切出一个范围了，在这个范围内所定义的规则祇会套用在 Netscape 4 以外的其它浏览器上。接下来我们就可以开始定义相对字体尺寸（这也就是 Netscape 4 所无法处理的）了。首先我们要用「 body p 」选择子来重新定义 p 卷标的作用。因为 CSS 可行的关系，这将会覆写掉先前的 p 选择子（用技术名词来描述的话，就是「 body p 」选择子比「 p 」选择子还要更具特定性）。
5.我们把所有 <p> 卷标的字体尺寸重新定义成 x-small 。这个字体尺寸关键词在预设的情况下，会被 Windows 上的 Internet Explorer 5 转译成 12px 。然而祇要使用者（从检视选单）更改了「字型」，这些文字就可能会依照使用者的设定而变得更大或更小。这也正是我们的目的（请注意：我们现在已经对 IE5/Win 定义了两次字体尺寸；不过这并没有关系，因为更特定的选择子总是会胜出，而让前一个选择子被忽略掉）。
6.很不幸地 IE5/Win 在字体尺寸关键词上有一刻度的错误：世界上所有其它浏览器（包括 IE5/Mac 、 Netscape 6 、 Mozilla 、 IE6/Win）都会把 x-small 转译成 10px ，而非 12px 。不过很幸运地， IE5/Win 另外还有一个分析错误之处，可以被我们拿来加以利用：当他看到那个看起来很奇怪的 voice-family 时，会误以为整个「 body p 」选择子已经结束了，然后就忽略掉「 } 」之后的那几列。
7.现在我们又切出了一个更小的范围了，在这个范围内所定义的规则祇会套用在 IE5/Win 以外（至于 Netscape 4 早就被排除在外了）的浏览器上。如此一来我们就可以再把字体尺寸重新定义成 small 了。这么一来，在非 IE5/Win （也就是会一路解读到这一层的那些）浏览器上就会被正确地解读成 12px 了（在预设的情况下）。当然，如果使用者把「字体尺寸」设成较大，这里的文字也会变得比较大。这仍旧是我们所想要有的功能。
8.但是等一下！ Opera 5 也有跟 IE5/Win 一样的分析错误，所以有可能也会被 voice-family 黑克手法弄混，可是他又会正确地转译字体尺寸关键词，结果就是我们的文字在 Opera 5 底下将会变得太小。很幸运地， Opera 5 还支持第三种选择子：「 html>body p 」（而且这个选择子比「 body p 」还要「更具特定性」，所以会覆写掉前一个选择子的内容）。 IE5/Win 并不支持这种选择子，所以会加以忽略，而这也正是我们所需要的（因为我们已经处理过那个一刻度的错误了，所以现在当然不会想要再把这个偏差放回去）。 IE6/Win 同样地也不支持这个选择子，不过这并没有甚么关系，因为在「 body p 」选择子里，我们把「 font-size: small 」放在黑克用的「 voice-family: inherit 」之后。所有其它的浏览器都支持「 html>body 」选择子；所以对他们来说，我们足足定义了四次字体尺寸。这当然没有问题，因为祇有最具特定性的选择子才会生效，其它的都祇会被忽略掉。
9.最后我们还得设定一个空批注： /* */ 。这样才会让 Netscape 4 继续分析之后的部分。任何在这个空批注之后定义的规则，也都会套用到所有的浏览器（包括 Netscape 4 ）上。
现在让我们反过来看：
1.无论使用者设定了甚么， Netscape 4 都会把 <p> 文字显示成 12px 。
2.Windows 上的 Internet Explorer 5 会把 <p> 文字显示成 x-small 。依照预设值的话，也就是 12px ；不过如果你在检视选单里把「字型」设成较大的话，这里的文字看起来也会比较大。
3.Windows 上的 Internet Explorer 6 会因为「 body p 」选择子里的「 font-size: small 」的关系，而把 <p> 文字显示成 small 。依照预设值的话，也就是 12px ；不过如果你在检视远单里把「字型」设成较大的话，这里的文字看起来也会比较大。
4.Mac 上的 Internet Explorer 5 ，和所有平台上的 Opera 、 Netscape 6 、 Mozilla 以及（希望是啦）所有未来的浏览器都会因为「 html>body p 」选择子里的「 font-size: small 」规则，而把 <p> 文字显示成 small 。依照预设值的话，也就是 12px ；不过如果你用了「字体缩放」功能时，这里的文字看起来也会比较大。
第27天，使用真正的标题头
以MT为例，网站名称、日期、文章题目，构成了三级标题，应用<H1>, <H2>,<H>分别标记它们。
Google竟会欣赏结构良好的页面，给标题里的关键词以较高的分值？有意思。
第28天，加上对表单组件的描述
利用<LABEL>,<FIELDSET>,<LEGEND>使表单的组件的亲和力更强。从WebAIM的How to Create Accessible Forms.抄了一页过来，供以后参考吧。
|
（阅读次数：）
|
| 上一篇：网站设计中新出现的10种毛病 下一篇：Alexa清空中国网站流量统计数据 |
|
[ 收藏]
[ 推荐]
[ 评论(0条)]
[返回顶部] [打印本页]
[关闭窗口] |
|
|
| |
|
|
|
