本文的作者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個問題是挑戰，也更是提升設計的契機，你能在尋找賞心悅目設計的同時，走向更加易用，讓更多的使用者流暢的用上你的産品，這是對的方向。