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