本文的作者Jesse Hausler，是一個在可訪問性領(lǐng)域深耕12年的資深從業(yè)者。目前Jesse 供職于Salesforce，作為首席可訪問性設(shè)計專家，到現(xiàn)在已經(jīng)有4個年頭了。這篇文字所探討的7個問題坦率的講，大多都是我們平時都忽略的“細(xì)微末節(jié)”。但也正是這些細(xì)微末節(jié)之處，使得有行為障礙或者肢體缺陷的用戶如此難于使用網(wǎng)頁或者APP。可訪問性設(shè)計是如此的重要，有的時候一點小小的改變，能給一部分用戶帶來翻天覆地的體驗轉(zhuǎn)變。

這篇文章的上半部分戳這里：《漲姿勢！ 對于可訪問性設(shè)計師必知的7件事(上)》

4、為鍵盤焦點提供更明確的視覺提醒

探討這個問題之前，先感謝一下“樣式重置”功能的存在以及它為當(dāng)代網(wǎng)頁設(shè)計師所提供的便捷。如果沒有這個功能，跨設(shè)備和跨瀏覽器網(wǎng)頁設(shè)計是何其艱難，完全無非像現(xiàn)在這樣提供一致的體驗。

接下來，我們該說說現(xiàn)在樣式重置所造就的流傳最廣泛的可訪問性設(shè)計失誤之一：

:focus {outline: 0;}

這行隱藏在CSS中的代碼，讓視覺障礙者幾乎沒法僅靠鍵盤來訪問網(wǎng)站。還好，隨著最初的CSS樣式標(biāo)準(zhǔn)的逐步演進(jìn)，許多站點也隨著Eric Meyer所釋出的更新而更新，移除了未定型的 :focus 的偽類。

使用未定型 :focus 的出發(fā)點還是很好的：移除默認(rèn)的 focus 樣式，讓設(shè)計師和開發(fā)者將其替換為視覺上更能引人注意，同時也符合網(wǎng)頁風(fēng)格的樣式。許多用戶也已經(jīng)厭倦了IE里的虛線框與Chrome和Firefox瀏覽器里的藍(lán)色光暈。

Chrome和Firefox 瀏覽器默認(rèn)的focus樣式

問題在于，許多網(wǎng)站壓根不會創(chuàng)建屬于他們自己的Focus樣式，而對于習(xí)慣使用鍵盤的用戶而言（歐美確實比較多），沒有Focus 標(biāo)識，瀏覽網(wǎng)絡(luò)的時候幾乎是處于半癱瘓狀態(tài)。

隨便開一個網(wǎng)站，然后開始快速瀏覽，用方向鍵滾動，用Tab鍵選定鏈接，你能找到多少鏈接？這些是全部的么？你能用Tab鍵瀏覽完整個頁面么？所以，想想那些用戶此刻的感受。（注意這里的用戶不是“普通用戶”）

如果你使用的是Mac，那么你可能需要稍微設(shè)定一下，在系統(tǒng)偏好設(shè)置 >> 鍵盤 >> 快捷鍵 中，選定最下方的“所有控制”，確保可以使用Tab鍵，控制鍵盤焦點。

如果你移除了默認(rèn)的focus 樣式，用你認(rèn)為更好的樣式替代原有的，那么也需要仔細(xì)考慮一下用戶體驗。還是以BBC為例，他們使用了一個藍(lán)色的光標(biāo)在鏈接下方，用以指示鏈接的存在。

Twitter 則將兩種樣式結(jié)合到了一起，默認(rèn)的藍(lán)色光暈Focus樣式保留了，當(dāng)你使用Tab鍵切換的時候，圖標(biāo)回由灰色轉(zhuǎn)為綠色，這樣可以更好地吸引用戶注意力，配合鏈接上方的彈出的對話框說明鏈接的功用，可以說做的相當(dāng)貼心了。?

當(dāng)你要添加自己的focus樣式的時候，請務(wù)必確認(rèn)已經(jīng)移除了默認(rèn)的樣式，否則兩者會重疊到一起。

5、小心處理表單

最近幾年，各種設(shè)計風(fēng)格層出不窮，發(fā)展迅速，而與之形成鮮明對比的是表單設(shè)計和表單用戶體驗上的退化。更為現(xiàn)代的設(shè)計風(fēng)格用簡約的屬性和強交互性來替代傳統(tǒng)的模式。但是高大上的風(fēng)格化之下，隱藏了兩個明顯的缺陷：缺少明確邊界和可見的標(biāo)簽。

