對用戶需求越包容，用戶越能理解你的設(shè)計。接下來，讓我們一起認真研究可達性的幾個維度，它們能夠幫助你提升設(shè)計的合理性。

“可達性問題應(yīng)該在設(shè)計階段得到解決?！边@是Daniel Na和他的團隊在參加會議時反復(fù)聽到的一句話。設(shè)計可達性就意味著要滿足用戶的需求，這包括你的目標用戶、目標用戶群以外的用戶、殘障用戶甚至是一些來自不同文化和國家的用戶，而設(shè)計出良好體驗的關(guān)鍵就是了解這些群體的需求。

當(dāng)為可達性設(shè)計時，最常見的問題就是要知道用戶需求是什么，為什么而設(shè)計，這并不是為了篩選用戶，只是因為“我們不了解我們不知道的東西（譯者注：此處作者的意思應(yīng)為，我們無法為我們不了解的需求進行設(shè)計）”。所以，當(dāng)涉及到可達性時，有很多因素需要我們考慮。

我們?nèi)绾瘟私獗姸嗟挠脩粢约八麄兊男枨竽?？我們又如何保證他們的需求會在我們的設(shè)計中得到滿足呢？為了解決這些問題，采用一種從不同維度來評估設(shè)計關(guān)鍵性的分析方法是很有幫助的。

“當(dāng)你從許多不同的視角或維度來審視你的“設(shè)計”時，你就會發(fā)現(xiàn)優(yōu)秀的“可達性”設(shè)計?！薄猅he Art of Game Design: A Book of Lenses

維度（Lens）是一個過濾口很密的過濾器，通過它可以思考、審視某個話題。通常還被用于檢查藝術(shù)品、文學(xué)作品或電影，不同的維度要求我們留下我們的世界觀，而不是通過不同的環(huán)境來觀察世界。

例如，通過歷史維度欣賞藝術(shù)作品能夠讓我們了解當(dāng)時的社會、政治、經(jīng)濟、文化或智力情況。這會讓我們能夠更好地了解藝術(shù)家所處環(huán)境是如何影響他們的，以及如何塑造藝術(shù)作品和其所蘊含的時代特征。

可達性維度就像一個過濾器，我們可以用它來了解設(shè)計是如何影響用戶的需求。在貫穿整個設(shè)計過程中，每個維度所呈現(xiàn)出問題都會讓設(shè)計師再次思考自己的設(shè)計是否合理。通過運用這些維度，你將會更加包容你的用戶需求，為更多的人設(shè)計出更易于觸達的用戶體驗。

可達性的維度如下：

• 動效維度
• 音頻和視頻維度
• 色彩維度
• 控件維度
• 字體維度
• 圖像和圖標維度
• 鍵盤維度
• 布局維度
• 材料忠誠度維度
• 可讀性維度
• 結(jié)構(gòu)維度
• 時間維度

你應(yīng)該也能猜到，并非所有的維度都要應(yīng)用到每個設(shè)計中。雖然有些維度是可以應(yīng)用到所有的設(shè)計中，但其他的維度則有著一定的適用情景。某個設(shè)計中最有效的維度可能并不適用于另一個設(shè)計。

由每個維度提供的問題僅僅是用來幫助你理解可能引起問題的工具。與往常一樣，你應(yīng)該與用戶一起驗證你的設(shè)計，以確保你的設(shè)計是可用的、可觸達的。

一、動效維度

有效的動畫可以給頁面和品牌帶來生命感，引導(dǎo)用戶關(guān)注，并幫助定位用戶。但動效也是一把雙刃劍，濫用動效不僅會帶來混亂或分散注意力，而且對某些用戶來說這可能是致命的。

快速閃爍的效果（定義為閃爍超過三秒）或高強度的效果和模式可能引起癲癇發(fā)作，被稱為“光敏性癲癇”。光敏性還可引起頭痛、惡心和頭暈等癥狀?；加泄饷粜园d癇癥的用戶在使用網(wǎng)絡(luò)時必須非常小心，因為他們不知道什么時候可能會導(dǎo)致癲癇發(fā)作。

其它影響（如視差或運動果）可能會導(dǎo)致某些用戶因前庭敏感而感到頭暈或經(jīng)受眩暈。前庭系統(tǒng)控制著人的平衡和運動感。當(dāng)這個系統(tǒng)不能正常工作時，就會引起頭暈和惡心等癥狀。

“設(shè)想這樣一個世界，你的內(nèi)部陀螺儀不正常地工作。非常類似于陶醉，事情似乎是自己動起來的，你的腳似乎永遠不會穩(wěn)定在你的下方，你的感覺比你的身體移動得更快或更慢?！薄狝 Primer To Vestibular Disorders

