继续这个读书笔记吧。

9. 定义键盘快捷键（Defining keyboard shortcuts）
意思就是定义accesskey属性。这个好说。有个关键是如何在浏览器里使用。IE里是“alt+”，并且只是将焦点移过去，要点击需要再按enter；Firefox是“shift+alt+”，按下之后直接触发点击事件。Opera和Chrome还有Safari，我都没试出来，有知情者请告知。

感谢aoao提供：Safari 4/mac control+alt+key | /win alt+key
Opera Shift+Esc 选key
Chrome 3 alt+key

除了accesskey，其实还有一个更重要的：tabindex。有时候需要改变默认的tabindex顺序，以期得到更便利的体验。举个例子，如下格式的登陆框：

用户名
记住我
密码
忘记密码

按照默认的顺序，按下tab键，焦点会依次经过“用户名”、“记住我”、“密码”。但是似乎把“记住我”放在“密码”之后更方便，毕竟不是所有的人都需要使用“记住我”这个按钮，尤其是多次使用这个登陆框的人，他很显然是不喜欢“记住我”。所以应该用tabindex指定如下的顺序：“用户名”、“密码”、“记住我”。

10. 不要打开新窗口（Not opening new windows）
文中的意思是，这样会破坏浏览器的“history”记录，从而使浏览器“后退键”无效。总算知道外国网站很少有新开窗口的缘故了吧，也总算知道为啥XHTML标准要把a标签的target属性取消的缘故了吧。但这个似乎不符合中国用户的习惯，还值得商讨。不过有一些变通的方式可以考虑：

a) 页面上给一个选框，选择之后就自动把a标签里的target属性移除，使得所有的链接都在本页打开。

b) 新开窗口并不是到”_blank”，而是到一个指定名字的窗口，比如“new”。这样所有新开的页面都会到同一个窗口里打开，至少在这个窗口里，还是可以使用浏览器的“后退键”的。（提一下，土豆网的视频都是这样的，开到同一个新窗口里）。

11.定义首字母缩略字（Defining acronyms）
先说明一下，其实作者这里对acronym这个词理解不正确。acronym是指单词的首字母合起来成为一个新的可读的单词，这个单词未必是所有字母都大写的，比如Nato（北大西洋公约组织）。所以HTML或是CSS算不上acronym，而
DOS、BASIC这种才算。像HTML或CSS这种，应该叫abbreviation，与其对应的是<abbr>标签，但很遗憾，这个标签IE6上无效。

12. 给你的日历加上抬头（Giving your calendar a real caption）
13. 使用真正的表头（Using real table headers）
14. 为表格提供摘要（Providing a summary for tables）

把这三条合在一起说，就是要正确使用表格。其实表格的使用远比这三条更多，建议大家仔细阅读HTML权威指南。

最后说的是，我这只是一个读书笔记，光看这个是看不明白的，所以建议还是去通读一下原文吧。

事情的缘由是，前两个礼拜打了个“飞的”去北京玩，见了一位在百度做前端的朋友。过去一年以来，这家伙就不停的在鼓动我去他们那个邪恶的公司。当然，见面之后就不能再当面称呼人家是邪恶的公司啦，所以我就找了个理由，说你们那个“百度盲道”做得太垃圾了。他当然就很虚心的问我为什么啦。所以我也只能很心虚的糊弄了几句，说回上海之后详细告诉他。

回来之后，就马上很虚心的翻出一本老旧的电子书——《Dive Into Accessibility》，认认真真的看了一遍。

然后惊奇的发现：
1. 虽然我没看过这本书，但里面讲的大部分，我平日里都有遵守。果然，坚持好习惯是值得表扬的。
2. 网页的可访问性，似乎只能由前端来重视并实现。这点挺可悲，作为可用性的一部分——可访问性，居然只能由技术人员来掌控，这是我不愿意看到的。但反过来，这给前端开发工程师们新增加了一个责任，同时为如何区分优秀的前端增加了一个指标。

好吧，下面我把这本Dive Into Accessibility的内容作一个摘要，看看对于可访问性，应该要注意哪些问题：

1. 标明语言（Identifying your language）
这一条的意思是，加上lang属性，如。如果其中有一段是其他的语言，就在那一段的标签上加lang属性。这一条我做得不好，以后记得。

