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

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

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

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

小決策的大影響

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

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

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

做出正確的選擇

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

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

接下來，我們具體來看看。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語

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