持續(xù)的動效或動畫也會分散用戶的注意力，尤其是對于那些難以集中注意力的用戶。GIF動畫就是典型案例，因為我們的視覺中心會被運動的物體所吸引，所以很容易被不斷更新或移動的東西分散注意力。

這并不是說動效很糟糕，所以你不應(yīng)該使用它。相反，你應(yīng)該要明白為什么要使用動效以及如何去設(shè)計更安全的動效。一般來說，你應(yīng)該嘗試設(shè)計那些短距離，適應(yīng)其它移動對象的方向和速度（包括滾動），并且屏幕尺寸相對較小的動效。

你還應(yīng)提供控件或選項以迎合用戶的個性化體驗。例如，Slack可讓你隱藏動畫圖像或表情符號作為全局設(shè)置和每個圖像的基礎(chǔ)。

要使用動效，需要注意以下問題：

• 是否有可能導(dǎo)致癲癇發(fā)作？
• 是否有任何動作或效果可能會通過運動引起頭暈或眩暈？
• 是否有任何動畫可能會通過不斷移動、閃爍或自動更新而分散注意力？
• 是否可以提供一些控件或選項來停止、暫停、隱藏或者更改任何動畫或效果的頻率？

二、音頻和視頻維度

視頻、音頻的自動播放功能有時可能非常煩人。它們不僅破壞了用戶的注意力，而且還會逼得用戶主動去搜尋那些有問題的媒體文件并將其靜音或關(guān)閉。作為一般通用原則，請不要在設(shè)計中添加一些自動播放的視頻、音頻等媒體文件。

“謹慎地使用自動播放的設(shè)計。雖然自動播放可能是一款功能強大的參與工具，但如果播放了用戶不想聽的聲音，會使用戶剛到煩躁；或者播放了一些不需要的視頻回放，會讓用戶感到不必要的資源使用（例如數(shù)據(jù)、電量）。” ——Google Autoplay guidelines

你現(xiàn)在可能會問：“如果我在后臺自動播放視頻但保持靜音，會怎么樣？”雖然在當(dāng)今的網(wǎng)頁設(shè)計中使用視頻作為背景可能是一個日益增長的趨勢；但背景視頻遇到了與GIF動畫和連續(xù)移動動效相同的問題：可能會分散注意力。因此，你應(yīng)該提供控件或選項來暫停或禁用視頻。

除了控件之外，視頻還應(yīng)具有文本記錄或者字幕，以便用戶可以采用最適合他們的方式瀏覽內(nèi)容。那些視覺受損或?qū)幵搁喿x也不觀看視頻的用戶需要一個文本記錄，同時那些視聽障礙的用戶或著那些不想聽視頻的用戶也需要字幕。

要使用音頻和視頻，需要注意以下問題：

