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

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

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

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

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

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

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

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

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

?

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

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

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

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

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

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

根據(jù)WCAG的規(guī)定，文本和所處的背景的對(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)。不過(guò)占位符或者幽靈按鈕的內(nèi)容則依然在規(guī)定約束范疇內(nèi)。

接下來(lái)的案例我們看的是著名博客平臺(tái)Medium，例子中僅有“M” 這個(gè)Logo的對(duì)比度符合了標(biāo)準(zhǔn)，其他部分的灰度則很難讓人看清，更何況是視覺(jué)障礙者。

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

下面我還想說(shuō)說(shuō)Salesforce。很榮幸我能同Salesforce設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)一同工作，他們剛剛完成了Salesforce1移動(dòng)客戶(hù)端的設(shè)計(jì)工作。

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

成為交互設(shè)計(jì)師的必讀好文！

阿里巴巴資深交互設(shè)計(jì)師經(jīng)驗(yàn)！
《推薦！交互設(shè)計(jì)那些事兒（一）》

網(wǎng)易設(shè)計(jì)總監(jiān)親歷分享！
《網(wǎng)易美女設(shè)計(jì)主管！交互設(shè)計(jì)菜鳥(niǎo)如何入門(mén)？》

交互設(shè)計(jì)師自學(xué)指南！
《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》

原文地址：medium
優(yōu)設(shè)譯者：@陳子木

「子木說(shuō)」

就像我們之前在探討原型設(shè)計(jì)的時(shí)候碰到的問(wèn)題一樣，國(guó)內(nèi)許多設(shè)計(jì)團(tuán)隊(duì)壓根就沒(méi)經(jīng)歷過(guò)原型設(shè)計(jì)這個(gè)環(huán)節(jié)，線(xiàn)框圖出來(lái)直接上視覺(jué)稿。可訪問(wèn)性其實(shí)也是，許多時(shí)候壓根沒(méi)考慮這個(gè)問(wèn)題。也許做前端的同學(xué)多少還在可用性（Usability）、可訪問(wèn)性（Accessibility）和可維護(hù)性（Maintainability）三件事情上有所了解。

在《Web Content Accessibility Guidelines 1.0（Web內(nèi)容可訪問(wèn)性指南）》里，對(duì)可訪問(wèn)性的描述是：Web內(nèi)容對(duì)于殘障用戶(hù)的可閱讀和可理解性。同時(shí)指南里還特別指明：提高可訪問(wèn)性也能讓普通用戶(hù)更容易理解Web內(nèi)容。

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量94萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：