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

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

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

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

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

:focus {outline: 0;}

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

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

Chrome和Firefox 瀏覽器默認的focus樣式

問題在于，許多網站壓根不會創建屬于他們自己的Focus樣式，而對于習慣使用鍵盤的用戶而言（歐美確實比較多），沒有Focus 標識，瀏覽網絡的時候幾乎是處于半癱瘓狀態。

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

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

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

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

當你要添加自己的focus樣式的時候，請務必確認已經移除了默認的樣式，否則兩者會重疊到一起。

5、小心處理表單

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

沒有邊界的表單

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

現代的文本輸入框

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

下面是某個著名筆記類應用的輸入框設計：

光標提示已經被移除了，如果我要搜索，那么我該在哪個地方點擊呢？

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

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

用藍色的矩形標注出輸入框的邊界之后，你會發現實際可響應的區域遠遠小于你的想象。

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

非標準，但是依然給了用戶足夠的暗示。

你能否幫助這些設計師想出更多方案呢？如果讓你來設計一個風格現代但又有足夠可訪問性的筆記類應用，你會怎么設計呢？

沒有標簽的表單

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

主要的問題在于，在輸入框內的提示通常對比度較低，下面的七個案例中，僅有一個能達到4.5:1 的標準對比度。

僅有“Search Twitter”的占位符能達到對比度的最低標準。

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

下方的表單設計就清楚多了。

6、不要讓組件“身份模糊”（認同危機）

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

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

每個設計模式都有一套特定的預設HTML語法、鍵盤行為和ARIA屬性。這些ARIA屬性指明了當用戶如何使用鍵盤來與屏幕進行交互，還指明來當用戶與不同組件進行交互的時候，狀態應該如何改變。比如，用戶如何使用鼠標箭頭來瀏覽菜單列表，其中也有詳細指導。

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

下面這個預輸入表單完成度更高，每個條目前還加了對應的小圖標：

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

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

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

同樣的，在菜單中也應該注意類似的問題。下面的案例來自Virgin Amarica，雖然視覺上設計得非常相似，但是右邊是一個標準的菜單欄，左側并非標準的下拉菜單。

下拉菜單作為標準的UI組件，通常是位用戶提供多種選擇的選擇列表。但是當我們如同左側來設計菜單欄的時候，壓根就沒必要加上下拉菜單。單純的上下鍵切換已經沒有太大意義，直接用鼠標操作，或者使用Tab鍵來切換才行。

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

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

其實這一原則主要是針對有行動障礙的用戶而設定的。對于那些擁有視力，但是只能使用鍵盤的用戶、使用Dragon NaturallySpeaking 這樣的語音識別工具的用戶。當他們與網頁進行互動的時候，所存在的問題就很實際了。這兩類用戶都能夠看清楚網頁，前者只能使用鍵盤，后者連鍵盤都沒法用，就更不用說鼠標了，點擊這種交互行為和他們無關。如果一個只能使用鍵盤的用戶沒法看到隱藏的按鈕，那么又如何能指望他們去激活屏幕上的按鈕呢？

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

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

“簡單的東西應該保持簡單，而復雜的問題應該有可能的解決方案。”

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

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

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

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

當我將鼠標移動到我的個人資料上的時候，會這樣：

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

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

當我懸停在某個可編輯字段上的時候，底色變為藍色，按鈕也添加一個深藍色的背景。

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

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

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

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

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

結語

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

成為交互設計師的必讀好文！

阿里巴巴資深交互設計師經驗！
《推薦！交互設計那些事兒（一）》

網易設計總監親歷分享！
《網易美女設計主管！交互設計菜鳥如何入門？》

交互設計師自學指南！
《交互設計師修煉指南！教你從零開始成為優秀交互設計師》

原文地址：medium
優設譯者：@陳子木

「子木說」

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

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

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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