編者按：不論是設(shè)計(jì)網(wǎng)頁(yè)還是 APP，在 UI設(shè)計(jì)的時(shí)候，確保產(chǎn)品的可訪問(wèn)性都是一件知易行難的事情。這種細(xì)節(jié)上的打磨優(yōu)化，邏輯上是沒(méi)有上限的，但是在保證基本的可訪問(wèn)性和可用性上，是有下限的。這篇來(lái)自資深設(shè)計(jì)師 Brianna Koch 的文章梳理總結(jié)了8個(gè)基本的可訪問(wèn)性優(yōu)化的方向和原則：

四年前，在我剛剛開(kāi)始倡導(dǎo)設(shè)計(jì)對(duì)用戶無(wú)障礙的網(wǎng)頁(yè)和產(chǎn)品的時(shí)候，碰到過(guò)很多障礙。我的很多同事和朋友都認(rèn)為，無(wú)障礙的、可訪問(wèn)性優(yōu)秀的設(shè)計(jì)，太過(guò)理想化。他們認(rèn)為，有時(shí)間去優(yōu)化產(chǎn)品的可訪問(wèn)性，不如花時(shí)間去挖掘用戶價(jià)值或者給企業(yè)增加收益，甚至認(rèn)為可訪問(wèn)性設(shè)計(jì)和這些是有直接沖突的。

我發(fā)現(xiàn)這種想法通常是源自于誤解，很多人會(huì)認(rèn)為進(jìn)行可訪問(wèn)性設(shè)計(jì)意味著構(gòu)建高級(jí)的、特定的功能，而實(shí)際上可訪問(wèn)性設(shè)計(jì)所需要的是，是在日常設(shè)計(jì)當(dāng)中，進(jìn)行合理的優(yōu)化就能做到。

這篇文章就幫你梳理8個(gè)常見(jiàn)的可訪問(wèn)性設(shè)計(jì)的設(shè)計(jì)原則和技巧。

小決策的大影響

很多UX/產(chǎn)品設(shè)計(jì)師每天的工作，是由一系列的小決定堆疊起來(lái)的，這些小決策最終能夠積累構(gòu)建起一個(gè)龐大的產(chǎn)品。但是很多小決策帶來(lái)的問(wèn)題積累到一起，就能形成巨大的障礙，從而擋住一些特定的用戶。

而我們要做的，就是在做特定決策時(shí)候，清楚哪里是坑，如何繞過(guò)去，換句話來(lái)說(shuō)，就是做對(duì)的小決策，提升用戶的可用性。

這些小問(wèn)題通常會(huì)影響到每個(gè)用戶，但是對(duì)于有身體、認(rèn)知有障礙的用戶，帶來(lái)的影響會(huì)更大。

做出正確的選擇

我整理了8條設(shè)計(jì)原則，它們會(huì)幫助我們?cè)诋a(chǎn)品的可訪問(wèn)性上，進(jìn)一步提升。用好它們，不僅能夠提升可訪問(wèn)性，還能影響整個(gè)產(chǎn)品的可用性。

W3C 的網(wǎng)站對(duì)于Web內(nèi)容的可用性設(shè)計(jì)有更加詳盡 的指南，而我所總結(jié)的 8 個(gè)原則則是一個(gè)更容易上手的起點(diǎn)。

接下來(lái)，我們具體來(lái)看看。

1、始終給用戶提供較大的目標(biāo)區(qū)域

如果給用戶設(shè)置的區(qū)域或者交互元素太小，也沒(méi)有提示觸發(fā)的懸停效果，整體的可訪問(wèn)性會(huì)差很多。

在大屏幕上使用光標(biāo)交互，通常需要精確的操作，如果目標(biāo)區(qū)域較小，也沒(méi)有懸停觸發(fā)一類(lèi)的交互來(lái)協(xié)助，那么對(duì)于有行動(dòng)障礙的用戶而言，會(huì)非常的麻煩，甚至是巨大的挑戰(zhàn)。

通過(guò)提供更大的目標(biāo)交互區(qū)域，可以更少依賴驚喜的操作來(lái)定位，可以更方便地同頁(yè)面元素交互。