沒有邊界的表單

下面是一個傳統(tǒng)的文字輸入案例，矩形的輸入框標(biāo)識出了邊界，框內(nèi)還可以填充色彩，不過這通常取決于你的設(shè)計。左側(cè)的標(biāo)簽（label）則會說明輸入框中所需輸入字段的屬性，這兩者構(gòu)成了常見輸入框的兩個基本組件。

現(xiàn)代的文本輸入框

表單的字段說明和明顯的邊界對于行動不便者和認(rèn)知障礙者極為重要，邊界的存在使得他們能夠了解需要點擊的位置和被點擊位置的尺寸大小，有認(rèn)知障礙的用戶在沒有視覺提醒的情況下，可能完全無法與輸入框進(jìn)行互動。

下面是某個著名筆記類應(yīng)用的輸入框設(shè)計：

光標(biāo)提示已經(jīng)被移除了，如果我要搜索，那么我該在哪個地方點擊呢？

當(dāng)然，屏幕上只有一個地方可以輸入，可是你能否猜出輸入框的邊界？點擊“Search notes” 所在的區(qū)域，你就可以輸入了。另外一個典型的案例是某著名博客平臺，下面的截圖中，其實是有兩個地方可以輸入的，也都沒有輸入框：

哪里能夠直接輸入來“講述我的故事”？

用藍(lán)色的矩形標(biāo)注出輸入框的邊界之后，你會發(fā)現(xiàn)實際可響應(yīng)的區(qū)域遠(yuǎn)遠(yuǎn)小于你的想象。

再來一個案例。下面的案例也沒有使用傳統(tǒng)輸入框的視覺設(shè)計，但是設(shè)計師依然對輸入框的邊界作出了提醒。筆記標(biāo)題的輸入框使用了兩條水平線來標(biāo)識，這個時候，用戶至少能夠明白在兩條線之間的任何位置都可以輸入。

非標(biāo)準(zhǔn)，但是依然給了用戶足夠的暗示。

你能否幫助這些設(shè)計師想出更多方案呢？如果讓你來設(shè)計一個風(fēng)格現(xiàn)代但又有足夠可訪問性的筆記類應(yīng)用，你會怎么設(shè)計呢？

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

表單前的標(biāo)簽標(biāo)識出了表單所需要填充的內(nèi)容，即使不標(biāo)注在表單左邊，至少也要在輸入框內(nèi)作出提示。相比于傳統(tǒng)的標(biāo)簽提醒，內(nèi)至于輸入框的提示占位符其實在視覺上相對比較弱。

主要的問題在于，在輸入框內(nèi)的提示通常對比度較低，下面的七個案例中，僅有一個能達(dá)到4.5:1 的標(biāo)準(zhǔn)對比度。

僅有“Search Twitter”的占位符能達(dá)到對比度的最低標(biāo)準(zhǔn)。

在下面的案例中，JetBlue的網(wǎng)站將作為提示的占位符文本干脆就移除了。那么我要輸入什么才行呢？是郵箱還是用戶名？用戶無從得知。右側(cè)的案例倒是有所標(biāo)識，但是提示和沒說沒啥區(qū)別。我到底是要輸入我喜歡的食物還是我的地址來“Get Started”？下方的價格的內(nèi)容“50”和“75”是代表最高和最低價格么？也完全搞不清楚。

下方的表單設(shè)計就清楚多了。

6、不要讓組件“身份模糊”（認(rèn)同危機）

Q：什么時候“菜單”不再是“菜單”？
A：當(dāng)它不再是模式化的界面的時候。

實際上，這是當(dāng)今網(wǎng)絡(luò)的可訪問性設(shè)計最大的問題。如果想要充分理解這一問題，那么我還得從W3C的設(shè)計模式創(chuàng)作實踐開始說起。現(xiàn)如今常見的設(shè)計模式、菜單、模板、Tab、樹狀結(jié)構(gòu)、自動完成等許多涉及可訪問性設(shè)計的東西，都是基于W3C的這個設(shè)計指南來構(gòu)建的。

每個設(shè)計模式都有一套特定的預(yù)設(shè)HTML語法、鍵盤行為和ARIA屬性。這些ARIA屬性指明了當(dāng)用戶如何使用鍵盤來與屏幕進(jìn)行交互，還指明來當(dāng)用戶與不同組件進(jìn)行交互的時候，狀態(tài)應(yīng)該如何改變。比如，用戶如何使用鼠標(biāo)箭頭來瀏覽菜單列表，其中也有詳細(xì)指導(dǎo)。