• 是否有被自動播放的音頻或視頻所困擾？
• 是否可以提供控件來停止、暫?；螂[藏自動播放的音頻或視頻？
• 視頻是否有文本或字幕？

三、色彩維度

色彩在設(shè)計中起著重要的作用。色彩能夠喚起情緒、感覺和想法。色彩還可以用來增強品牌信息和品牌感知。然而，當(dāng)用戶看不到它們或以不同的方式感知它們時，色彩的力量就會消失。

綠色盲很常見，導(dǎo)致紅色呈現(xiàn)棕色/黃色，綠色呈現(xiàn)米色。紅色盲很少見，導(dǎo)致紅色顯示為深色/黑色，橙色/綠色顯示為黃色。 藍黃色色盲是非常罕見的，藍色的情況下看起來更綠色/藍綠色，黃色看起來是紫色/灰色。

色彩含義對于國際用戶來說也是存在問題的。因為色彩在不同國家和文化中代表著不同的事物。 在西方文化里，紅色通常用于表示消極趨勢，而綠色表示積極趨勢，但在東方和亞洲文化中卻相反。

由于色彩及其含義可能因文化差異或色盲而顯得沒有意義，所以你應(yīng)該增加一些無色標識符。標識符（如圖標或文字說明）可以幫助彌補文化差異，而圖案可以很好地用來區(qū)分顏色。

Trello的色盲友好標簽使用不同的圖案來區(qū)分顏色。

對于某些用戶來說，飽和的顏色、高對比度的顏色，甚至只是黃色都會讓人感到不舒服和不安，突出表現(xiàn)在自閉癥譜系上。所以在設(shè)計時最好避免高濃度類型的顏色，以幫助用戶保持舒適。

前景色和背景色之間的對比度差使得視力較差的用戶、使用低端顯示器的用戶或者剛好在陽光直射下的用戶更難看到。對于使用鍵盤的用戶來說，所有文本、圖標和任何焦點指示符應(yīng)滿足背景顏色的最小對比度4.5：1。

你還應(yīng)確保設(shè)計和色彩在Windows高對比度模式的不同設(shè)置中正常工作。常見的問題就是文本在某些高對比度模式背景下變得不可見。

要使用色彩，需要注意以下問題：

• 如果顏色從設(shè)計中刪除，會失去什么含義？
• 如何在不使用顏色的情況下表達含義？
• 顏色是否過飽和或具有高對比度，這些都可能導(dǎo)致用戶過度刺激或不舒服？

所有文字、圖標和聚焦指示的前景和背景顏色是否符合4.5：1的對比度指標？

四、控件維度

控件也被稱為“交互式內(nèi)容”，是用戶可以與之交互的任何UI元素，可以是按鈕、鏈接、輸入或任何帶有事件監(jiān)聽器的HTML元素?？丶』蛱拷赡軙o用戶帶來很多問題。

對于無法用指尖精確定位的用戶（如那些有顫抖疾病的用戶），或因年齡而導(dǎo)致靈活性降低的用戶，會很難點擊小控件。例如，復(fù)選框和單選按鈕的默認大小可能會給老年用戶帶來問題。即使提供可以點擊的標簽，也并非所有用戶都知道他們可以這樣做。

太靠近的控件可能會給使用觸摸屏的用戶帶來問題。手指大而難以準確點擊。意外觸摸錯誤的控件可能會導(dǎo)致挫敗感，特別是如果該控件導(dǎo)航你離開或讓您失去上下文。

當(dāng)觸摸單行推文時，很容易意外地點擊該人的姓名或句柄，而不是打開推文，因為他們之間沒有足夠的空間

嵌套在另一個控件內(nèi)的控件也可能導(dǎo)致誤觸。它不僅在HTML規(guī)范中不允許使用，而且它還會容易地選擇父級控件而不是你想要選擇的控件。

為了給用戶足夠的間距來準確選擇控件，建議控件的最小尺寸為34×34像素，但是Google建議至少48×48像素，而WCAG規(guī)范建議至少44×44像素。此大小還包括控件所具有的任何填充。所以一個控件可以在視覺上是24 x 24像素，但是在所有邊上都會有一個額外的10像素的填充將會使它達到44×44像素。

同時還建議控件之間的空間足夠遠以減少誤觸。微軟建議至少有8個像素的間距，而谷歌推薦的控件至少間隔32個像素。

控件還應(yīng)該有一個可見的文本標簽。屏幕閱讀器不僅需要文本標簽來知道這個控件的功能，而且顯示文本標簽可以幫助用戶更好地理解控件的用途。這對于表單輸入和圖標來說尤其重要。

要使用控件，需要關(guān)注以下問題：

• 是否有的控件讓一些用戶觸摸起來覺得不夠大？
• 是否有控件太過于靠近，以至于很容易碰到錯誤的控件？
• 是否有的控件嵌套在另一個控件中或可點擊區(qū)域內(nèi)？
• 是否所有的控件都有可見的文本標簽？

五、布局維度

在網(wǎng)絡(luò)早期時，我們設(shè)計了字體大小在9-14像素之間的網(wǎng)頁。由于顯示器具有相對已知的屏幕尺寸，因此當(dāng)時顯示效果都很好。我們設(shè)計思考點是瀏覽器窗口是一個常量，這是無法改變的。

今天的技術(shù)已經(jīng)與20年前截然不同了。如今，瀏覽器可以在任何尺寸設(shè)備上使用，從小型手表到巨大的4K屏幕。我們不能再使用固定字體大小來設(shè)計我們的網(wǎng)站。字體大小必須與設(shè)計本身一樣具有響應(yīng)性。

字體大小不僅應(yīng)該具有響應(yīng)性，而且設(shè)計得應(yīng)該足夠靈活，可以允許用戶自定義字體大小、行高或字母間距以達到舒適的閱讀水平。許多用戶使用自定義CSS來幫助他們獲得更好的閱讀體驗。

字體本身就應(yīng)該便于閱讀的。你可能想知道一種字體是否比另一種字體更便于閱讀。而事實真相就是字體對可讀性沒有真正的影響。相反，它的字體風(fēng)格在字體可讀性中卻起著非常重要的作用。

對于許多用戶來說，裝飾字體或草書字體的樣式是很難閱讀的，這對于患有閱讀障礙的用戶來說就更是個大問題。小字體、斜體文本和全部大寫文本對用戶來說都是很難的?？偟膩碚f，較大的文字、較短的線條長度、較高的線條高度和增大的字母間距可以幫助用戶獲得更好的閱讀體驗。

要使用字體，需要關(guān)注以下問題：

• 設(shè)計是否足夠靈活，可以讓用戶自行修改字體為舒適的閱讀狀態(tài)？
• 字體樣式是否容易閱讀？

六、圖片和圖標維度

他們說，“一張圖片勝過千言萬語?！比欢?，一張你看不到的圖片卻是無言的，對吧？圖像在設(shè)計中可用于來傳達特定的意義或感覺。有時它們可用于簡化復(fù)雜的想法。無論什么樣的圖像，使用屏幕閱讀器的用戶都需要知道圖像的含義。

作為設(shè)計師，是最能理解圖像所要傳達的意義或信息。因此，你應(yīng)該使用這些信息對設(shè)計進行闡釋，以便后期不會遺漏或誤解，這將用于為圖像創(chuàng)建可替代的文本。

“你幾乎不會去描述圖片的樣子，而你會解釋圖片所包含的信息?！薄狥ive Golden Rules for Compliant Alt Text

既然知道描述圖像是一件很困難的事情，那么在做決策時，有個方便的決策樹是很有幫助的。 一般來說，如果這個圖像是裝飾性的或者已經(jīng)有描述圖像信息的文本，就不需要進一步的信息說明。否則的話，你應(yīng)該描述圖像的信息。如果圖像包含文本，也請重復(fù)描述中的文本。

描述應(yīng)該簡潔。建議不超過兩個句子，而盡可能使用一個簡潔的句子。這可以讓用戶快速地理解圖像而無需聽取冗長的描述。

舉個例子，如果你打算要對屏幕閱讀器描述這個圖像，你會說什么？

由于我們描述的是圖像所傳達的信息而不是圖像本身，因此描述的內(nèi)容可能是梵高的“星夜”，而沒有其他相關(guān)內(nèi)容的描述。你不應(yīng)該僅放一些繪畫的風(fēng)格或圖片的樣子的描述。

如果圖像包含的信息需要冗長的描述，你不應(yīng)將該描述放在關(guān)鍵信息中（例如復(fù)雜的圖表）。 相反，你應(yīng)該使用關(guān)鍵文字的簡短描述作為標題，然后給一個詳細描述的內(nèi)容或指向其他頁面的鏈接。

這樣，用戶仍然可以快速獲取最重要的信息，當(dāng)然如果他們愿意，還可以進一步挖掘。如果圖像是一張圖表，你應(yīng)該重復(fù)圖表的數(shù)據(jù)，就像對圖像中的文本重復(fù)一樣。

如果你正在設(shè)計的平臺允許用戶上傳圖像，你應(yīng)該為用戶提供一種方式來輸入關(guān)鍵信息以及圖像。例如，Twitter允許用戶在將圖片上傳到推文時可寫下關(guān)鍵信息。

要使用圖像和圖標，需要關(guān)注以下問題：

• 任何圖像包含的信息在看不到的情況下會丟失嗎？
• 我如何以非視覺方式提供信息？
• 如果圖像是由用戶控制的，是否可以提供一種方法讓他們輸入關(guān)鍵信息描述？

七、鍵盤維度

鍵盤可達性是可達性設(shè)計中最重要的一個方面，但也是最容易被忽視的一個。

用戶喜用鍵盤而不是鼠標的原因有很多。有一些使用屏幕閱讀器的用戶經(jīng)常使用鍵盤來閱讀網(wǎng)頁，也有一些顫抖癥狀的用戶使用鍵盤，因為它提供了比鼠標更好的準確性。甚至一些高級用戶也會使用鍵盤，因為它更快、更高效。

使用鍵盤的用戶通常會使用Tab鍵按順序操控著每個控件。Tab鍵的邏輯順序很大程度上幫助用戶知道了下一個按鍵將在何處進行。在西方文化中，這通常是從左到右，從上到下的順序。但意外的Tab操作指令也會導(dǎo)致用戶迷失，用戶會瘋狂的掃描網(wǎng)頁來尋找焦點所在的位置。

有序的Tab鍵操作還意味著它們必須能夠觸達用戶完成任務(wù)之前所需的控件。如果用戶完成任務(wù)需要點擊數(shù)十次或數(shù)百次的控件命令，這對于用戶來說可能是個真正的痛點。

通過將最重要的用戶流程貼近Tab鍵頂部的方式，我們可以幫助用戶更好地提高操作效率。然而，這種方式并不總是有效的。在這些情況下，提供快速跳轉(zhuǎn)到特定流程或內(nèi)容的方法可能使它們更高效。這就是為什么“跳到內(nèi)容”鏈接的存在意義。

一個很好的案例就是Facebook，它提供了一個鍵盤導(dǎo)航菜單，通過這個菜單用戶可以跳轉(zhuǎn)到網(wǎng)站的特定模塊，這極大地提升了用戶與他們想要的頁面和內(nèi)容的交互的效率。

Facebook為所有鍵盤用戶提供了一種跳轉(zhuǎn)到頁面特定模塊或其他頁面的方式，以及一個“輔助功能幫助”的菜單。

在設(shè)計Tab鍵交互時，焦點狀態(tài)應(yīng)該始終可見，否則用戶很容易迷失。就像意外的Tab鍵操作一樣，沒有良好的焦點指示會導(dǎo)致用戶不知道當(dāng)前所處的狀態(tài)，需要到處瀏覽頁面來尋找焦點。

更改默認焦點指示的樣式有時可以改善用戶體驗。一個好的焦點指示不僅依靠顏色來指示焦點（參考顏色維度），而且還應(yīng)該足夠清晰，以便用戶能夠輕松找到它。例如，周圍有著藍色按鈕的處于焦點狀態(tài)的藍色線框就會在視覺上不夠明顯，而導(dǎo)致其很難辨識。

雖然該維度側(cè)重于鍵盤可達性，但要注意到它適用于沒有鼠標的用戶，為他們提供一種與網(wǎng)站交互的方式。

用戶可以在沒有鼠標的情況下與網(wǎng)站交互的任何方式。諸如開關(guān)按鈕、sip-puff按鈕以及眼動追蹤軟件之類的設(shè)備都要求頁面可以通過鍵盤進行操作。

通過改進鍵盤可達性，你可以讓更多用戶更好地訪問你的網(wǎng)站。

使用鍵盤，需要注意以下問題：

• 什么樣的鍵盤導(dǎo)航順序?qū)υO(shè)計是最有意義的？
• 一個鍵盤用戶如何以最快的方式獲得他們想要的東西？
• 焦點指示是否始終可見且視覺上明顯不同？

