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

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

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

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

小決策的大影響

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

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

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

做出正確的選擇

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

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

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

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

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

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

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

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

2、使用高對比度的色彩

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7、用清晰的報錯指引來幫助用戶

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

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

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

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

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

結(jié)語

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