其實(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)注的確是真的卓舵，特別是在國(guó)內(nèi)南用。我想，或許很多人和我一樣掏湾，只是差一個(gè)不經(jīng)意的關(guān)注和一個(gè)認(rèn)識(shí)它的開始训枢。
“ 對(duì)無障礙最大的誤區(qū)是，把它當(dāng)做成了產(chǎn)品的情懷功能忘巧，而非基礎(chǔ)功能或者
Bug去對(duì)待∧廊校”
在談?wù)撚脩舻臅r(shí)候砚嘴，我們是不是忘了些什么
起床的第一眼就可以看到陽(yáng)光，大口大口地呼吸新鮮空氣涩拙，然后背上書包际长，踏上單車，去學(xué)校兴泥，去上班工育，去見自己喜歡的人，去和路過的每一個(gè)朋友微笑搓彻，這些看起來簡(jiǎn)單又平凡的事情如绸，卻是很多人日思夜想?yún)s永遠(yuǎn)也享受不到的嘱朽。
“當(dāng)我哭泣我沒有鞋子穿的時(shí)候，我發(fā)現(xiàn)有人卻沒有腳怔接√掠荆”
在我驚嘆于一個(gè)個(gè)美如畫的界面設(shè)計(jì)的時(shí)候，好像從未想到過這個(gè)世界有很多人什么都看不到扼脐，在我沉浸在實(shí)現(xiàn)了視頻嵌入功能的喜悅中的時(shí)候岸军，好像從未想到過這個(gè)世界有很多人連聲音都聽不到。我曾經(jīng)完全不敢相信雙目失明的人可以和正常人一樣使用手機(jī)和電腦瓦侮，直到有一天我看到了很多知乎的優(yōu)秀回答是來自于世界不同角落的盲人艰赞，我曾經(jīng)完全不敢相信身體有缺陷的人可以和正常人一樣獲得平等的工作機(jī)會(huì)，直到有一天我了解了盲人編程和聾啞程序員肚吏。
其實(shí)世界很大方妖，大到我們根本無法用語(yǔ)言來描述每一個(gè)存在著的事物。
據(jù)公開數(shù)據(jù)統(tǒng)計(jì)须喂，色盲患者中吁断，平均12名男性中就有一例，200名女性中就有一例坞生，他們可能難以區(qū)分紅色和綠色仔役，或者黃色和藍(lán)色。弱視患者30名人群中就有一例是己，他們沒有任何的角膜又兵，盡管能看到東西的大致輪廓，卻難以閱讀印刷文字卒废，在法律上會(huì)被視為盲人沛厨。
中國(guó)有2億多的障礙群體，其中包括 1700 萬視障者摔认，2000 萬聽力障礙者逆皮，7000 萬讀寫障礙者，1.5 億 65 歲以上的老年人等等参袱，加上其他各種類型障礙人群电谣，這些障礙人士加起來占中國(guó)人口總數(shù) 20% 以上。
他們是我們的用戶嗎抹蚀？真的是我們需要考慮的用戶嗎剿牺？我覺得沒有理由不是，如果說非要找一個(gè)理由环壤，那應(yīng)該就是被我們的潛意識(shí)選擇了遺忘吧晒来。
所以無障礙是什么
你可能見過四面都是鏡子的電梯，它的設(shè)計(jì)其實(shí)是為了增加空間感郑现，讓人們覺得不那么壓抑湃崩，在等電梯的時(shí)候也可以整理整理自己的衣物荧降，照照鏡子，不會(huì)讓人覺得等電梯的時(shí)候無聊竹习；你可能見過馬路邊很多臺(tái)階有一段會(huì)做成坡度的誊抛，據(jù)我所知它設(shè)計(jì)的初衷是為了方便盲人的輪椅上下臺(tái)階，但是實(shí)際上大家都知道整陌，它對(duì)自行車和嬰兒推車也方便了許多拗窃；你可能見過很多電梯的按鈕都刻有盲文，很多地鐵站都設(shè)有無障礙通道泌辫，無障礙衛(wèi)生間等等随夸，這些都與無障礙有關(guān)。
信息無障礙震放，英文詞語(yǔ)來自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ì)使用一些高對(duì)比模式來獲得更好地體驗(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ò)無障礙的國(guó)際標(biāo)準(zhǔn)，合規(guī)等級(jí)分為三級(jí)（A亲桦、AA 和 AAA）崖蜜∽瞧停總的來說，全篇圍繞了四個(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ó)家的相關(guān)無障礙法，有若干國(guó)家在其網(wǎng)絡(luò)無障礙功能法律要求中明令莫杈，必須使用國(guó)際標(biāo)準(zhǔn)指南互例，了解過國(guó)內(nèi)的一些資料，雖然到現(xiàn)在很多 App 已經(jīng)在慢慢變好筝闹，但是大部分的網(wǎng)站無障礙訪問依然不是很樂觀媳叨。中山大學(xué)工學(xué)院教授富明慧教授曾經(jīng)說過一句話：
“目前我國(guó)99%的網(wǎng)站，由于沒有實(shí)現(xiàn)無障礙关顷，盲人難以正常瀏覽訪問網(wǎng)站糊秆。”省盲協(xié)主席” 富明慧本身就是一名盲人议双，他失明后發(fā)明了半方盲文輸入法痘番，他還說，加快網(wǎng)站無障礙改造，政府部門網(wǎng)站應(yīng)該先行一步汞舱∥槿遥”
很多發(fā)達(dá)國(guó)家，比如美國(guó)昂芜、歐洲莹规、日本等國(guó)家都針對(duì) a11y 立法，不符合 a11y 的軟件程序很多都不在政府機(jī)關(guān)等的采購(gòu)范圍內(nèi)泌神。澳大利亞政府的“網(wǎng)絡(luò)可訪問性國(guó)內(nèi)過渡戰(zhàn)略”（NTS）規(guī)定良漱，所有政府網(wǎng)站及其內(nèi)容必須在 2012年12月31日以前達(dá)到 WCAG 2.0 的A級(jí)合規(guī)要求，并在2014年12月31日之前達(dá)到 AA 級(jí)合規(guī)要求腻扇。
至少我們可以做到這些
標(biāo)題债热，段落，列表等內(nèi)容的保持良好的結(jié)構(gòu)
對(duì)于Accessibility來說幼苛，良好的標(biāo)題段落和列表結(jié)構(gòu)會(huì)提高輔助設(shè)備對(duì)網(wǎng)站內(nèi)容的識(shí)別度窒篱，提高用戶的體驗(yàn)，比如屏幕閱讀器在閱讀到結(jié)構(gòu)相對(duì)良好的標(biāo)簽的時(shí)候舶沿，會(huì)用幫助戶更容易地理解我們網(wǎng)站的內(nèi)容墙杯。盡可能地使用語(yǔ)義化標(biāo)簽
正確地使用各個(gè)語(yǔ)義化的標(biāo)簽，不僅是代碼質(zhì)量的提高括荡，對(duì)閱讀代碼的人也會(huì)有極大的幫助高镐，同樣對(duì)于開發(fā)成本，網(wǎng)站的SEO來說都是有好處的畸冲。瀏覽器的調(diào)試工具里面有個(gè)叫Accessibility tree的東西嫉髓，瀏覽器會(huì)獲取DOM樹，然后將其修改成適用于輔助技術(shù)的形式(無障礙樹)邑闲，所以良好的使用語(yǔ)義化標(biāo)簽算行，能讓輔助設(shè)備更合理地將我們網(wǎng)站的內(nèi)容轉(zhuǎn)化成Accessibility tree，從而解讀給用戶苫耸，確保頁(yè)面中的重要的元素有正確的無障礙角色州邢、狀態(tài)和屬性，這一點(diǎn)很重要褪子。為所有非文本內(nèi)容提供文本替代項(xiàng)
圖片是大多數(shù)網(wǎng)頁(yè)的重要組成部分量淌，但其實(shí)也是對(duì)弱視用戶造成阻礙的一個(gè)特定因素，這時(shí)候添加文本替代項(xiàng)是非常必要的嫌褪，所有圖像都應(yīng)有alt屬性呀枢，但它們無需都包含文本。 重要的圖片應(yīng)使用描述性替代文本簡(jiǎn)潔地說明圖像內(nèi)容笼痛，而裝飾性類的圖片應(yīng)該使用空的alt屬性裙秋，而直接刪掉看起來沒用的alt。DOM 順序和 Tab 鍵順序保持一致
一般我們?cè)O(shè)計(jì)的時(shí)候，往往考慮的都是以視覺為主的残吩，其實(shí)對(duì)于只能使用屏幕閱讀器瀏覽網(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)站就能更加的平易近人铜犬。”
有些做法其實(shí)是不友好的
打開一個(gè)網(wǎng)頁(yè)轻庆，用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則是使用虛線邊框沉删。
還記得你的處理方式嗎？我清楚地記得醉途，在得知我們?cè)O(shè)計(jì)師曾經(jīng)說這個(gè)樣式很丑矾瑰，提議把它去掉的時(shí)候，a { outline: none; }一行這樣看起來很完美的代碼就解決了問題隘擎，但其實(shí)我們并不知道殴穴，就這樣一行看起來天然無公害的代碼，讓網(wǎng)站成為了多少人的地獄。outlinenone 對(duì)outline做出了很好的解釋采幌，Web AIM 檢查清單也在其第 2.1.1 節(jié)中指出劲够，所有頁(yè)面功能應(yīng)該都能使用鍵盤來執(zhí)行
所以關(guān)于focus我們能做的有很多
- 不要?jiǎng)h掉原生支持的 outline 樣式，除非你有更好看的樣式替代它
- 盡量使用原生支持的可聚焦的元素
- 如果有復(fù)雜的
UI, 需要使用非語(yǔ)義化的標(biāo)簽來實(shí)現(xiàn)交互組件的時(shí)候休傍，請(qǐng)為它加上tabindex和必要時(shí)的一些事件 - 可以自己寫一些 JavaScript 或用一些庫(kù)來區(qū)分鍵盤和鼠標(biāo)或者觸摸事件征绎，實(shí)現(xiàn)不同場(chǎng)景下的
outline樣式，比如只想在使用鍵盤的時(shí)候有outline磨取，使用鼠標(biāo)或者觸摸板的時(shí)候去outline人柿，我覺得這是相對(duì)合理的設(shè)計(jì)，可以參考 what-input 的實(shí)現(xiàn)忙厌。
3. 請(qǐng)使用 WAI-ARIA
做到了以上幾點(diǎn)凫岖，其實(shí)大多數(shù)時(shí)候，我們需要滿足復(fù)雜的業(yè)務(wù)邏輯而使用一些非語(yǔ)義化的標(biāo)簽逢净，完全沒有問題哥放，但是請(qǐng)為它加上WAI-ARIA相關(guān)屬性, 它可以修改現(xiàn)有元素的語(yǔ)義，也可以向不存在原生語(yǔ)義的元素添加語(yǔ)義爹土，通過增加瀏覽器和輔助技術(shù)可以識(shí)別的進(jìn)一步語(yǔ)義來讓用戶知道正在發(fā)生的事情婶芭，它提供了一系列可以使用的HTML屬性來達(dá)到該目的，常用的有role, aria-label, aria-labellby, aria-owns, aria-hidden着饥，學(xué)會(huì)使用它們犀农，或許能為你帶來一些別的收獲，至少于我是這樣的宰掉。
4. 網(wǎng)頁(yè)的對(duì)比度
有時(shí)候你會(huì)發(fā)現(xiàn)你的眼睛不舒服了呵哨，或許是你看的東西顏色對(duì)比度有問題了，下圖紅框的部分從下到上轨奄，我們能看到對(duì)比度越來越低孟害，識(shí)別度也越來越低，如果我們?cè)O(shè)計(jì)開發(fā)網(wǎng)站過程中使用了不是很高的對(duì)比度挪拟，對(duì)于一些誦讀困難癥患者來說挨务，他們會(huì)感覺文字在旋轉(zhuǎn)、模糊玉组，有人統(tǒng)計(jì)過谎柄，大約 5% 用戶在訪問網(wǎng)站的時(shí)候無法獲得我們預(yù)想的體驗(yàn)。
WCAG 2.0 對(duì)頁(yè)面上文字的對(duì)比度有一個(gè)最低的要求 4.5 : 1惯雳，所以保持合理的對(duì)比度同樣重要朝巫，如果你夠細(xì)心，Chrome的選色器是會(huì)給出你的對(duì)比度是否符合要求的提示的石景，同樣也可以在 WebAIM’s Color Contrast Checker 測(cè)試劈猿。
關(guān)于測(cè)試
如果你愿意的話拙吉，你可以用幾十幾秒的時(shí)間打開谷歌瀏覽器的Audits找到你網(wǎng)站存在的所有無障礙問題，然后會(huì)看到你網(wǎng)站的Accessibility分?jǐn)?shù)和所有的對(duì)需要修復(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)掏秩，我想總有變好的那一天或舞。