八、布局維度

布局對網(wǎng)站的可用性有很大的幫助。一個好的布局可以很輕松地查找到有用的內(nèi)容，一個好布局應(yīng)該為用戶提供有意義的邏輯順序。

隨著CSS 網(wǎng)格的出現(xiàn)，能夠根據(jù)可用空間改變布局使其變得更有意義，這比以前更容易實現(xiàn)。但是，更改可視的頁面布局會給那些依賴頁面結(jié)構(gòu)布局的老用戶帶來新的問題。

結(jié)構(gòu)布局是屏幕閱讀器和使用鍵盤的用戶使用的。當(dāng)可視的頁面布局發(fā)生變化時（底層結(jié)構(gòu)布局未變），這些用戶可能會因為其Tab鍵順序不合邏輯而感到困惑。如果必須更改可視的頁面布局，則應(yīng)通過更改結(jié)構(gòu)布局來執(zhí)行此操作，以便使用鍵盤的用戶保持有序的、有邏輯的Tab操作。

布局應(yīng)該是可調(diào)整大小的，在沒有水平滾動條的情況下，靈活度至少320像素，以便在手機上可以輕松查看。對于需要增加字體大小來獲得更好閱讀體驗的用戶，布局也應(yīng)該足夠靈活，可以放大到400％（也沒有水平滾動條）。

