每個(gè)產(chǎn)品都有自己的目標(biāo)用戶赂毯，但這并不意味著殘障人士就應(yīng)從任何群體中被剝除障贸。Jesse Hausler提出了針對(duì)無(wú)障礙設(shè)計(jì)的七條大綱昨寞，能夠幫助我們認(rèn)識(shí)到其重要性并了解如何在我們的產(chǎn)品中實(shí)踐它玷或。

不得不知：關(guān)于無(wú)障礙設(shè)計(jì)的七件事

原作者：Jesse Hausler

譯者：勵(lì)定洲

無(wú)障礙意味著殘障人士能夠理解這個(gè)互聯(lián)網(wǎng)視界熄求，并在其中實(shí)現(xiàn)導(dǎo)航和進(jìn)一步的操作旺矾。想象一下這個(gè)世界上所有程序員都熟知無(wú)障礙蔑鹦，而作為設(shè)計(jì)師的你只需盡管設(shè)計(jì)，會(huì)有人幫你構(gòu)建一切...聽(tīng)起來(lái)很完美箕宙。但在這個(gè)世界上嚎朽，設(shè)計(jì)本身往往才是導(dǎo)致殘障人士使用你的產(chǎn)品時(shí)遇到麻煩的源頭。

這個(gè)大綱主要包含你需要知道的一些關(guān)于如何讓你的產(chǎn)品設(shè)計(jì)能滿足Section 508 和 the Web Content Accessibility Guidelines 2.0的知識(shí)柬帕。還有一些內(nèi)容會(huì)對(duì)你的產(chǎn)品開(kāi)發(fā)和質(zhì)量測(cè)試有幫助哟忍。

1. 無(wú)障礙不是創(chuàng)新的負(fù)擔(dān)

無(wú)障礙設(shè)計(jì)并不意味著強(qiáng)迫你去讓你的產(chǎn)品變丑。相反陷寝，它只是在你思考設(shè)計(jì)的過(guò)程中融合進(jìn)一系列的限制锅很。這些限制往往會(huì)給你一些靈感，幫助你探索如何讓你的產(chǎn)品適用于所有用戶凤跑。

當(dāng)你閱讀這些大綱時(shí)爆安，請(qǐng)記住我們并不是為我們的設(shè)計(jì)同行在設(shè)計(jì)。

為那些會(huì)與你的產(chǎn)品產(chǎn)生互動(dòng)的所有群體設(shè)計(jì)仔引。

這可能包含那些眼盲-弱視扔仓、耳聾-聽(tīng)力困難、那些永久或暫時(shí)性行動(dòng)困難咖耘、或者那些有認(rèn)知缺陷的人翘簇。當(dāng)然也包括老人、兒童和那些只是單純?yōu)榱烁惺芎玫捏w驗(yàn)的人鲤看。

這些大綱將會(huì)是創(chuàng)造最優(yōu)秀產(chǎn)品的一個(gè)契機(jī)缘揪，同時(shí)也是一個(gè)挑戰(zhàn)。

2. 不要只用顏色作為唯一的視覺(jué)途徑去傳達(dá)信息

這幫助那些無(wú)法/難于識(shí)別顏色的人，包括色盲（十二位男性中有一例找筝，兩百位女性中有一例）蹈垢、弱視（三十個(gè)人中有一例），或者全盲（一百八十八人中就有一例）袖裕。

使用顏色去高亮或者補(bǔ)充那些本身就可見(jiàn)的內(nèi)容

在下面這個(gè)黑白的例子里曹抬，你能看出有多少表單表達(dá)了錯(cuò)誤的狀態(tài)？

大多數(shù)看到這個(gè)黑白表單的人的答案會(huì)是一個(gè)急鳄，也就是那個(gè)“human verification”驗(yàn)證碼的框谤民。這是因?yàn)槠渲杏幸粋€(gè)三角形的感嘆號(hào)標(biāo)志。

現(xiàn)在來(lái)看看一個(gè)同樣的例子疾宏，只是加了顏色张足。這下有多少表單你認(rèn)為顯示了錯(cuò)誤的狀態(tài)？

