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

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

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

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

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

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

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

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

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

?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「子木說」

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

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

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(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"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量94萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(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)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：