當(dāng)相關(guān)內(nèi)容彼此非常接近時，使用屏幕放大鏡的用戶將會受益。屏幕放大鏡僅向用戶提供整個布局的小視圖，因此很難找到較遠或
遠離交互發(fā)生位置，因而忽略這些位置的內(nèi)容。

在CodePen上執(zhí)行頁面的右上角的搜索時。單擊該按鈕可在屏幕的另一側(cè)顯示大量搜索輸入。 使用屏幕放大鏡的用戶將難以注意到這些更改，還以為該按鈕不起作用。

使用布局，需要注意以下問題：

• 布局是否有意義有邏輯順序？
• 當(dāng)在小屏幕上觀看或放大到400%時，布局會發(fā)生什么？
• 由于用戶互動而相互關(guān)聯(lián)或變化的內(nèi)容是否非常接近？

九、材料忠誠度維度

材料忠誠度是一種建筑設(shè)計價值度量，用來表明材料本身是實在的，不能用作替代另一種材料。這意味著混凝土應(yīng)該看起來像混凝土，而不是被涂漆或雕刻成看起來像磚。

材料忠誠度是衡量每種材料的獨特屬性和特征的屬性。遵循材料忠誠度的建筑師知道何時使用哪種材料以及如何使用它而不會使其失去光澤。