當(dāng)有顏色后坎藐，這個(gè)答案變成了“所有四個(gè)”为牍。

有很多不同的辦法可以讓這個(gè)表單從視覺(jué)部分做到“無(wú)障礙”。你可以在所有顯示錯(cuò)誤的框里放置一個(gè)紅色的三角圖標(biāo)在岩馍；你可以使用文字去說(shuō)明和解釋為什么一個(gè)框是錯(cuò)誤的碉咆；你可以使用工具條、粗線蛀恩、粗體字疫铜、下劃線、斜線等等双谆。這類的選擇是無(wú)限的壳咕，但唯一的規(guī)則就是不要單單使用顏色。

如果是你佃乘，又會(huì)如何設(shè)計(jì)這個(gè)注冊(cè)表單呢囱井？

更新：上述這個(gè)paypal的注冊(cè)表單出現(xiàn)無(wú)障礙缺陷的原因貌似是因?yàn)槲业臑g覽器里有一個(gè)叫做LastPss的插件造成的。感謝來(lái)自Paypal的Amidei(@subface)指出這個(gè)問(wèn)題趣避。在原本的設(shè)計(jì)中，這個(gè)三角圖標(biāo)在錯(cuò)誤狀態(tài)下應(yīng)該總是出現(xiàn)新翎。

3. 確保文字和背景之間足夠的對(duì)比

根據(jù)WCAG程帕，文字和背景之間的對(duì)比度比例應(yīng)該至少是4.5:1。如果你的字體24PX以上或者19PX粗度地啰，那么這個(gè)比例就可以縮小到3：1.

這個(gè)大綱能幫助那些弱視和色盲的用戶識(shí)別和閱讀屏幕上的文字愁拭。

這意味著當(dāng)文字是24Px以上,19px粗時(shí)，你能用在一個(gè)白色背景上的最淺灰度顏色是#959595亏吝。

對(duì)于更小的字體岭埠，背景的灰度要進(jìn)一步降低到#767676。同樣，如果你使用了一個(gè)灰色的背景惜论，那么字體的顏色需要更深许赃。

推薦兩個(gè)可以幫助你找到無(wú)障礙顏色配對(duì)的工具：Color Safe，WebAIM’s Color Contrast Checker,后者還能讓你對(duì)已經(jīng)選擇的顏色進(jìn)行測(cè)試馆类。

logo或者那些不可點(diǎn)擊的元素是一個(gè)例外混聊，比如處在非活躍狀態(tài)的按鍵。

下面是使用了低于標(biāo)準(zhǔn)對(duì)比度比例文字的例子乾巧。只有最左邊那個(gè)巨大的”M”符合了標(biāo)準(zhǔn)句喜。

下面這個(gè)BBC的例子顯示了有顏色的UI界面。你可以看到它的最低灰度是#767676沟于，遵守了對(duì)比值比例的規(guī)范咳胃。

我很榮幸能和Salesforce Design System的團(tuán)隊(duì)一起工作，他們?cè)赟alesforce的移動(dòng)應(yīng)用里很好地遵守了顏色對(duì)比度大綱旷太。

4. 為鍵盤用戶提供視覺(jué)聚焦指示

感謝那些reset CSS和它帶給現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)師的一系列功能展懈。如果沒(méi)有它們，在不同設(shè)備和瀏覽器里想要?jiǎng)?chuàng)建統(tǒng)一的互聯(lián)網(wǎng)體驗(yàn)會(huì)變得異常困難泳秀。

但我們也不得不正視這類reset CSS在互聯(lián)網(wǎng)上廣泛傳播的無(wú)障礙缺陷标沪。

這一行CSS成為了那些只用鍵盤導(dǎo)航和瀏覽網(wǎng)站的用戶的噩夢(mèng)。幸運(yùn)的是嗜傅，現(xiàn)在一些流行的改進(jìn)版本金句，比如Eric Meyer‘s 已經(jīng)把這一段代碼給去掉了。

設(shè)計(jì)師和程序員可以用一些同時(shí)兼具可視性并符合他們網(wǎng)頁(yè)風(fēng)格的設(shè)計(jì)去替換這類邊框吕嘀。