2. 构建有意义的页面标题（Constructing meaningful page titles）
有几点值得一提：
a) 做页面时，千万不要忘记写title。我见过好多页面的title是“Untitled Document”或“新建页面”，丢脸啊~
b) title到底应该是“小标题”在前呢，还是“大标题”在前？现在的惯例似乎都是“小标题”在前，比如“影音娱乐首页_新浪网”。但我个人倒是有个看法，或许大标题在前比较好。这样当我把“新浪网_影音娱乐首页”、“新浪网_新闻中心首页”放入收藏夹时，它们会因为音序排序而呆在一起，而不是散乱在各处。当然这个也不一定，仅供参考。
c) 对于英文的标题，一定要注意尽量不要把The放在title的前面，否则你的网页在收藏夹里就会被排在T开头了。

3. 提供额外的导航辅助（Providing additional navigation aids）
这一条是说要加 <link rel=”home” title=”Home” href=”http://url/of/home/page” /> 这个。这个其实我知道。但是貌似对于页面里这么多链接，要都加上rel和rev属性，有点难度。

4. 先呈现主要内容（Presenting your main content first）
好啦，这就是一条典型的“指望优秀的CSS”的可访问性原则啦。把<div class=”main”>放在<div class=”side”>的前面，其实挺考验CSS技术的。一道著名的题目是：如何让侧栏固定宽度，主栏宽度自适应，同时主栏的HTML要在侧栏的前面。我很想放在我的面试题里，可又觉得是不是太刁难了。但是，无论如何，这道题目很重要！

5. 用于跳过导航栏的链接（Skipping over navigation links）
很重要！这个在骨灰级网页标准教程《网站重构》里就提到了。只是有一点我比较怀疑，如果把skip link设为display:none，难道不怕被阅读器也忽略掉么？

6. 安全的使用颜色（Using color safely）
这条其实讲了几个要点：
a) 颜色对比要够，否则眼神不好的人看起来费劲
b) 链接的颜色，最好用蓝色（像我比较喜欢用#09c）
c) 链接最好有下划线

7. 用“真链接”（Using real links）
意思是，即便这个链接是用于触发Ajax，也要把Ajax代码片段的URL放在href里，好让搜索引擎以及阅读器等等能够爬到。关于此条，请参看土豆网首页的“挖土豆”一块。

8. 给链接加“title”属性（Adding titles to links）
这个还用说么，可用性两大重点：a的title和img的alt。

呼~~~先结束这第一回合吧。如果你对可用性感兴趣，可以详细的读一下这本“Dive Into Accessibility”，尤其是前5节。然后可以再去看看那个可恶的“百度盲道”，我接下来会专门用一篇来诅咒这个忽悠障碍人士的无良黑心产品。

土豆网新导航今天终于成功上线啦!
由于这次充分发挥了变态的优化手段，所以忍不住来炫耀一下：

1. 整个导航的样式图片只有一张：

大小7K的样子。不过如果考虑把LOGO拿掉，就只有大约2K。关于这点，我还在纠结中。

2. 很得意的实现了一个效果：两侧不同的背景自动延伸，见下图：

其实不容易的哦，得动动脑子，关键是要保证几个要点：
a. 两侧背景不同，但都得向外自动延伸
b. 中间的导航部分必须居中
c. 过渡部分的背景位置也要相对于居中模块固定
d. 这点也是最重要的：当把浏览器宽度缩小到比居中模块还小的时候，再将横向滚动条拉到右边，背景仍然会延伸。如果你不能体会，请试试看下面的代码：

<div style="width: auto; background: red;">
      <div style="width: 900px; margin: 0 auto; background: blue;">
            这是居中模块
    </div>
</div>

当窗口小于900时，外面红色的部分就只有窗口宽度那么宽，这样页面拉到右边时会有一段白色。

3. 底部菜单项之间的分割线，是用CSS做的。当然，这个没啥好炫耀的，方法在两年前就有被提到了。正淳同学最后提到说为啥没见人这么用。OK，就试试看像土豆网底部菜单那样居中且宽度根据内容自适应吧。

呃，不过还是得谦虚一下：我现在已经变得很不爱学习了，所以一些新的CSS方法都不了解。很可能我这些雕虫小技也是被流传了好多年的了。反正它们都是我自个儿琢磨出来，如果很火星，就请大家赐教哈。