盡管如此，材料忠誠度并不是一個硬性規(guī)則。它是一個連續(xù)統(tǒng)一體，與所有值一樣，你可以在理解它們的前提下將它們分解。俗話說，它們更多的是你所說的指導(dǎo)方針而不是實際的規(guī)則。

當(dāng)應(yīng)用在網(wǎng)頁設(shè)計時，材料忠誠度意味著一個頁面元素或組件不應(yīng)該看起來、操作起來或發(fā)揮作用時像其他的元素或組件。這樣做會欺騙用戶，并可能導(dǎo)致困惑。一個常見的例子是看起來像按鈕的鏈接或像鏈接的按鈕。

鏈接和按鈕具有不同的行為和可供性。使用回車鍵激活鏈接，通常會將您帶到另一個頁面，并在右鍵單擊時顯示特殊的上下文菜單。使用空格鍵激活按鈕，主要用于觸發(fā)當(dāng)前頁面上的交互，并且沒有此類上下文菜單。

當(dāng)鏈接的樣式看起來像一個按鈕或反之，用戶可能會感到困惑，因為它并沒有表現(xiàn)且看起來很有效。如果這個“按鈕”意外地導(dǎo)致用戶離開，且在這過程中丟失了數(shù)據(jù)，他們很可能變得非常沮喪。

“乍一看，一切看起來都很好，但經(jīng)不起驗證。 一旦這樣的網(wǎng)站在各種瀏覽器中進行壓力測試時，其將會面臨崩潰的風(fēng)險?！?—— Resilient Web Design

這最大的問題就在于當(dāng)鏈接和按鈕的樣式相同并且彼此相鄰放置時，由于沒有什么可以區(qū)分這兩者，網(wǎng)站會出乎用戶意料之外引導(dǎo)他們。

你能分辨出哪一個會讓你跳出該頁面，哪個不會？

當(dāng)一個組件的行為與預(yù)期不同時，對使用鍵盤或屏幕閱讀器的用戶來說，這很容易會導(dǎo)致出現(xiàn)問題。所能舉出的不只是一個自動完成菜單的案例。

自動完成是用于提示或預(yù)測用戶正在鍵入的單詞的其余部分。自動生成菜單允許用戶在不能顯示所有選項時從大量選項中進行選擇。

自動生成菜單通常附加到輸入字段，并使用向上和向下箭頭鍵進行導(dǎo)航，將焦點保持在輸入字段內(nèi)。當(dāng)用戶從列表中選擇一個選項時，該選項將覆蓋輸入字段中的文本。自動生成菜單僅是包含文本的列表。

當(dāng)自動生成菜單開始獲得更多行為時，問題也會隨之出現(xiàn)。你不僅可以從列表中選擇一個選項，還可以對其進行編輯、刪除，甚至展開或折疊部分。自動生成菜單不再僅僅是可選文本的簡單列表。

通過添加編輯、刪除和配置文件按鈕，此自動生成菜單實際上是材料不忠誠的。

添加的行為不再意味著你可以使用向上和向下箭頭選擇。現(xiàn)在每個選項都有多個操作，因此用戶需要能夠遍歷兩個維度而不是一個維度。這意味著使用鍵盤的用戶可能會對如何操作組件感到不解。

屏幕閱讀器受這種行為改變的影響最大，因為沒有簡單的方法可以幫助他們理解它。需要進行大量的工作以確保屏幕閱讀器可以使用非標準方式訪問菜單。

因此，它可能會導(dǎo)致他們會有較差或不適當(dāng)?shù)捏w驗。

為了避免這些問題，最好對用戶和設(shè)計誠實，而不是組合兩個不同的行為（自動生成菜單的編輯和刪除功能），將它們留作兩個單獨的行為。使用自動生成菜單只是自動填充用戶的名稱，并使用不同的組件或頁面來編輯和刪除用戶。

使用材料忠誠度，需要注意以下問題：

• 設(shè)計對于用戶是實在的？
• 是否有頁面元素看起來、表現(xiàn)起來、操作起來像其他元素？
• 是否有任何組件將不同的行為組合到一個組件中？這樣做會使組件實質(zhì)上不誠實嗎？

