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

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

我發現這種想法通常是源自于誤解，很多人會認為進行可訪問性設計意味著構建高級的、特定的功能，而實際上可訪問性設計所需要的是，是在日常設計當中，進行合理的優化就能做到。

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

小決策的大影響

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

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

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

做出正確的選擇

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

W3C 的網站對于Web內容的可用性設計有更加詳盡 的指南，而我所總結的 8 個原則則是一個更容易上手的起點。

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

1、始終給用戶提供較大的目標區域

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

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

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

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

2、使用高對比度的色彩

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

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

3、不要只依靠色彩來表達含義

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

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

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

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

4、為鏈接和按鈕添加指引性更強的文本標簽

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

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

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

5、使用有意義的標題和結構

對于用戶而言，長篇大論的文本的閱讀性是有門檻的，而結構化的文本在這方面就強了很多。

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

同樣的，標題除了具有總結性之外，最好也使用表述性的語句，方便用戶理解內容的功能，保證標題和內容的相關度足夠高。

6、用占位符演示表單內容

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

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

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

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

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

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

8、使用高對比度的焦點指示器

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

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

結語

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