問(wèn)題是违寞，大多數(shù)網(wǎng)站沒(méi)有創(chuàng)建他們自己的聚焦形式。而這些聚焦對(duì)于鍵盤用戶來(lái)說(shuō)是必須的偶房，這不能不說(shuō)是當(dāng)前互聯(lián)網(wǎng)的一大缺失趁曼。

想看看一個(gè)網(wǎng)站是不是提供了這個(gè)功能嗎？打開(kāi)一個(gè)新標(biāo)簽棕洋，訪問(wèn)隨便一個(gè)網(wǎng)站挡闰，比如你的手機(jī)生產(chǎn)商的網(wǎng)站。不斷按Tab鍵在整個(gè)頁(yè)面進(jìn)行導(dǎo)航掰盘，在這個(gè)過(guò)程中你喲沒(méi)有注意到一些聚焦的選框出現(xiàn)摄悯？也許你可以看到有些鏈接有，但并不是全部愧捕？考慮一下這對(duì)于一個(gè)只用鍵盤來(lái)操作網(wǎng)站的人的影響奢驯。

如果你正在使用一臺(tái)mac，你可能需要開(kāi)啟全鍵盤接入（在系統(tǒng)偏好設(shè)置>鍵盤>快捷鍵里次绘，在最底下你可以找到它）瘪阁。

你也可以去掉默認(rèn)的聚焦形式撒遣，替換成一個(gè)比瀏覽器默認(rèn)更好的選擇。

在下面的例子里管跺，BBC使用了一個(gè)有顏色的橫條來(lái)顯示哪個(gè)鏈接被選中了义黎。

Twitter使用了默認(rèn)聚焦和工具條結(jié)合的方式去顯示鍵盤聚焦。這個(gè)圖標(biāo)同時(shí)也從灰色變成了綠色伙菜。這給鍵盤用戶帶來(lái)了三種不同的視覺(jué)方法來(lái)聚焦轩缤。

如果你選擇了自定的聚焦風(fēng)格，請(qǐng)確保去掉默認(rèn)的贩绕，這樣你才不會(huì)像下面這個(gè)例子一樣搞笑火的。Chrome的藍(lán)色方框蓋住了菜單項(xiàng)自己的藍(lán)色。

5. 小心表單

最近幾年我們經(jīng)歷了無(wú)數(shù)次表單的消除演化∈缜悖現(xiàn)代設(shè)計(jì)已經(jīng)顛覆了傳統(tǒng)的交互啟示和識(shí)別屬性馏鹤，取而代之的是一個(gè)更極簡(jiǎn)的方法。然而當(dāng)下的表單缺少兩個(gè)對(duì)無(wú)障礙非常關(guān)鍵的元素：清晰的邊框定義和可見(jiàn)標(biāo)簽娇哆。

沒(méi)有邊框的表單

下面是一個(gè)傳統(tǒng)的文字輸入框的例子湃累。它由一個(gè)矩形和一個(gè)既定的邊框組成，還有無(wú)關(guān)緊要的填充顏色碍讨。同時(shí)你還可以看到左邊有一個(gè)可見(jiàn)標(biāo)簽治力。

清晰的表單邊框?qū)τ谟行袆?dòng)和認(rèn)知困難的用戶來(lái)說(shuō)非常重要。有認(rèn)知障礙的用戶可能在尋找和操作一些沒(méi)有視覺(jué)線索的表單時(shí)產(chǎn)生困難勃黍，比如他們無(wú)法知道這個(gè)表單的位置和大小宵统。

下面是一個(gè)搜索表單的例子：

在這個(gè)屏幕上只有一個(gè)可以輸入的地方，你能猜到是哪里嗎覆获？事實(shí)是點(diǎn)擊“Search Notes”的任何一處都可以讓你進(jìn)行輸入马澈。

下面是另個(gè)一個(gè)沒(méi)有邊框的例子，實(shí)際上有兩個(gè)可以輸入的地方弄息。在屏幕上我該點(diǎn)擊哪里才可以在“tell your story….”的文本框進(jìn)行輸入呢痊班？

