網(wǎng)站建設(shè)的可訪問性（Accessibility）是用戶體驗(yàn)設(shè)計(jì)中的重要一環(huán)，好的可訪問性設(shè)計(jì)可以讓各種用戶更容易瀏覽和使用（電腦、手機(jī)、網(wǎng)頁、UI等等），使得有障礙的用戶更便捷地感知、理解、互動(dòng)。理想狀態(tài)下，因此網(wǎng)站設(shè)計(jì)師和網(wǎng)站建設(shè)開發(fā)者能充分設(shè)計(jì)，讓產(chǎn)品的可訪問性達(dá)到完美的境界，但是實(shí)際狀況下，即使添加了如此多的可訪問性設(shè)計(jì)，殘疾人和行動(dòng)障礙者依然用不好手機(jī)、電腦等產(chǎn)品，甚至有些“網(wǎng)站設(shè)計(jì)”還會(huì)人為制造障礙。

 

今天，我們來探討一下可訪問性設(shè)計(jì)的一些基本原則吧。當(dāng)我們?cè)谔接懢W(wǎng)站制作可訪問性設(shè)計(jì)之前，請(qǐng)確保你的產(chǎn)品至少是已經(jīng)“被設(shè)計(jì)好了的”，也就是說它至少得符合《Web協(xié)會(huì)可訪問性指南設(shè)計(jì)規(guī)范2.0》和 《inSection 508》的基本要求，經(jīng)過充分的開發(fā)和測(cè)試。

 

OK，我們開始進(jìn)入主題了~

 

1、可訪問性設(shè)計(jì)并非創(chuàng)新的障礙：

 

要讓網(wǎng)站建設(shè)可訪問性更好，并不是讓你做一個(gè)丑陋、沉悶而雜亂無章的產(chǎn)品。當(dāng)你在設(shè)計(jì)的時(shí)候，現(xiàn)有的上海網(wǎng)站制作可訪問性設(shè)計(jì)規(guī)范或者“推薦規(guī)范”的引入，確實(shí)會(huì)提供一定的約束，但是它們本身并不只是一種限制，它還是你設(shè)計(jì)和探索的新方向，畢竟，你設(shè)計(jì)網(wǎng)站的最終目標(biāo)是為用戶提供更好的產(chǎn)品——好用好看。

當(dāng)我們?cè)陂喿x這些設(shè)計(jì)規(guī)范的時(shí)候，請(qǐng)務(wù)必記住，這些產(chǎn)品并不只是為我們的同行或者設(shè)計(jì)同好來設(shè)計(jì)的，它所涵蓋的用戶各不相同。

 

 

 

作為網(wǎng)站設(shè)計(jì)師的你，你可以為你的同行和同好設(shè)計(jì)出極具共鳴的產(chǎn)品，但是從更廣泛意義上來說，他們?cè)谀惝a(chǎn)品用戶的總量中，占據(jù)的比例并不高吧？

 

 

為那些真正同你的產(chǎn)品進(jìn)行互動(dòng)的各色用戶來設(shè)計(jì)吧。為每一個(gè)用戶網(wǎng)站設(shè)計(jì)。你的用戶可能是盲人，可能是色盲，視力不佳者，可能是聽力障礙者，可能是有行動(dòng)障礙的老人，可能是有認(rèn)知障礙的用戶。你的用戶可能很年輕，也可能很老，他們可能是普通用戶，也可能是重度依賴者，也可能是對(duì)于用戶體驗(yàn)有極高要求的挑剔用戶。

 

擁抱網(wǎng)站制作可訪問性設(shè)計(jì)準(zhǔn)則吧，如果你想創(chuàng)造一個(gè)令人驚艷的產(chǎn)品，那么這是你的必經(jīng)之路。

 

 

2、不要讓色彩成為你唯一的視覺傳達(dá)手段：

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

 

借助色彩來呈現(xiàn)高亮和互補(bǔ)是顯而易見的設(shè)計(jì)方法。

 

那么你看看下面灰階的界面中，有幾項(xiàng)填錯(cuò)了？很多人都會(huì)人為只有驗(yàn)證碼填錯(cuò)了，因?yàn)橹挥序?yàn)證碼的字段有個(gè)小三角形，者表明它是有問題的。接下來整屏的灰色也沒法讓你判斷出其他的問題。

 

但是當(dāng)你看到彩色的界面的時(shí)候就知道，實(shí)際狀況并不是這樣。設(shè)計(jì)師使用紅色來標(biāo)識(shí)錯(cuò)誤的字段，四個(gè)字段其實(shí)都是錯(cuò)的，對(duì)于色盲的用戶，這樣設(shè)計(jì)的可訪問性簡(jiǎn)直是災(zāi)難性的。實(shí)際上，你可以使用粗邊框、粗體文字提醒、下劃線、斜體來呈現(xiàn)錯(cuò)誤狀態(tài)，而不止是色彩。

 

 

3、確保文字和背景有充分的對(duì)比：

根據(jù)WCAG的規(guī)定，西安網(wǎng)站制作的文本和所處的背景的對(duì)比度至少為4.5:1。這套規(guī)范主要是要確保弱視者、色盲看清楚屏幕上顯示的文字內(nèi)容。這也就意味著，如果你的文字大小為24px，19px粗體的時(shí)候，文字的灰度最少也得是#959595.

 

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

 

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

 

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

 

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

 

LOGO和被禁用的元素則不受此標(biāo)準(zhǔn)約束。這里面包括了處于禁用狀態(tài)的按鈕或者菜單選項(xiàng)。不過占位符或者幽靈按鈕的內(nèi)容則依然在規(guī)定約束范疇內(nèi)。

 

接下來的案例我們看的是著名西安網(wǎng)站建設(shè)平臺(tái)：www.xazcit.com，例子中僅有“M” 這個(gè)Logo的對(duì)比度符合了標(biāo)準(zhǔn)，其他部分的灰度則很難讓人看清，更何況是視覺障礙者。

下一個(gè)案例是BBC的網(wǎng)站，他們使用不同的色彩來強(qiáng)化對(duì)比，很明顯他們的網(wǎng)站在對(duì)比度上做過很深的功課，因?yàn)樗麄兊幕疑顪\的用的就是#767676。

 

 

下面我還想說說上海網(wǎng)站制作。很榮幸我能在網(wǎng)站制作設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)一同工作，他們剛剛完成了Salesforce1移動(dòng)客戶端的設(shè)計(jì)工作。

 

 

 

這個(gè)案例中很明顯，他們采用了高對(duì)比度的色彩組合。如果你沒有深入了解過他們，很難想象這些上海網(wǎng)站制作、設(shè)計(jì)師對(duì)于高對(duì)比度的色彩組合有多么執(zhí)著的追求。不過我想你應(yīng)該也已經(jīng)明白控制對(duì)比度的好處，你的界面會(huì)更加優(yōu)秀。