【精選外文翻譯 第41彈】
作者簡介：Jesse Hausler，Salesfoce無障礙設計專家。旨在通過教育大家「通用設計」來實現為所有用戶而設計。
Salesforce是創建於1999年3月的一家客戶關係管理(CRM) 軟體服務提供商，總部設於美國舊金山，可按需提供客戶關係管理平臺。目前市值僅次於Netflix。
這次譯文較長，從7個方面講了無障礙設計（偏網頁和PC端），閱讀時間20min左右。關於APP端的無障礙設計見文末譯者的注釋。
原文中的例子有些比較適合英文展示，有些有點過時。譯者也會在翻譯時稍微做了些調整。那麼，正文開始啦。
「無障礙設計」的意義在於讓某些功能有障礙的人群也能夠感知、理解、瀏覽網絡，與網絡交互，作出他們的貢獻。
那麼，問題就來了。你所設計的產品有沒有做到在設計上做好無障礙的準備呢？如果你設計得不好，很可能會導致有障礙的人群在使用你的產品時遇到麻煩。
這篇文章將幫助你了解有關無障礙設計的主要知識，讓你的產品在設計上「準備就緒」，使你的產品在設計上滿足Section508和Web Content Accessibility Guidelines2.0中的最低標準。剩下的就依靠開發和測試了。
無障礙的七件事概述如下：
無障礙設計不是創新的阻礙
不要將顏色作為傳達信息的唯一手段
確保文本與其背景保持足夠的對比
提供輸入焦點的視覺提示
注意表單
避免組件識別障礙
不要讓用戶猶豫不決地找東西
「無障礙」並不是強迫設計師去做醜陋、無聊或者凌亂的產品。要求產品做到無障礙的確會引入一系列的設計限制條件。但是，這些設計限制條件會給你提供新的思路，為你的每一位用戶帶來更好的產品。
在你閱讀本文時，首先請記住，我們不是在為我們的設計同行而設計。
我們是在為使用我們產品的各類用戶而設計。
這可能包括盲人、色盲者、視覺障礙者、聾啞人或者聽覺障礙者、行動障礙者、認知障礙者，這些障礙可能是暫時的也可能是永久的。同時，我們要為年輕人、老年人、資深用戶或普通用戶而設計，使他們都能享受優質的體驗。
設計師們需要接受無障礙設計所帶來的限制，就像其他任何設計限制條件一樣。它們是創造產品的挑戰的一部分。
不將顏色作為傳達信息的唯一手段，這可以幫助有視覺障礙的用戶辨別顏色。視障用戶包含，色盲者（12個男性中有1個，200個女性中有1個），視力低下者（3個人中有1個）和盲人（188個人中有1個）。
使用顏色突出顯示或補充顯示那些已經很明顯的東西。
在下面的例子中，頁面以灰度顯示，你可以說出有哪些欄位是處在錯誤狀態的？
大多數人一眼能看出「驗證碼」欄位（最後一行「Code」）處在錯誤狀態。因為在驗證碼輸入框右邊有一個帶驚嘆號的三角形icon。這個符號通常表明有東西出差錯了。
現在，我們再來看看同樣的頁面。不過這次加上顏色。現在你可以看出有哪些欄位處在錯誤狀態嗎？
當頁面有顏色以後，我們可以看到其實四個輸入框全部出錯了（前面三行都用了紅色邊框）。這對於視障用戶來說，這個頁面沒有做到「無障礙」。
但是，有很多方法可以讓這個頁面做到視覺無障礙：將紅色三角形icon放在所有出錯欄位的後面；使用文本來提示和解釋為什麼這個輸入框有錯誤；使用提示框、粗文本、下劃線、斜體字體等等。方法很多，唯一要注意的就是不要只使用顏色。
小練習：
嘗試設計一下這個註冊表單頁面（記住顏色不是表明錯誤欄位的唯一視覺手段）。
根據WCAG，文本和文本背景之間的對比度至少保持在4.5:1。如果你使用的字體是24px或18px加粗，那這個比例為最小值—3:1。這個限制條件保障了低視力、色盲或視力惡化的用戶可以查看和閱讀屏幕上的文字。
譯者註：WCAG（Web內容無障礙指南）涵蓋範圍廣泛，提供了一些原則和建議。當根據WCAG來設計和開發時，可以使網站內容更易被有障礙的人士所接受。
換句話來說，當文本大小是24px或18px加粗或者更大時，在白色文本背景上使用的最淺的灰色是#959595。
上圖為#959595的文本在白色背景上
對於較小的文本，在白色背景上，可以使用的最淺的灰色是#767676。如果使用的是灰色背景，那麼文本的顏色就要更深。
上圖為#767676的文本在白色背景上
有一些工具可以幫助設計師找到合適的無障礙設計色板。比如，Color Safe和WebAIM顏色對比度檢查器。
譯者註：Color Safe（http://colorsafe.co/）根據你輸入的背景色，生成符合WCAG的字體顏色的可選色板。
WebAIM顏色對比度檢查器（https://webaim.org/resources/contrastchecker/）根據你輸入的字體顏色和背景顏色，檢查是否符合WCAG標準。
處在禁用狀態的元素不需要遵循這個規則。禁用狀態的元素指的是不可點擊的按鈕或菜單項。不過，輸入框的佔位符也需要遵循這個規則。
下面的例子是來自BBC官網。他們的UI通過了對比度規則，因為他們使用的最淺的灰色是#767676。
小練習：
練習使用高對比的顏色組合進行設計。（經過這項練習，你會驚訝地發現自己傾向於使用高對比色彩組合來設計。這並不會損害你的產品。）
重置樣式表（Reset Stylesheet）給現在的網頁設計師帶來了各種便利。沒有重置樣式表，在不同的設備和瀏覽器之間構建一致的體驗會很困難。
但是，就是因為重置樣式表，在網際網路上導致了大面積的無障礙設計缺陷。
:focus{outline:0;}
就是因為這一行CSS代碼使視覺障礙用戶幾乎沒辦法只通過一個鍵盤來訪問網站。幸運的是，最初的CSS重置發布以來，許多流行的重置已經更新，去除了:focus偽類的非樣式化。
取消默認焦點樣式的意圖很可貴：讓設計師和開發者使用無障礙的、適合網站樣式的東西來替代它們。IE瀏覽器自帶的灰色虛線邊框或是Chrome自帶的藍色光暈就不是很討人喜歡。
但是，問題是大多數網站都沒有建立自己的焦點樣式。這些焦點樣式是「鍵盤用戶」（只能使用鍵盤和網站交互的人）順利使用網站的基礎。
想體驗一下不能全方位提供視覺焦點的網站？你可以直接訪問Apple公司的官網—反覆按「tab」鍵在頁面中瀏覽。你能看到視覺焦點提示嗎？我想你應該看到了這個頁面上的一些連結但不是全部。考慮下這對「鍵盤用戶」的影響。
如果你使用的是Mac，你可以在「系統偏好設置」>「鍵盤」>「快捷鍵」下「全鍵盤控制」中選擇「所有控制」。
上圖相當於Mac電腦針對無障礙提供的功能，但是這需要網頁配合這一功能。
如果你選擇不使用瀏覽器的默認焦點，那麼請用「更好」的視覺提示替換掉瀏覽器所提供的。
下面的🌰來自BBC。它使用顏色條來提示哪個連結處於焦點狀態。
Twitter使用默認焦點和提示的組合方式來顯示焦點，圖標也從灰色變成綠色。這是三個獨立的視覺效果，可以很好地為鍵盤用戶提供焦點提示。
當你準備使用自己定義的焦點狀態時，請記得去除默認的狀態。（不然就會出現下圖的情況：Chrome自帶的藍色光圈和這個菜單的藍色矩形重疊了）
這可不是因為無障礙設計所引發的問題。
近年來，表單設計方面仿佛退化了。現在的表單仿佛拋棄了傳統表單的識別性和交互式功能，採用了所謂的「極簡主義」的設計方法。這麼做缺少了對無障礙設計非常重要的兩點：明確定義的邊界和可見標籤。
缺失一：沒有邊框的表格
下面是傳統的文本輸入的示例。它是一個具有定義邊界的矩形。表單輸入區域可以填充顏色（當然不一定要填充）。還有一個可見標籤，在這個例子裡位於欄位的左側。
一個基本的文本輸入框
明確定義的輸入框邊界對於有認知障礙的用戶非常重要。了解點擊目標的位置和大小對於使用標準或者自適應設備的人來說非常重要。具有認知障礙的用戶可能難以在沒有明顯視覺線索的情況下找到並和欄位發生交互。
下面是一個不好的🌰。
如果我要輸入搜索詞條，我要點哪裡呢？光標為了好看被去掉了。
答案揭曉，你需要點擊「search notes」才能激活輸入區域。（譯者註：感覺大家很容易誤以為是要點擊橫線上方的小字區域）
下面是另一個不好的例子。是某個博客發表文章的時候的界面，兩個輸入區域：一個標題，一個寫文章。那麼用戶需要點擊哪個區域來開始寫文章呢？
很可惜，這個網站也沒有做好。點擊藍色框（下圖）以外的區域都不能激活寫作區域。
所以，需要提供給到足夠的指示來告訴用戶在哪裡輸入。下面是一個好的例子，也是一個寫作的頁面。通過兩條平行的橫線，告訴用戶點擊這裡，輸入內容。
小練習：
可以嘗試優化下上面不好的兩個🌰。要設計一個記筆記的或者博客APP，你會怎麼做？
缺失二：沒有標籤的表格
「標籤」告訴用戶該欄位的用途。當焦點在輸入框內時，如今常見的用「佔位文本」來替代標籤是一種不太好的做法。佔位文本通常對比度不高。在下面的7個例子中，只有一個滿足上文第4點中提到的4.5:1的比例。
當佔位文本隨著輸入焦點消失後，沒有標籤的話，用戶還能知道輸入什麼內容嗎？是郵箱還是手機號（左邊的例子）？是我喜歡的食物還是餐廳（右上角的例子）？價格的最大值/最小值嗎（右下角的例子）？
對於右下角「Price」的例子，我做了一個優化方案。即使用戶填寫了內容，也始終有標籤提示用戶。
問：什麼時候菜單不再是菜單？
答：當它是非模態彈窗的時候。
很困惑的問題，對不對？這個問題也是當今最大的Web無障礙設計問題的核心。為了充分理解這一點，請參考W3C的設計模式指南（https://www.w3.org/TR/wai-aria-practices/#aria_ex）。（這份指南講了如何構建當今許多常見設計組件的無障礙版本，包括菜單、模態、搜索自動補全等）
譯者註：非模態對話框，用戶在打開此類對話框時，仍然可以操作其他窗口。
下面是一個搜索的自動補全的例子。
下面是類似的搜索自動補全，不過每個前面多了圖標。
這些是基本的搜索補全的UI模式。用戶輸入內容，基於輸入內容的一系列結果將顯示在下方。然後，用戶通過滑鼠或者鍵盤來從列表中選擇內容。
下面的例子則是一個容易讓人產生識別障礙的模式。用戶不僅可以從列表中篩選項目，還可以通過單擊鉛筆或垃圾桶圖標來編輯或刪除項目。加上這兩個圖標以後，搜索自動補全的UI模式變得難以識別了。
自動補全功能中添加了隱藏的按鈕，輔助功能無法識別
這會導致無障礙問題。部分原因是它打破了搜索自動補全的標準鍵盤模式。由於W3C尚未對這種模式形成規範，輔助功能無法識別這些添加的操作項。
菜單也有可能出現這樣的問題。在下面維珍航空的例子中，雖然視覺上非常相似，但是右邊的是菜單，左邊的是非模態對話框。
菜單是一個為用戶提供選擇列表的小組件。 一旦變成在菜單的每行提供多個選項，如上圖左邊的例子所示，這就不是菜單了。 鍵盤交互模型從使用箭頭鍵更改為使用Tab鍵。 它會更改鍵盤焦點的處理方式以及下拉菜單關閉後的位置。
與搜索的自動補全的例子不同，幸運的是，非模態對話框可以繼續通過箭頭鍵訪問。 了解它們之間的區別以及它對用戶體驗的影響。 設計師需要了解細微的設計更改如何導致用戶交互模型的更改。 這將使幫助你為你的產品選擇合適的模式。
這主要是為有運動障礙的人提供服務。這包括具有視覺功能但只能使用鍵盤的用戶，以及使用Dragon Naturally Speaking（譯者註：一款語音識別軟體）等語音識別工具與網頁進行交互的用戶（一般是視障用戶）。鍵盤用戶和Dragon等輔助技術依賴於屏幕上顯示的可操作項目。如果Dragon無法識別連結或按鈕，那它就無法說出「點擊」。如果只能使用鍵盤的用戶無法看到頁面上的按鈕，那麼他們也無法明白空白區域最後是會出現內容的。
以下是來自Gmail的Dragon Naturally Speaking屏幕截圖。Dragon使用後，會在網頁上疊加一層內容：在每個超連結上面出現數字標識。 用戶可以大聲說出一個數字，這樣就能激活一個連結。 如果是那種需要滑鼠懸停在上面才會出現的連結呢？應該告訴Dragon怎麼辦呢？ 應該做到在有連結的空白區域旁邊顯示數字。
下圖是領英的🌰。這是我個人主頁的截屏。
當我把滑鼠停留在個人簡歷卡片上的時候會變成下圖。
突然就有視覺指示告訴我可以單獨編輯此頁面上的許多欄位，包括我的姓名、職位、以及以前的工作、教育經歷，還有我的個人資料照片。再進一步，當我把滑鼠懸停在標題上時，文本會變為藍色，表示我已經可以點擊這一項了。
這種設計方式可能會導致無障礙的問題。下面是一種解決方案。在每塊輸入框後面放一個小鉛筆icon。這些icon不會消失。
當我把滑鼠懸停在某塊地方時，藍色出現了。
當我提出這種解決方法時，有的設計師會說，「感覺有點重了」。
也許從視覺上是有一點。但是它是無障礙設計的解決方案。此外，它只出現在用戶的個人資料頁面上。用戶並不會花很多時間在自己的領英個人資料頁面。為了顯得不是很「重」，我們就可以犧牲掉無障礙性嗎？當然，我們還要繼續考慮如果不用鉛筆icon的方法，我們還有什麼別的方案嗎？
下面是另一個Evernote的例子。這是筆記的列表視圖。當用戶的滑鼠懸停在一行時，會出現四個可操作的圖標。
在這個例子中，怎麼始終顯示四個圖標呢？一種方案就是，它們在白色背景上可以是綠色，在滑鼠懸停時顏色反過來。
這個解決方案也可能會被稱為「重」。但是，請記住，我們不是為設計師而設計。我們在為不同的用戶設計。他們有不同的需求，不同的技術認知程度，現在，他們都來到了計算機面前。
從表面上看，無障礙似乎在設計師運用組件、考慮滑鼠懸停狀態、視覺設計上會限制了創造力。但是其實，這些限制將幫助你突破你的創造力極限，令人愉悅的設計可以吸引更多類型的用戶。
通過恰當的方式，你會發現你的設計可以滿足你的boss、市場團隊、Dribbble粉絲，當然還有你的所有用戶（包括有障礙的用戶）的需求。
原文連結：https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b
最後讓我們再想一遍關於無障礙設計的七件事：
無障礙設計不是創新的阻礙
不要將顏色作為傳達信息的唯一手段
確保文本與其背景保持足夠的對比
提供輸入焦點的視覺提示
注意表單
避免組件識別障礙
不要讓用戶猶豫不決地找東西
譯者註：
這篇文章主要關注的是網頁或者說PC端的無障礙設計。那麼對於APP端的無障礙設計，我們做些什麼呢？這次我們先體驗一下APP端的無障礙設計可能會呈現的樣子。
首先，打開你的手機（此處用iPhone示例，android端的則可使用TalkBack）。打開設置-輔助功能-旁白，這個時候就變成一部可以供視障用戶使用的手機。
輕點一次觸發朗讀，輕點兩次激活所點項目
接著，閉上眼睛，根據提示聲音打開任意一款APP。如果根據提示能夠完成常見的操作，那麼說明這款APP對於無障礙是做了優化。（當然，並不是所有APP都有必要這麼做）
以上是某款外賣APP
你能順利下單嗎？我試了下很難。以後紫說會專門寫一篇關於APP端的無障礙設計。敬請期待～