十、可讀性

你有沒有讀過一本書，在只讀幾段或幾頁內(nèi)容后就想著放棄，因為文章太難讀了，因為那些很難讀懂的內(nèi)容會讓人在精神上感到疲憊。

句子長短、段落長短和語言的復(fù)雜性都會影響文本的可讀性。復(fù)雜的語言會給使用者帶來問題，尤其是那些有認知障礙，或者那些語言不流利的用戶。

除了使用簡單明了的語言之外，你還應(yīng)該確保每個段落都集中于單一的思想上。只有單一想法的段落更容易讓用戶記住和消化。同樣的道理也適用于字數(shù)較少的句子。

內(nèi)容可讀性的另一個因素就是一行文字的長度。理想的一行長度通常在45—75個字符之間。太長會導(dǎo)致用戶注意力不集中，很難正確地移動到下一行，而太短則會導(dǎo)致用戶頻繁地跳轉(zhuǎn)導(dǎo)致眼睛疲勞。

“在跳到下一行時，人的潛意識里是會充滿活力的。在每一個新行的開頭，讀者都會關(guān)注的，但這一焦點隨著整行文字的閱讀逐漸消失”—— Typographie: A Manual of Design

你還應(yīng)該使用標題、表格或圖像來分解內(nèi)容，以便為讀者提供心理上的休息時間，同時支持不同的學(xué)習(xí)方式。使用標題能夠系統(tǒng)的對信息進行分組和匯總。標題、鏈接、控件和標簽應(yīng)清晰且具有描述性，以增強用戶理解的能力。

使用閱讀性，請注意以下內(nèi)容：

• 語言是否簡單明了？
• 每個段落都集中在一個中心思想上嗎？
• 是否有任何長段落或長段不間斷的文字？
• 所有標題、鏈接、控件和標簽是否清晰且具有描述性？

十一、結(jié)構(gòu)維度

正如布局維度中所述，結(jié)構(gòu)布局是屏幕閱讀者和使用鍵盤的用戶所使用的。雖然頁面布局側(cè)重于視覺布局，但頁面結(jié)構(gòu)側(cè)重于結(jié)構(gòu)布局，或設(shè)計中底層的HTML和語義。

作為設(shè)計師，你可能無法編寫設(shè)計的結(jié)構(gòu)布局。但這不應(yīng)該阻止你考慮如何構(gòu)建你的設(shè)計。否則，你的設(shè)計可能會導(dǎo)致屏幕閱讀器無法訪問。

如下案例，一個錦標賽賽事晉級的設(shè)計：

你如何知道使用屏幕閱讀者的用戶是否可以訪問此設(shè)計呢？如果不理解結(jié)構(gòu)和語義，你可能不會知道。就目前而言，該設(shè)計可能會導(dǎo)致使用屏幕閱讀者的用戶無法訪問。

要理解為什么，我們首先必須了解屏幕閱讀者是按順序閱讀頁面及其內(nèi)容。這意味著將會讀取錦標賽第一列中的每個名稱，然后是第二列中的所有名稱，接著第三列，直至最后一個。

“George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger.”

如果你只有一個看似隨意的名字列表，你如何解釋這項錦標賽的結(jié)果呢？你能說誰贏了比賽嗎？或者誰贏了第6場比賽？

如沒有其他工作可做，使用屏幕閱讀者的用戶可能會對結(jié)果感到有些困惑。為了能夠理解視覺設(shè)計，我們必須為用戶提供結(jié)構(gòu)設(shè)計方面更多信息。

這意味著作為設(shè)計師，你需要了解屏幕閱讀者如何與頁面上的HTML元素進行交互，以便你知道如何提升其體驗。

標志性元素（頁眉、導(dǎo)航、主頁和頁腳）

允許屏幕閱讀者跳轉(zhuǎn)到設(shè)計中的重要部分：

• 標題（h1（一級標題）→h6（六級標題））

允許屏幕閱讀者掃描頁面并獲得上一層級的大致內(nèi)容。屏幕閱讀者也可以跳轉(zhuǎn)到任何標題。

• 列表（ul和ol）

將相關(guān)項目組合在一起，并允許屏幕閱讀者輕松地從一個項目跳轉(zhuǎn)到另一個項目。

• 按鈕

觸發(fā)當(dāng)前頁面上的交互。

• 鏈接

導(dǎo)航或檢索信息。

• 標簽

告訴屏幕閱讀者每個表單輸入是什么。

了解了這一點后，那我們?nèi)绾螢槠聊婚喿x用戶提供更多有意義的事情呢？

