事情的緣由是，前兩個(gè)禮拜打了個(gè)“飛的”去北京玩，見了一位在百度做前端的朋友。過去一年以來，這家伙就不停的在鼓動(dòng)我去他們那個(gè)邪惡的公司。當(dāng)然，見面之后就不能再當(dāng)面稱呼人家是邪惡的公司啦，所以我就找了個(gè)理由，說你們那個(gè)“百度盲道”做得太垃圾了。他當(dāng)然就很虛心的問我為什么啦。所以我也只能很心虛的糊弄了幾句，說回上海之后詳細(xì)告訴他。

回來之后，就馬上很虛心的翻出一本老舊的電子書——《Dive Into Accessibility》，認(rèn)認(rèn)真真的看了一遍。

然后驚奇的發(fā)現(xiàn)：
1. 雖然我沒看過這本書，但里面講的大部分，我平日里都有遵守。果然，堅(jiān)持好習(xí)慣是值得表?yè)P(yáng)的。
2. 網(wǎng)頁(yè)的可訪問性，似乎只能由前端來重視并實(shí)現(xiàn)。這點(diǎn)挺可悲，作為可用性的一部分——可訪問性，居然只能由技術(shù)人員來掌控，這是我不愿意看到的。但反過來，這給前端開發(fā)工程師們新增加了一個(gè)責(zé)任，同時(shí)為如何區(qū)分優(yōu)秀的前端增加了一個(gè)指標(biāo)。

好吧，下面我把這本Dive Into Accessibility的內(nèi)容作一個(gè)摘要，看看對(duì)于可訪問性，應(yīng)該要注意哪些問題：

1. 標(biāo)明語(yǔ)言（Identifying your language）
這一條的意思是，加上lang屬性，如。如果其中有一段是其他的語(yǔ)言，就在那一段的標(biāo)簽上加lang屬性。這一條我做得不好，以后記得。

2. 構(gòu)建有意義的頁(yè)面標(biāo)題（Constructing meaningful page titles）
有幾點(diǎn)值得一提：
a) 做頁(yè)面時(shí)，千萬(wàn)不要忘記寫title。我見過好多頁(yè)面的title是“Untitled Document”或“新建頁(yè)面”，丟臉啊~
b) title到底應(yīng)該是“小標(biāo)題”在前呢，還是“大標(biāo)題”在前？現(xiàn)在的慣例似乎都是“小標(biāo)題”在前，比如“影音娛樂首頁(yè)_新浪網(wǎng)”。但我個(gè)人倒是有個(gè)看法，或許大標(biāo)題在前比較好。這樣當(dāng)我把“新浪網(wǎng)_影音娛樂首頁(yè)”、“新浪網(wǎng)_新聞中心首頁(yè)”放入收藏夾時(shí)，它們會(huì)因?yàn)橐粜蚺判蚨粼谝黄穑皇巧y在各處。當(dāng)然這個(gè)也不一定，僅供參考。
c) 對(duì)于英文的標(biāo)題，一定要注意盡量不要把The放在title的前面，否則你的網(wǎng)頁(yè)在收藏夾里就會(huì)被排在T開頭了。

3. 提供額外的導(dǎo)航輔助（Providing additional navigation aids）
這一條是說要加 <link rel=”home” title=”Home” href=”http://url/of/home/page” /> 這個(gè)。這個(gè)其實(shí)我知道。但是貌似對(duì)于頁(yè)面里這么多鏈接，要都加上rel和rev屬性，有點(diǎn)難度。

4. 先呈現(xiàn)主要內(nèi)容（Presenting your main content first）
好啦，這就是一條典型的“指望優(yōu)秀的CSS”的可訪問性原則啦。把<div class=”main”>放在<div class=”side”>的前面，其實(shí)挺考驗(yàn)CSS技術(shù)的。一道著名的題目是：如何讓側(cè)欄固定寬度，主欄寬度自適應(yīng)，同時(shí)主欄的HTML要在側(cè)欄的前面。我很想放在我的面試題里，可又覺得是不是太刁難了。但是，無(wú)論如何，這道題目很重要！

5. 用于跳過導(dǎo)航欄的鏈接（Skipping over navigation links）
很重要！這個(gè)在骨灰級(jí)網(wǎng)頁(yè)標(biāo)準(zhǔn)教程《網(wǎng)站重構(gòu)》里就提到了。只是有一點(diǎn)我比較懷疑，如果把skip link設(shè)為display:none，難道不怕被閱讀器也忽略掉么？

6. 安全的使用顏色（Using color safely）
這條其實(shí)講了幾個(gè)要點(diǎn)：
a) 顏色對(duì)比要夠，否則眼神不好的人看起來費(fèi)勁
b) 鏈接的顏色，最好用藍(lán)色（像我比較喜歡用#09c）
c) 鏈接最好有下劃線

7. 用“真鏈接”（Using real links）
意思是，即便這個(gè)鏈接是用于觸發(fā)Ajax，也要把Ajax代碼片段放在href里，好讓搜索引擎以及閱讀器等等能夠爬到。關(guān)于此條，請(qǐng)參看土豆網(wǎng)首頁(yè)的“挖土豆”一塊。

8. 給鏈接加“title”屬性（Adding titles to links）
這個(gè)還用說么，可用性兩大重點(diǎn)：a的title和img的alt。

呼~~~先結(jié)束這第一回合吧。如果你對(duì)可用性感興趣，可以詳細(xì)的讀一下這本“Dive Into Accessibility”，尤其是前5節(jié)。然后可以再去看看那個(gè)可惡的“百度盲道”，我接下來會(huì)專門用一篇來詛咒這個(gè)忽悠障礙人士的無(wú)良黑心產(chǎn)品。

原文：http://www.mikkolee.com/181