下面是一個(gè)同樣的截屏，我只是在外面多加了一個(gè)藍(lán)色矩形邊框摹量。這個(gè)框代表這輸入作用范圍涤伐，如果你點(diǎn)擊這個(gè)區(qū)域以下的地方，那么什么也不會(huì)發(fā)生缨称。

下面是另一個(gè)例子废亭。它同樣沒(méi)有采用傳統(tǒng)的邊框設(shè)計(jì)，但是提供給有殘障的用戶更多的信息具钥。標(biāo)題在兩條水平線之間，而用戶可以點(diǎn)擊最下面的兩條線之間開(kāi)始寫作液兽。

你能給這些設(shè)計(jì)師們想到邪惡其他的注意嗎骂删？如果是你掌动，你會(huì)怎么設(shè)計(jì)一個(gè)筆記或者博客發(fā)布應(yīng)用？

沒(méi)有標(biāo)簽的表單

標(biāo)簽告訴用戶這個(gè)表單的目的宁玫，無(wú)論是黨光標(biāo)聚焦在表單內(nèi)還是完成輸入時(shí)粗恢，標(biāo)簽要始終保持有效性。對(duì)于視覺(jué)標(biāo)簽來(lái)說(shuō)欧瘪，占位符文字是一個(gè)很糟糕的替代品眷射。

他們是一個(gè)典型的低對(duì)比例子。下面的七個(gè)例子中佛掖，只有一個(gè)擁有足夠的對(duì)比妖碉，滿足我們的4.5:1的比例。

占位字符消失的話芥被，比如下面這個(gè)例子里欧宜，我該輸入什么東西？在JetBlue的這個(gè)例子里拴魄，我應(yīng)該輸入我的用戶名冗茸、電子郵箱，還是我的TrueBlue號(hào)碼匹中？在Caveiar的這個(gè)例子中夏漱，我應(yīng)該輸入我最喜歡的食物、偏好的餐館顶捷，還是我的地址來(lái)“Get Started”挂绰？

針對(duì)上面這個(gè)價(jià)格表單，還有一個(gè)更優(yōu)雅的解決方案焊切，可以保證即便在輸入內(nèi)容后也能看到標(biāo)和最多最少的信息：

6. 避免組成識(shí)別危機(jī)

問(wèn)：什么時(shí)候一個(gè)菜單不再是一個(gè)菜單扮授？

答： 當(dāng)它是一個(gè)非模態(tài)對(duì)話框的時(shí)候。

這個(gè)是當(dāng)今互聯(lián)網(wǎng)最大的無(wú)障礙問(wèn)題的核心問(wèn)題专肪。為了讓你們理解得更全面刹勃，可以看一下這篇文章：W3C’s Authoring Practices for Design Patterns。這里包含了針對(duì)很多今天常見(jiàn)無(wú)障礙問(wèn)題的解決方案嚎尤，包括菜單荔仁、模態(tài)、自動(dòng)填充等芽死。

每個(gè)規(guī)則都有一個(gè)特定的HTML語(yǔ)義乏梁、鍵盤行為和ARIA屬性用量。這些ARIA屬性指示屏幕的閱讀者使用鍵盤的時(shí)候如何與一個(gè)控件產(chǎn)生互動(dòng)关贵。同時(shí)它們?cè)谟脩襞c控件產(chǎn)生交互時(shí)提供狀態(tài)更新遇骑。例如，他們指導(dǎo)人們?cè)诮换ヒ粋€(gè)菜單時(shí)揖曾，使用方向箭頭來(lái)向上和向下移動(dòng)列表落萎。

加了圖標(biāo)后：

這些本質(zhì)上都是一樣的UI規(guī)則吊骤。用戶在一個(gè)輸入框里輸入時(shí)嘿般，一個(gè)包含所有可能結(jié)果的列表顯示在下面创倔。用戶可以使用方向鍵或者鼠標(biāo)去定位和選擇列表里的某個(gè)項(xiàng)目瘩扼。