首先，我們可以將錦標賽的每一列分為幾輪，并使用標題標記每一輪。這樣，屏幕閱讀者就能理解新一輪的發(fā)生時間。

接下來，我們可以幫助用戶了解每場比賽的對手。我們可以再次使用標題來標記每場游戲，讓他們找到他們可能感興趣的任意一場游戲。

通過添加標題，內(nèi)容如下所示：

“第1輪：第1場：George、Fred；第2場：Linus、Lucy；第3場：Jack、Jill；第4場：Fred、Ginger；第2輪：第5場：George、Lucy；第6場：Jack、Ginger；第3輪：第7場：George、Ginger；勝利者：Ginger?！?/p>

這比以前更容易理解了。

盡管如此，這些信息仍無法回答誰贏了每場比賽。要知道這一點，你必須知道在勝利者的下一場比賽時才能看到誰贏得了之前的比賽。例如，你要知道第四場比賽的勝利者，必須在第六場比賽中知道誰從第四場比賽中晉級。

我們可以通過告知用戶誰贏得每場比賽，來進一步提升體驗，這樣他們就不必去尋找它。在贏得場比賽的人后面加上“獲勝者”標簽就足夠了。

我們還應(yīng)該使用列表進一步將游戲和回合進行分組。列表提供了設(shè)計的結(jié)構(gòu)語義，實質(zhì)上通過可視化設(shè)計向用戶通知連接的節(jié)點。如果我們將其轉(zhuǎn)換回視覺設(shè)計，結(jié)果可能如下所示：

具有描述性標題和獲勝者信息的比賽（此處顯示為灰色背景）

由于標題和獲勝者字段在視覺設(shè)計中顯得多余，因此你可以從視覺上隱藏它們，因此最終的視覺效果看起來就像第一個設(shè)計的那樣。

你可能會問“如果最終結(jié)果在視覺上與我們開始的地方相同，那我們?yōu)槭裁匆?jīng)歷這一切？”

原因是你應(yīng)該使用所有必要結(jié)構(gòu)設(shè)計要求來闡釋你的設(shè)計，以獲得更好的屏幕閱讀體驗。這樣，執(zhí)行這個設(shè)計人員就知道如何添加它們。如果你剛剛將第一個設(shè)計交給實施者，那么很可能最終無法訪問。

使用結(jié)構(gòu)，請關(guān)注以下問題：

• 我能夠概述下我設(shè)計的HTML結(jié)構(gòu)嗎？
• 如何構(gòu)建設(shè)計以更好地幫助屏幕閱讀者理解內(nèi)容或找到他們想要的內(nèi)容？
• 如何幫助實施設(shè)計的人了解預(yù)期的結(jié)構(gòu)？

十二、時間維度

在設(shè)計中，你可能需要定期地限制用戶在任務(wù)上花費的時間。有時可能出于安全原因，例如會話超時。其它時候可能是由于非功能性要求，例如時間限制測試。

無論是什么原因，你應(yīng)該知道某些用戶可能需要更多時間才能完成任務(wù)。有些用戶可能需要更多時間來理解內(nèi)容，有些用戶可能無法快速執(zhí)行任務(wù)，并且很多時候他們可能會被中斷。

“設(shè)計師應(yīng)該假設(shè)人們在活動中會被打斷”—— The Design of Everyday Things

對于需要更多時間來執(zhí)行操作行為的用戶，應(yīng)該能夠在可能的情況下調(diào)整或刪除時間限制。例如，對于會話超時，你可以在會話即將到期時提醒用戶并允許他們對會話進行擴展。

要使用時間維度，請注意：是否可以提供控件來調(diào)整或消除時間限制？

總結(jié)

既然你已經(jīng)知道了可以通過查看設(shè)計的不同維度，那么你改如何使用它們？

即使設(shè)計已經(jīng)發(fā)送給你的用戶，這些維度也可以在設(shè)計過程中隨時使用。從身邊的用戶開始，一次又一次的利用可達性維度來分析設(shè)計。

問自己一些問題，看看是否應(yīng)該調(diào)整一些內(nèi)容以更好地滿足用戶的需求。當(dāng)你慢慢做出改變時，請把其它維度代入并重復(fù)此過程。

通過不同維度來驗證設(shè)計，將能夠提升體驗，以更好地滿足用戶需求。由于你能滿足用戶的需求，因此你將為所有用戶創(chuàng)造更易于訪問的設(shè)計。

翻譯：行云

校審：吊車尾

原文作者：Steven Lambert

原文鏈接：https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/

本文由 @元設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議