對於可訪問性設計師必知的7件事(上)

 　　可訪問性(Accessibility)是用戶體驗設計中的重要一環，好的可訪問性設計可以讓各種用戶更容易浏覽和使用(電腦、手機、網頁、UI等等)，使得有障礙的用戶更便捷地感知、理解、互動。理想狀態下，設計師和開發者能充分設計，讓產品的可訪問性達到完美的境界，但是實際狀況下，即使添加了如此多的可訪問性設計，殘疾人和行動障礙者依然用不好手機、電腦等產品，甚至有些“設計”還會人為制造障礙。

　　今天，我們來探討一下可訪問性設計的一些基本原則吧。當我們在探討可訪問性設計之前，請確保你的產品至少是已經“被設計好了的”，也就是說它至少得符合《Web協會可訪問性指南設計規范2.0》和 《inSection 508》的基本要求，經過充分的開發和測試。

　　OK，我們開始進入主題了~

　　1、可訪問性設計並非創新的障礙

　　要讓產品可訪問性更好，並不是讓你做一個丑陋、沉悶而雜亂無章的產品。當你在設計的時候，現有的可訪問性設計規范或者“推薦規范”的引入，確實會提供一定的約束，但是它們本身並不只是一種限制，它還是你設計和探索的新方向，畢竟，你設計的最終目標是為用戶提供更好的產品——好用好看。

　　當我們在閱讀這些設計規范的時候，請務必記住，這些產品並不只是為我們的同行或者設計同好來設計的，它所涵蓋的用戶各不相同。

　　作為設計師的你，你可以為你的同行和同好設計出極具共鳴的產品，但是從更廣泛意義上來說，他們在你產品用戶的總量中，占據的比例並不高吧?

　　為那些真正同你的產品進行互動的各色用戶來設計吧。為每一個人設計。你的用戶可能是盲人，可能是色盲，視力不佳者，可能是聽力障礙者，可能是有行動障礙的老人，可能是有認知障礙的用戶。你的用戶可能很年輕，也可能很老，他們可能是普通用戶，也可能是重度依賴者，也可能是對於用戶體驗有極高要求的挑剔用戶。

　　擁抱可訪問性設計准則吧，如果你想創造一個令人驚艷的產品，那麼這是你的必經之路。


　　2、不要讓色彩成為你唯一的視覺傳達手段

　　視覺障礙者所存在的問題各不相同，色盲(男性1/12，女性1/200)、近視(1/30)以及失明(1/188)的用戶都會成為你的可訪問性設計所照顧的對象。

　　借助色彩來呈現高亮和互補是顯而易見的設計方法。

　　那麼你看看下面灰階的界面中，有幾項填錯了?很多人都會人為只有驗證碼填錯了，因為只有驗證碼的字段有個小三角形，者表明它是有問題的。接下來整屏的灰色也沒法讓你判斷出其他的問題。

　　但是當你看到彩色的界面的時候就知道，實際狀況並不是這樣。設計師使用紅色來標識錯誤的字段，四個字段其實都是錯的，對於色盲的用戶，這樣設計的可訪問性簡直是災難性的。實際上，你可以使用粗邊框、粗體文字提醒、下劃線、斜體來呈現錯誤狀態，而不止是色彩。

　　3、確保文字和背景有充分的對比

　　根據WCAG的規定，文本和所處的背景的對比度至少為4.5:1。這套規范主要是要確保弱視者、色盲看清楚屏幕上顯示的文字內容。這也就意味著，如果你的文字大小為24px，19px粗體的時候，文字的灰度最少也得是#959595.

　　#959595 字體在白色背景上的效果。

　　對於最小的字體，能用的灰色最低也得到#767676，如果你的背景本身就是灰色的，那麼文字的用色還得更沉才行。

　　#767676 字體在白色背景上的效果。

　　有個名為Color Safe的工具，能夠確保你的設計用色安全。而WebAIM’s Color Contrast Checker也能幫你進行色彩對比度的檢查，確保你選對了色彩。

　　LOGO和被禁用的元素則不受此標准約束。這裡面包括了處於禁用狀態的按鈕或者菜單選項。不過占位符或者幽靈按鈕的內容則依然在規定約束范疇內。

　　接下來的案例我們看的是著名博客平台Medium，例子中僅有“M” 這個Logo的對比度符合了標准，其他部分的灰度則很難讓人看清，更何況是視覺障礙者。

　　下一個案例是BBC的網站，他們使用不同的色彩來強化對比，很明顯他們的網站在對比度上做過很深的功課，因為他們的灰色最淺的用的就是#767676。

　　下面我還想說說Salesforce。很榮幸我能同Salesforce設計系統團隊一同工作，他們剛剛完成了Salesforce1移動客戶端的設計工作。

　　這個案例中很明顯，他們采用了高對比度的色彩組合。如果你沒有深入了解過他們，很難想象這些設計師對於高對比度的色彩組合有多麼執著的追求。不過我想你應該也已經明白控制對比度的好處，你的界面會更加優秀。

　　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樣式的時候，請務必確認已經移除了默認的樣式，否則兩者會重疊到一起。