下面的例子是一個(gè)自動(dòng)填充，存在著一個(gè)識(shí)別危機(jī)媒鼓。用戶不僅可以在列表中過(guò)濾和選擇一個(gè)項(xiàng)目届吁，他們還可以通過(guò)點(diǎn)擊鉛筆或者回收站圖標(biāo)選擇編輯或者刪除某個(gè)列表項(xiàng)。額外的這兩個(gè)按鍵正是給予了自動(dòng)填充識(shí)別危機(jī)的原因绿鸣。

造成了無(wú)障礙的原因是因?yàn)樗蚱屏俗詣?dòng)填充標(biāo)準(zhǔn)鍵盤的交互模型疚沐。對(duì)于這種困惑的組件狀態(tài)，輔助技術(shù)顯然不能總是識(shí)別和操作枚驻，因?yàn)閃3C的WAI沒(méi)有定義一個(gè)針對(duì)這類型UI的交互方式濒旦。

這個(gè)規(guī)則同樣對(duì)菜單適用。在下面這個(gè)來(lái)自Virgin America的例子中再登，雖然視覺(jué)上看起來(lái)很相似尔邓，只有右邊的下拉框是確實(shí)的“菜單”，而左邊的是一個(gè)非模態(tài)對(duì)話框锉矢。

菜單是一個(gè)插件梯嗽，提供用戶一個(gè)列表的項(xiàng)供選擇。如果我們?cè)诿恳豁?xiàng)上還能進(jìn)行多種操作沽损，就像左邊這個(gè)例子一樣灯节，我們面對(duì)的就不再只是一個(gè)菜單。這改變了鍵盤交互模型绵估，從使用方向鍵炎疆，變成了使用tab按鍵。它改變了鍵盤聚焦的方式和當(dāng)下拉框被關(guān)閉后的去向国裳。

不像上面的自動(dòng)填充例子形入，非模態(tài)對(duì)話框可以很幸運(yùn)地做到無(wú)障礙設(shè)計(jì)。了解他們之間在用戶體驗(yàn)上的區(qū)別和影響缝左。了解細(xì)小的設(shè)計(jì)改變可以如何導(dǎo)致用戶的交互模型亿遂，會(huì)讓你選擇合適于你項(xiàng)目的規(guī)則。

7. 不要讓人們懸浮去找東西

這通常針對(duì)那些有運(yùn)動(dòng)相關(guān)殘障的人士渺杉，包括只能使用鍵盤的用戶蛇数，和那些使用語(yǔ)音識(shí)別工具來(lái)與網(wǎng)頁(yè)互動(dòng)的人。鍵盤用戶和語(yǔ)音輔助的工具完全仰賴屏幕上的可操作項(xiàng)是越。如果一個(gè)鏈接或者一個(gè)按鍵不能被語(yǔ)音識(shí)別系統(tǒng)監(jiān)測(cè)到耳舅，那么所謂的“請(qǐng)按下XX”就成了空話。如果一個(gè)只能使用鍵盤的用戶連可以點(diǎn)擊的按鍵都看不到倚评，我們又如何期待他們?nèi)ミM(jìn)行操作挽放？

下面是一個(gè)使用Dragon Naturally Speaking系統(tǒng)的Gmail截圖绍赛，我們可以看到所有超鏈接都被標(biāo)識(shí)了一個(gè)數(shù)字。用戶現(xiàn)在可以說(shuō)出一個(gè)數(shù)字然后激活對(duì)應(yīng)的鏈接辑畦。如果一個(gè)鏈接不懸浮上去就看不到呢？我們會(huì)用數(shù)字去標(biāo)識(shí)一個(gè)空白的空間腿倚。

我理解這種把東西藏起來(lái)并用懸浮去顯示的理論為什么會(huì)流行纯出。它確實(shí)為遵從等級(jí)制度的易用性問(wèn)題提供了一個(gè)比較好的解決方案，這一點(diǎn)是計(jì)算機(jī)學(xué)家Alan Kay指出的敷燎。

“Simple things should be simple, complex things should be possible.” -Alan Kay

我是這個(gè)等級(jí)制度理論的鑒定信仰者暂筝。但是這個(gè)理論應(yīng)該讓復(fù)雜的東西對(duì)所有的用戶都至少做到“可能”，包括哪些殘障人士硬贯。不幸的是對(duì)于無(wú)障礙設(shè)計(jì)來(lái)說(shuō)焕襟，很多人顯然曲解了這條定理。