每個(gè)人面對(duì)光標(biāo)和交互目標(biāo)的時(shí)候，或多或少都會(huì)高估或者低估自己交互操作的效率，只是絕大多數(shù)健全的用戶會(huì)在過(guò)程中快速地通過(guò)微調(diào)和校正，來(lái)盡可能快地達(dá)到交互目標(biāo)，而這種問(wèn)題在行為障礙和認(rèn)知障礙的用戶這邊，會(huì)被放大。通過(guò)擴(kuò)大交互元素和目標(biāo)，以及懸停的效果，我們可以讓用戶盡快抵達(dá)目標(biāo)元素，減少不確定性。這些改變可以讓每個(gè)人都更快，更自信，更準(zhǔn)確。

2、使用高對(duì)比度的色彩

根據(jù) W3C 的規(guī)定，高于 4.5 : 1 的色彩對(duì)比度，能夠帶來(lái)更清晰的輪廓，更加便于用戶分辨不同的元素和控件的邊界。確保色彩對(duì)比度正確的工具有很多，比如 WebAIM 這款色彩對(duì)比檢測(cè)工具。

視力較差、色盲、對(duì)比度敏感度較低的用戶在閱讀和查看低色彩對(duì)比度內(nèi)容的時(shí)候，會(huì)明顯感覺(jué)到更多的困難。提高對(duì)比度對(duì)于降低視覺(jué)疲勞有直接的效果。

3、不要只依靠色彩來(lái)表達(dá)含義

同樣的，只使用色彩來(lái)傳遞諸如「禁止」或者「完成」這樣的含義，在很多情況下會(huì)顯得不夠清晰，甚至對(duì)于特定用戶是直接無(wú)法識(shí)別的。

我們不能假設(shè)每個(gè)人都有足夠強(qiáng)烈清晰的色彩感知能力，你的用戶可能會(huì)是色弱，可能是色盲，可能是弱視，甚至可能完全失明，他們甚至有可能正在使用屏幕閱讀器來(lái)閱讀 UI 界面，這個(gè)時(shí)候，色彩是完全失效的。通過(guò)更加清晰的文本和符號(hào)，來(lái)協(xié)助色彩完成信息的傳達(dá)，甚至當(dāng)你去掉色彩的時(shí)候，UI 界面中的內(nèi)容和文本同樣能夠發(fā)揮作用，這個(gè)才是最重要的。

色彩是需要解釋的，顏色本身的含義是后天被賦予的，部分是被約定俗成的，但是并不是每個(gè)人都有足夠清晰的認(rèn)知，在不同的文化和場(chǎng)景當(dāng)中，甚至可能代表截然相反的含義。

所以，需要給色彩增加補(bǔ)充說(shuō)明，讓UI的信息傳達(dá)更加清晰直觀。

4、為鏈接和按鈕添加指引性更強(qiáng)的文本標(biāo)簽

按鈕和鏈接上對(duì)應(yīng)的文本不應(yīng)該是簡(jiǎn)單的是否、確定、取消，在很多語(yǔ)境之下，這些詞匯有多種理解方式，可能會(huì)帶來(lái)誤解。最理想的情況，是以更加明確的指向性，來(lái)幫助用戶了解按鈕實(shí)際的功能和指向性。

這樣可以解決一部分基本認(rèn)知的問(wèn)題。但是更重要的地方的地方在于，有明確指向性和描述性的文本，能夠讓使用屏幕閱讀器的視力障礙用戶不需要去猜測(cè)了。在鏈接處使用「單擊此處」，或者在按鈕上使用「完成」這樣的非描述性文本，對(duì)于這類(lèi)用戶而言，需要通過(guò)猜測(cè)才能明白它們的實(shí)際含義，太麻煩了。所以，修改鏈接文本和按鈕標(biāo)簽最核心的意義就在這里。

除此之外，按鈕和鏈接文本還要控制好色彩對(duì)比度，這樣確保用戶在快速掃讀的時(shí)候，能夠立刻馬上注意到它們。所以，提升可訪問(wèn)性的核心，就在于修改成描述性的文本，并且優(yōu)化它的色彩對(duì)比度。

5、使用有意義的標(biāo)題和結(jié)構(gòu)

對(duì)于用戶而言，長(zhǎng)篇大論的文本的閱讀性是有門(mén)檻的，而結(jié)構(gòu)化的文本在這方面就強(qiáng)了很多。