看看下面這個自動完成的預(yù)輸入表單：

下面這個預(yù)輸入表單完成度更高，每個條目前還加了對應(yīng)的小圖標(biāo)：

這些組件基本都遵循著相同的UI設(shè)計模式，用戶在上面的輸入框輸入內(nèi)容，下方的表單中列出預(yù)測或者篩選出的條目。接下來，用戶可以使用鍵盤或鼠標(biāo)來選定特定條目，進(jìn)階一點的設(shè)計中，用戶可以點擊每個條目右側(cè)的鉛筆圖標(biāo)進(jìn)行編輯，或者刪除不需要的條目。接下來問題來了，右側(cè)新增的兩個用來編輯的小圖標(biāo)讓這些預(yù)測/篩選條目的角色變模糊了（identity crisis）。

作為一個表單自動填充功能，加入了這樣的“隱藏功能集”，用鼠標(biāo)可以勉強進(jìn)行操作，但是原本的鍵盤在進(jìn)行這一的操作的時候幾乎沒法完成，著使得原本約定俗成的標(biāo)準(zhǔn)交互模式幾乎完全失效。

所以，這一的設(shè)定會產(chǎn)生明顯的可訪問性的問題。這里的編輯和刪除功能作為一項輔助的功能，在W3C的WAI文檔中并未界定位可溝通的UI組件，在這里卻使得主要的自動預(yù)測填充功能身份模糊。

同樣的，在菜單中也應(yīng)該注意類似的問題。下面的案例來自Virgin Amarica，雖然視覺上設(shè)計得非常相似，但是右邊是一個標(biāo)準(zhǔn)的菜單欄，左側(cè)并非標(biāo)準(zhǔn)的下拉菜單。

下拉菜單作為標(biāo)準(zhǔn)的UI組件，通常是位用戶提供多種選擇的選擇列表。但是當(dāng)我們?nèi)缤髠?cè)來設(shè)計菜單欄的時候，壓根就沒必要加上下拉菜單。單純的上下鍵切換已經(jīng)沒有太大意義，直接用鼠標(biāo)操作，或者使用Tab鍵來切換才行。

當(dāng)然，并不是所有的修改都會破壞表單自動填充的可訪問性。了解每一個UI細(xì)節(jié)上的改變對于用戶交互的影響，對可訪問性設(shè)計的影響，你依然可以設(shè)計出足夠好的菜單。

7、不要讓用戶將鼠標(biāo)移動到某個位置懸停來獲取信息

其實這一原則主要是針對有行動障礙的用戶而設(shè)定的。對于那些擁有視力，但是只能使用鍵盤的用戶、使用Dragon NaturallySpeaking 這樣的語音識別工具的用戶。當(dāng)他們與網(wǎng)頁進(jìn)行互動的時候，所存在的問題就很實際了。這兩類用戶都能夠看清楚網(wǎng)頁，前者只能使用鍵盤，后者連鍵盤都沒法用，就更不用說鼠標(biāo)了，點擊這種交互行為和他們無關(guān)。如果一個只能使用鍵盤的用戶沒法看到隱藏的按鈕，那么又如何能指望他們?nèi)ゼせ钇聊簧系陌粹o呢？

下面的界面，就是借助語音控制工具Dragon NaturallySpeaking 來訪問Gmail的情形，用戶可以通過大聲說出標(biāo)識出的鏈接編號來激活鏈接。這也就意味著，如果鏈接無法被軟件識別出來，用戶就無法“點擊”它了。如果鏈接需要鼠標(biāo)懸停顯示，且真的被軟件識別出來，那么你會在空白位置看到一數(shù)字，而沒有任何提示。用戶如何知道它是干啥的？

我也明白這種交互式的鏈接呈現(xiàn)方式是如何流行起來的。計算機科學(xué)家Alan Kay 在談及行之有效的可用性設(shè)計的時候，給出了這樣的方案。

“簡單的東西應(yīng)該保持簡單，而復(fù)雜的問題應(yīng)該有可能的解決方案。”

我是這一啟示的堅定支持者，但是就單純的鏈接和按鈕的設(shè)計方案而言，如果要確保殘障人士的使用體驗，這個“復(fù)雜”的問題，應(yīng)該用其他的解決方案。更加不幸的是，很多人將Alan Kay 的這句話曲解為：“主要的東西應(yīng)該是可見的，而次要的東西應(yīng)該是隱藏的。”