“Primary things should be visible, secondary things should be shown on hover.”

與其把操作和信息藏在懸浮狀態(tài)里饭豹，不如探索更多的可能性：

1 把次要的操作放在菜單里鸵赖，或者非模態(tài)對(duì)話框里，而不是用懸浮狀態(tài)來(lái)隱藏觸發(fā)機(jī)制拄衰。

2 降低次要圖標(biāo)的對(duì)比度它褪，在懸浮時(shí)再增加對(duì)比度。

3 為觸發(fā)機(jī)制使用明確的樣式翘悉。一個(gè)涵蓋信息的圖標(biāo)比空白作為觸發(fā)機(jī)制要好得多茫打。

下面是一個(gè)LInkedin上的例子。我把我的個(gè)人主頁(yè)做了個(gè)截圖妖混。

這是當(dāng)我移動(dòng)光標(biāo)到我的個(gè)人卡片上時(shí)：

突然之間就有了一些視覺(jué)標(biāo)識(shí)老赤，我可以單獨(dú)編輯這個(gè)頁(yè)面上的很多選項(xiàng)，比如我的姓名制市、職稱抬旺、上一份工作、教育息堂，甚至我的照片嚷狞。繼續(xù)看下去，當(dāng)我懸浮鼠標(biāo)到每一項(xiàng)上時(shí)荣堰，文字變成了藍(lán)色：

下面是一個(gè)無(wú)障礙解決方案床未，解決可能給部分人群帶來(lái)的設(shè)計(jì)問(wèn)題。我在每一個(gè)可以編輯的項(xiàng)目旁邊使用了很小的鉛筆圖標(biāo)振坚。是的薇搁，它們總是在那。

當(dāng)我懸浮鼠標(biāo)到某一項(xiàng)上時(shí)渡八，藍(lán)色出現(xiàn)啃洋。

當(dāng)展示這種解決方案時(shí)传货，設(shè)計(jì)師們往往會(huì)被質(zhì)疑：

這看起來(lái)有點(diǎn)“重”，不是嗎宏娄？

也許是的问裕，但是這是這個(gè)問(wèn)題的一個(gè)可能的解決方案。另外孵坚，它只會(huì)在我的個(gè)人主頁(yè)出現(xiàn)粮宛。一個(gè)人會(huì)花多少時(shí)間盯著自己的LinkedIn主頁(yè)去看呢？這種“重”對(duì)于整體的無(wú)障礙性是否是平衡的考量卖宠？如果我們不喜歡這里的鉛筆圖標(biāo)的話巍杈，還能有什么其它的改進(jìn)？

這里是另一個(gè)來(lái)自Evernot的例子扛伍。這里顯示了一溜的筆記筷畦。當(dāng)用戶的鼠標(biāo)懸浮在某一行上時(shí)，四個(gè)可操作圖標(biāo)出現(xiàn)了刺洒。在這個(gè)案例中鳖宾，我會(huì)詢問(wèn)設(shè)計(jì)師去探索是否有可能常駐這四個(gè)圖標(biāo)。一個(gè)可能的解決方案是永遠(yuǎn)顯示這些圖標(biāo)作媚。比如綠色的圖標(biāo)和白色的背景攘滩，在懸浮時(shí)反相就好。

這種解決方案也可能會(huì)被認(rèn)為“太重了”纸泡，但是記住我們不是在為設(shè)計(jì)師們?cè)O(shè)計(jì)漂问。我們的目標(biāo)用戶是更為廣泛的人群，他們擁有不同的需求和不一樣的計(jì)算機(jī)使用水平女揭。

在表面上看來(lái)蚤假，在你排布設(shè)計(jì)元素、懸浮狀態(tài)和視覺(jué)設(shè)計(jì)上設(shè)置這些限制或多或少會(huì)限制你的創(chuàng)意吧兔。若你希望你的視覺(jué)設(shè)計(jì)能讓更多的人滿意磷仰，這些無(wú)障礙大綱會(huì)推動(dòng)你的創(chuàng)意。