超實用！9個目前流行的MATERIAL DESIGN前端框架

TP_funny發表於2015-04-22

可訪問性（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的對比度符合了標準，其他部分的灰度則很難讓人看清，更何況是視覺障礙者。