其實我不是來講故事的
嚴格意義上來說，我是一名前端開發，清楚地記得我參與過的項目曾花費大量的人力和時間為網站的UI進行重新改版設計，盡可能多地吸引用戶眼球，也曾花費大量人力和時間優化網站的性能，想方設法地提高首屏加載速度，追求極致的用戶體驗，但印象中好像從來沒有人提過需要優化無障礙訪問的問題。
項目上的原因，讓我有機會開始關注這個從來沒有和人聊過的話題，當客戶說想優化網站Accessibility的時候，我們竟然沒有幾個開發了解過，說實話還挺慚愧的。然后就是一系列的學習，實踐，踩坑，再學習，再實踐，再踩坑......但是慢慢地發現，其實它并沒有想象中難，但它缺少關注的確是真的，特別是在國內。我想，或許很多人和我一樣，只是差一個不經意的關注和一個認識它的開始。
“ 對無障礙最大的誤區是，把它當做成了產品的情懷功能，而非基礎功能或者
Bug去對待。”
在談論用戶的時候，我們是不是忘了些什么
起床的第一眼就可以看到陽光，大口大口地呼吸新鮮空氣，然后背上書包，踏上單車，去學校，去上班，去見自己喜歡的人，去和路過的每一個朋友微笑，這些看起來簡單又平凡的事情，卻是很多人日思夜想卻永遠也享受不到的。
“當我哭泣我沒有鞋子穿的時候，我發現有人卻沒有腳。”
在我驚嘆于一個個美如畫的界面設計的時候，好像從未想到過這個世界有很多人什么都看不到，在我沉浸在實現了視頻嵌入功能的喜悅中的時候，好像從未想到過這個世界有很多人連聲音都聽不到。我曾經完全不敢相信雙目失明的人可以和正常人一樣使用手機和電腦，直到有一天我看到了很多知乎的優秀回答是來自于世界不同角落的盲人，我曾經完全不敢相信身體有缺陷的人可以和正常人一樣獲得平等的工作機會，直到有一天我了解了盲人編程和聾啞程序員。
其實世界很大，大到我們根本無法用語言來描述每一個存在著的事物。
據公開數據統計，色盲患者中，平均12名男性中就有一例，200名女性中就有一例，他們可能難以區分紅色和綠色，或者黃色和藍色。弱視患者30名人群中就有一例，他們沒有任何的角膜，盡管能看到東西的大致輪廓，卻難以閱讀印刷文字，在法律上會被視為盲人。
中國有2億多的障礙群體，其中包括 1700 萬視障者，2000 萬聽力障礙者，7000 萬讀寫障礙者，1.5 億 65 歲以上的老年人等等，加上其他各種類型障礙人群，這些障礙人士加起來占中國人口總數 20% 以上。
他們是我們的用戶嗎？真的是我們需要考慮的用戶嗎？我覺得沒有理由不是，如果說非要找一個理由，那應該就是被我們的潛意識選擇了遺忘吧。
所以無障礙是什么
你可能見過四面都是鏡子的電梯，它的設計其實是為了增加空間感，讓人們覺得不那么壓抑，在等電梯的時候也可以整理整理自己的衣物，照照鏡子，不會讓人覺得等電梯的時候無聊；你可能見過馬路邊很多臺階有一段會做成坡度的，據我所知它設計的初衷是為了方便盲人的輪椅上下臺階，但是實際上大家都知道，它對自行車和嬰兒推車也方便了許多；你可能見過很多電梯的按鈕都刻有盲文，很多地鐵站都設有無障礙通道，無障礙衛生間等等，這些都與無障礙有關。
信息無障礙，英文詞語來自Accessibility，我們主要會說到關于Web的無障礙問題，相比于W3C的定義，其實我更喜歡維基百科給出的解釋。
Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.
所有的用戶,在任何情況下都能平等地、方便地、無障礙地獲取信息、使用功能，無論是健全人還是殘疾人，無論是輕年人還是老年人。
有些眼睛看不太清楚的人會使用屏幕放大器來閱讀文字，有些什么都看不見的人會使用盲文顯示器來閱讀文字，有些色盲患者會使用一些高對比模式來獲得更好地體驗，一些聽力不太好的人，在看視頻的時候會選擇帶有字幕的視頻，如果你正在使用Mac，可以試著按下Command+F5，然后閉上眼睛，用另一種方式去感受你曾經可以看到的東西。其實只要你用心去發現，這些都與無障礙這個字眼有關，實際上很多設計不僅僅是方便了它們，也讓正常人獲得了更好的體驗。
凡事都少不了標準
WCAG 是W3C發布的一套網絡內容可訪問性指南，它是目前網絡無障礙的國際標準，合規等級分為三級（A、AA 和 AAA）。總的來說，全篇圍繞了四個原則：
可感知
用戶能否正確地感知到產品的內容？如果說我們的網站只提供憑借一種感官（例如視覺）才能讓用戶感知到內容，其實無形中就失去了很多用戶。可操作
用戶能否正常地使用每一個組件的功能？比如我們經常用到的下拉菜單，我見過很多網站只設計了hover上去的時候展開菜單的效果，卻沒有實現點擊狀態下的展開，設想，如果我們的用戶群體根本就沒有能力使用鼠標，是不是也就意味著不能使用我們的網站了？可理解
用戶是否能很好地理解我們的內容？比如我們加了一個看著很時尚的小圖標來代表設置功能，但并沒有為讀屏軟件提供相關內容解釋，如果我們的用戶完全看不到東西，是不是也就意味著根本不能理解你的網站有什么，也就不能再繼續交互下去了？強健性
我們網站或者產品的內容是否能被多種User Agent使用？使用屏幕閱讀器的用戶可以正常讀出來我們想表達的內容嗎？使用IE的用戶是不是根本就打不開我們的網站呢？
聽著是不是還是有些不知所措，沒關系， WebAIM（網絡無障礙功能思維小組）將WCAG指南提煉成了一份詳細的檢查清單，專以網絡內容為目標，這樣我們就更容易知道我們網站存在些什么問題了。
W3C也提供了各個國家的相關無障礙法，有若干國家在其網絡無障礙功能法律要求中明令，必須使用國際標準指南，了解過國內的一些資料，雖然到現在很多 App 已經在慢慢變好，但是大部分的網站無障礙訪問依然不是很樂觀。中山大學工學院教授富明慧教授曾經說過一句話：
“目前我國99%的網站，由于沒有實現無障礙，盲人難以正常瀏覽訪問網站。”省盲協主席” 富明慧本身就是一名盲人，他失明后發明了半方盲文輸入法，他還說，加快網站無障礙改造，政府部門網站應該先行一步。”
很多發達國家，比如美國、歐洲、日本等國家都針對 a11y 立法，不符合 a11y 的軟件程序很多都不在政府機關等的采購范圍內。澳大利亞政府的“網絡可訪問性國內過渡戰略”（NTS）規定，所有政府網站及其內容必須在 2012年12月31日以前達到 WCAG 2.0 的A級合規要求，并在2014年12月31日之前達到 AA 級合規要求。
至少我們可以做到這些
標題，段落，列表等內容的保持良好的結構
對于Accessibility來說，良好的標題段落和列表結構會提高輔助設備對網站內容的識別度，提高用戶的體驗，比如屏幕閱讀器在閱讀到結構相對良好的標簽的時候，會用幫助戶更容易地理解我們網站的內容。盡可能地使用語義化標簽
正確地使用各個語義化的標簽，不僅是代碼質量的提高，對閱讀代碼的人也會有極大的幫助，同樣對于開發成本，網站的SEO來說都是有好處的。瀏覽器的調試工具里面有個叫Accessibility tree的東西，瀏覽器會獲取DOM樹，然后將其修改成適用于輔助技術的形式(無障礙樹)，所以良好的使用語義化標簽，能讓輔助設備更合理地將我們網站的內容轉化成Accessibility tree，從而解讀給用戶，確保頁面中的重要的元素有正確的無障礙角色、狀態和屬性，這一點很重要。為所有非文本內容提供文本替代項
圖片是大多數網頁的重要組成部分，但其實也是對弱視用戶造成阻礙的一個特定因素，這時候添加文本替代項是非常必要的，所有圖像都應有alt屬性，但它們無需都包含文本。 重要的圖片應使用描述性替代文本簡潔地說明圖像內容，而裝飾性類的圖片應該使用空的alt屬性，而直接刪掉看起來沒用的alt。DOM 順序和 Tab 鍵順序保持一致
一般我們設計的時候，往往考慮的都是以視覺為主的，其實對于只能使用屏幕閱讀器瀏覽網站的用戶來說，如果我們過多地使用一些樣式讓視覺顯示的DOM結構和Tab鍵順序不一致的話，就會造成用戶的疑惑，比如樣式中使用了float之后，記得用tabindex調整Tab鍵的順序，使其和DOM順序一致。
“優秀的無障礙設計，不僅能讓身體有缺陷的用戶正常地與產品交互，還會為普通人提供更好的使用體驗，實際不需要開發者編寫很繁瑣的代碼，每增加一點支持，網站就能更加的平易近人。”
有些做法其實是不友好的
打開一個網頁，用Tab/Shift+Tab進行跳轉，不管是誤觸，還是故意為之，大家應該都多多少少會看到這樣一個樣式，也許你曾經見過，也許你可能發現同樣的一個鏈接在有的網站卻是沒有這樣的樣式和交互的，其實它是瀏覽器默認的Focus的樣式，代表著這個元素默認是focusable的，HTML默認的focusable元素，會自動插入到Tab鍵順序中，并且內置了鍵盤事件處理，默認支持keyboard功能，基本的都可以在 這個鏈接 里找到，不同的瀏覽器會有不同的的樣式，Chrome通常使用藍色邊框突出顯示聚焦的元素，而 Firefox則是使用虛線邊框。
還記得你的處理方式嗎？我清楚地記得，在得知我們設計師曾經說這個樣式很丑，提議把它去掉的時候，a { outline: none; }一行這樣看起來很完美的代碼就解決了問題，但其實我們并不知道，就這樣一行看起來天然無公害的代碼，讓網站成為了多少人的地獄。outlinenone 對outline做出了很好的解釋，Web AIM 檢查清單也在其第 2.1.1 節中指出，所有頁面功能應該都能使用鍵盤來執行
所以關于focus我們能做的有很多
- 不要刪掉原生支持的 outline 樣式，除非你有更好看的樣式替代它
- 盡量使用原生支持的可聚焦的元素
- 如果有復雜的
UI, 需要使用非語義化的標簽來實現交互組件的時候，請為它加上tabindex和必要時的一些事件 - 可以自己寫一些 JavaScript 或用一些庫來區分鍵盤和鼠標或者觸摸事件，實現不同場景下的
outline樣式，比如只想在使用鍵盤的時候有outline，使用鼠標或者觸摸板的時候去outline，我覺得這是相對合理的設計，可以參考 what-input 的實現。
3. 請使用 WAI-ARIA
做到了以上幾點，其實大多數時候，我們需要滿足復雜的業務邏輯而使用一些非語義化的標簽，完全沒有問題，但是請為它加上WAI-ARIA相關屬性, 它可以修改現有元素的語義，也可以向不存在原生語義的元素添加語義，通過增加瀏覽器和輔助技術可以識別的進一步語義來讓用戶知道正在發生的事情，它提供了一系列可以使用的HTML屬性來達到該目的，常用的有role, aria-label, aria-labellby, aria-owns, aria-hidden，學會使用它們，或許能為你帶來一些別的收獲，至少于我是這樣的。
4. 網頁的對比度
有時候你會發現你的眼睛不舒服了，或許是你看的東西顏色對比度有問題了，下圖紅框的部分從下到上，我們能看到對比度越來越低，識別度也越來越低，如果我們設計開發網站過程中使用了不是很高的對比度，對于一些誦讀困難癥患者來說，他們會感覺文字在旋轉、模糊，有人統計過，大約 5% 用戶在訪問網站的時候無法獲得我們預想的體驗。
WCAG 2.0 對頁面上文字的對比度有一個最低的要求 4.5 : 1，所以保持合理的對比度同樣重要，如果你夠細心，Chrome的選色器是會給出你的對比度是否符合要求的提示的，同樣也可以在 WebAIM’s Color Contrast Checker 測試。
關于測試
如果你愿意的話，你可以用幾十幾秒的時間打開谷歌瀏覽器的Audits找到你網站存在的所有無障礙問題，然后會看到你網站的Accessibility分數和所有的對需要修復的問題的建議。
有著同樣效果的 Chrome 插件，只是可能提示方式有些區別，ax ，WAVE，還有可以自動化檢查A11y問題的工具，pa11y 同樣可以集成到CI。
寫在最后
也許你目前沒有足夠的時間和預算來做無障礙設計，但只要你把它當做你日常工作要考慮的標準的一部分，你就會驚喜地發現，你其實能夠滿足很多無障礙設計標準，每個角落都有人在以不同的方式創造著奇跡，其實我們可以做的更好。
他們懷著希望期待著的明天，不會永遠與我們無關，我想總有變好的那一天。