即使文本不多，分段清晰，帶有明確主題總結(jié)的小標(biāo)題總能讓用戶能夠立刻抓住段落的核心信息，不至于在閱讀走神的時(shí)候，找不到內(nèi)容。使用成體系的小標(biāo)題系統(tǒng)對(duì)于使用屏幕閱讀器的視力障礙用戶而言，也更加明確，讓他們能夠更加快速地定位到不同的內(nèi)容。同時(shí)，值得一提的是，想要更好契合屏幕閱讀器的使用，標(biāo)題和正文之間一定要通過(guò)不同的標(biāo)簽區(qū)分開(kāi)，這樣才會(huì)發(fā)揮作用。

同樣的，標(biāo)題除了具有總結(jié)性之外，最好也使用表述性的語(yǔ)句，方便用戶理解內(nèi)容的功能，保證標(biāo)題和內(nèi)容的相關(guān)度足夠高。

6、用占位符演示表單內(nèi)容

表單也是最為重要的界面組件之一。為了保持界面干凈整潔，使用占位符來(lái)描述表單內(nèi)容是一種常見(jiàn)的手段，目前，目前在很多設(shè)計(jì)當(dāng)中，都會(huì)使用簡(jiǎn)介的文本來(lái)標(biāo)識(shí)出來(lái)需要填寫(xiě)的內(nèi)容是什么，比如「電子郵件」，或者「電話號(hào)碼」，但是實(shí)際上，這些表單字段的填寫(xiě)方式是有詳細(xì)格式要求的。

當(dāng)用戶開(kāi)始輸入的時(shí)候，占位符消失，用戶可能會(huì)忘記應(yīng)該輸入什么內(nèi)容或者采用什么樣的樣式。而用戶在開(kāi)始輸入之前，可能僅僅使用了零點(diǎn)幾秒快速掃視了一下，壓根沒(méi)記下要填寫(xiě)的內(nèi)容。對(duì)于有閱讀障礙的用戶，可能一時(shí)半會(huì)都無(wú)法領(lǐng)會(huì)文本對(duì)應(yīng)的格式。

為了降低認(rèn)知負(fù)荷，最好是直接使用對(duì)應(yīng)的字段格式的占位符來(lái)直接展示給用戶，通過(guò)字段輸入框之外的確定的文本告知用戶具體輸入的字段是什么，這樣不管是在輸入之前，過(guò)程中，還是之后，都不會(huì)存在不清楚填寫(xiě)什么的問(wèn)題。

7、用清晰的報(bào)錯(cuò)指引來(lái)幫助用戶

在填寫(xiě)表單字段的時(shí)候，即使有引導(dǎo)和指示，用戶依然有相當(dāng)大的概率，會(huì)填寫(xiě)錯(cuò)誤，這個(gè)時(shí)候，報(bào)錯(cuò)的提示就顯得非常重要了。

不過(guò)在撰寫(xiě)用戶的報(bào)錯(cuò)提示的時(shí)候，依然有很多注意事項(xiàng)。用戶在填寫(xiě)表單的過(guò)程當(dāng)中，肯定還是會(huì)出錯(cuò)的，這個(gè)時(shí)候，首先，確保錯(cuò)誤提示的色彩對(duì)比度要足夠強(qiáng)，方便用戶能夠定位到。與此同時(shí)，還需要兼顧到有認(rèn)知障礙的用戶，用盡可能簡(jiǎn)單的用詞，來(lái)告訴用戶如何解決這些錯(cuò)誤，不用用戶去猜。

8、使用高對(duì)比度的焦點(diǎn)指示器

雖然絕大多數(shù)的用戶都會(huì)使用鼠標(biāo)和觸控板來(lái)進(jìn)行操控，但是依然會(huì)有一部分用戶習(xí)慣使用鍵盤(pán)來(lái)進(jìn)行操作。有的人是為了追求更快的操作，有的則是出于習(xí)慣。在進(jìn)行多字段的表單輸入的時(shí)候，使用鍵盤(pán) Tab 按鍵快速切換也確實(shí)比使用鼠標(biāo)交互來(lái)得更快。

而當(dāng)用戶使用鍵盤(pán)進(jìn)行快速切換的是，選中按鍵和輸入框的焦點(diǎn)指示器，需要使用盡可能清晰的色彩，只有這樣才能讓用戶清楚的知道到底選中了哪個(gè)控件，而不會(huì)感到疑惑或者覺(jué)得模糊不清。

結(jié)語(yǔ)

控制界面的可訪問(wèn)性能夠兼顧到更大范圍的用戶，對(duì)于產(chǎn)品本身有著更持久的價(jià)值。