相比于將操作和信息隱藏起來在懸停狀態(tài)下激活，你應(yīng)該找一些更具包容性的替代方案。

• 盡量使用菜單或者下拉框來容納次要的操作或者鏈接;
• 降低二級菜單圖標(biāo)的對比度，當(dāng)光標(biāo)移動到其上的時候色彩加深或者提升對比度；
• 使用懸停觸發(fā)機制的時候，盡量在界面上使用有形的視覺元素來觸發(fā)。一個信息圖標(biāo)比空白更容易吸引注意力，也更符合觸發(fā)邏輯。

接下來，我使用我的LinkedIn頁面來作為分析對象。

當(dāng)我將鼠標(biāo)移動到我的個人資料上的時候，會這樣：

突然之間出現(xiàn)的這些小按鈕表明我可以單獨編輯大量的內(nèi)容，包括我的姓名、職務(wù)、之前的工作、教育背景以及我的照片。接下來，當(dāng)我將光標(biāo)懸停在我的職位上的時候，這個條目會立刻變成淺藍(lán)色，表示我準(zhǔn)備點擊了。

下面的一個解決方案可能會在可訪問性上對一些特定的用戶群產(chǎn)生影響。我使用更小的無背景鉛筆圖標(biāo)來作為可編輯的標(biāo)識，不是懸停顯示，而是一直顯示。

當(dāng)我懸停在某個可編輯字段上的時候，底色變?yōu)樗{(lán)色，按鈕也添加一個深藍(lán)色的背景。

當(dāng)我拿出這個方案的時候，有的設(shè)計師可能會說了：“這樣設(shè)計是不是太重了點？”

不可否認(rèn)，確實有可能，但是這樣設(shè)計確實在盡量保持易用性和美觀的前提下，提升了可訪問性。更何況這種情況只在訪問用戶的個人信息頁面的時候才會出現(xiàn)。又有誰會一天到晚看自己的個人信息頁呢？相比于“偏重”的設(shè)計，總體可訪問性的提升，應(yīng)該更有價值吧？如果不這么設(shè)計，那么還有什么更優(yōu)秀的方案呢？

接下來再看一個來自Evernote的案例。下面的界面是Evernote的列表界面。當(dāng)你光標(biāo)移動到某一列上的時候，右上角會顯示四個可交互的小圖標(biāo)。

在這種情況下，我會要求設(shè)計師更進(jìn)一步探索這四個圖標(biāo)在整體設(shè)計上的可能性。它們其實也可以在每一個條目上都顯示，當(dāng)光標(biāo)移動到條目之上的時候，整體色彩反轉(zhuǎn)。

這樣的設(shè)計其實也可以說“偏重”了，但是要知道，Evernote并不只是給設(shè)計師用的，實際Evernote的用戶群體比設(shè)計師群體大很多，用戶的背景、習(xí)慣都不一樣。

結(jié)語

乍一看，關(guān)于可訪問性的7件事情似乎都會對你的設(shè)計有所限制，不論是交互上還是視覺設(shè)計上都有種束手束腳的感覺。但是限制本身就是客觀存在的。這7個問題是挑戰(zhàn)，也更是提升設(shè)計的契機，你能在尋找賞心悅目設(shè)計的同時，走向更加易用，讓更多的用戶流暢的用上你的產(chǎn)品，這是對的方向。

成為交互設(shè)計師的必讀好文！

阿里巴巴資深交互設(shè)計師經(jīng)驗！
《推薦！交互設(shè)計那些事兒（一）》

網(wǎng)易設(shè)計總監(jiān)親歷分享！
《網(wǎng)易美女設(shè)計主管！交互設(shè)計菜鳥如何入門？》

交互設(shè)計師自學(xué)指南！
《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》

原文地址：medium
優(yōu)設(shè)譯者：@陳子木

「子木說」

預(yù)訂了Apple Watch的同學(xué)，今天應(yīng)該都到手了吧？除了集中吐槽了不銹鋼機身容易刮傷（其實勞力士什么的也這樣）之外，大家都在積極曬表曬桌面曬電腦曬自己……

好吧，考慮到優(yōu)設(shè)是一個設(shè)計博客而不是數(shù)碼評測專業(yè)戶，在這里忍不住想問一下買了表的用戶，Apple Watch 在易用性和可訪問性上還存在什么問題？從一個專業(yè)的UI設(shè)計師的角度上來看，Apple Watch還有哪些地方值得吐槽？請在文章下方的評論框留言吧，我們會積極與你互動的~

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量94萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：