中國盲人人數已經超過了600萬，平均每200多人中就有一位是盲人，這個規模還是相當龐大的。由於視覺障礙，盲人同這個世界的交集小了很多，但互聯網的的發展爲他們打開了一扇與更多人交流的窗口。
[圖片取自網絡 - 吳鑄上網只需要鍵盤、音響和麥克]
這個窗口的開關掌握在我們工程師手中！我們有義務也有責任爲他們開窗！
一、上網的盲人用戶和統計方式
盲人中真正有條件並且會上網的有多少呢？我們一開始就遇到了一個難題：如何判斷用戶是盲人用戶？
視障人士主要通過讀屏軟件來獲取網頁信息，蘋果的產品自帶 VoiceOver，感興趣的同學可以體驗下。這裏有一篇 VoiceOver 的使用教程，學會使用並不難，難的是把耳朵當眼睛使的繁瑣。
PC 上和 mobile 上，盲人與機器的交互方式完全不一樣，PC 上主要使用鍵盤操作，讀屏軟件提供了很多的快捷鍵，如果操作熟練，速度也是槓槓的！（只不過現在的軟件很少提供和諧的文字引導，導致盲人使用起來受阻，webpages也是如此）而 mobile 中，盲人通過觸摸屏的滑動獲知頁面信息，兩種讀屏就需要我們使用兩種方式去判斷。
1. PC
在讀取屏幕時，tab 是使用最頻繁的鍵，當然還有 shift+tab，兩個操作鍵的作用，前者是向下一個可聚焦元素聚焦，聚焦上去之後讀屏軟件會讀取元素屬性，如果是文字，會讀取文字內容，如果是圖片，就讀取圖片 alt 內容。後者是向前聚焦。
所以我們就想到，通過監聽 window 的 tab 點擊事件，在規定時間內有連續多次觸發該事件則認定該用戶爲無障礙受衆用戶。經過討論，我們把連續點擊次數設定爲 10 次，監聽到連續 10 次之後，發送統計，銷燬事件。
2. Mobile
Mobile 上的統計是件麻煩事兒，沒有鍵盤操作，只有 touch 屏幕，通過用戶手勢去判斷這條路不可走，一方面是因爲讀屏軟件的手勢不在 web 頁面的監控範圍內，另一方面，手勢動作判斷實在是麻煩。
經過多次討論，繼續使用 PC 端的方案。TAB 鍵會讓頁面元素聚焦，那麼我們在 Mobile 就監聽元素的聚焦事件。監聽所有元素的focus事件，在規定事件內有連續3次觸發該事件則認定該用戶爲無障礙受衆用戶：發送統計，銷燬事件。這裏我們將觸發次數修改成了 3，主要是因爲 Mobile 可操作區域並不大，三兩下操作就跳轉到下一個頁面了。
二、網頁中普遍存在的『有障礙』訪問問題
1. img 標籤無 alt 屬性，不可讀
圖片是電商網站中最重要的角色，但是盲人的世界裏沒有可視化的圖片，如果頁面上的 img 標籤不加 alt 屬性，對盲人來說這就是個無用網站。讓圖片可讀，一件可輕鬆搞定的事情，卻可以造福千千萬萬的視障人士，你值得去做！
2. 可操作元素，無法聚焦
諸如此類的 tab 切換隨處可見，
網頁可聚焦的元素不多，a、input、button、area 等等不到十個。我們通常使用 li 元素作爲 tabHeader 的切換元素，這種情況下，盲人使用鍵盤操作是沒有辦法聚焦上去的，結果就是很多內容查看不到。
這是一個容易被忽略，但是影響面極廣的問題，希望大家可以重視！ 解決方案很簡單，給元素加個 tabIndex 屬性。
3. 模板渲染頁面後，焦點停靠不合理
兩個十分讓盲人受傷的問題：
- 焦點本來聚焦到 A 區塊的某個元素，通過 ajax 重新渲染 A 區塊之後，頁面失去焦點
- 從導航欄直接跳轉到某個錨點位置，但是焦點沒有跟着一起指向錨點區域的第一個元素
從體驗上來看，上面兩個問題都是糟糕透了！但是我們只需要在 js 中附加一句
$(".destination:first-child").focus()
之類的，一句簡單代碼搞定所有視障用戶的痛！
4. 標籤語義化不夠
讀屏軟件有個比較給力的快捷鍵，他可以讓用戶快捷的定位 Header 標籤，這樣可以減少使用很多次 tab。在我們的雙十二活動頁面中，很多頁面都有商品樓層，每個樓層都有一個標題，但是部分頁面中我們的工程師並沒有使用 H 標籤而是 div 標籤來標識標題（有時候標題是個圖片），這一點讓盲人鬱悶至極。
三、『有障礙』問題的解決方案
我們重點做一件事情——讓所有的圖片可讀！
關於網頁無障礙的內容，w3c 提出了一堆規範（相關信息可以查閱 WAI），如果按照規範來找問題，那我們的工程師有的忙了。所以我們挑了幾個影響最廣泛的點進行單點突擊！
第一步就是讓所有的圖片可讀，不管是後端直接輸出、TMS渲染、前端異步加載渲染的圖片，全部加上 alt 標籤，這是最簡單的操作，也是推動起來最簡單的點。當然，最後，我們的盲人測試團隊的反饋是：圖片可讀這塊做的很棒！
第二步就是掃清所有通向下一步（或者說通向支付）的網頁障礙，一個流程下來，我們希望每個在淘寶上購買商品的盲人都能夠成功支付。
很顯然，上面提到的解決方案都是人爲去推，這種方式是不長久的，我們希望所有的工程師都有這種意識，主動去改善網頁的可讀性。
四、小結
先說說現在存在的問題，概括性講，有三點：
- 不知道無障礙
- 不知道做什麼
- 知道無障礙但是推不動
爲此我們無障礙小組也進行了腦暴：
- 工具/平臺上集成，比如給 img 標籤強制或者自動加上 alt 屬性
- 國外開發的無障礙檢測工具，移植過來，搭建測試平臺
- 頁面結構化，使用元數據/元編程
- 無障礙方面編程的規範化，白皮書
- 接入到測試流程中
- ....
想了很多點子。我們的目標很明確：讓網頁可讀，對盲人易用。