想想你最喜歡的網站或應用程式，是什麼原因讓你喜歡？現在，想想某個您不喜歡的網站或應用程式。您不喜歡哪些部分？使用者與設計的互動方式，以及在網站和應用程式上的體驗可能有所不同。
這項體驗可能會因時間、使用的裝置類型、前一晚的睡眠時間、身體狀況、使用的輔助技術等因素而異。全球人口將近 80 億，使用者如何使用及體驗您的設計，有無限可能。
多元包容設計
如何一次滿足所有潛在使用者需求？輸入多元包容設計。無障礙設計採用以人為本的方式，將無障礙、可用性和易用性融為一體。
通用設計著重於單一設計，盡可能讓更多人使用，而包容性設計原則則是以特定個人或用途為中心設計，然後將設計擴展到其他人。
以無障礙為重點的包容性設計原則有七項：
- 提供同等體驗：確保介面為所有人提供同等體驗，讓使用者能以符合自身需求的方式完成工作，同時不影響內容品質。
- 考量情況：確保介面能為使用者提供有價值的體驗，無論他們的情況如何。
- 保持一致：使用常見的慣例，並以合乎邏輯的方式套用。
- 提供控制權：確保使用者能以偏好的方式存取內容並與之互動。
- 提供選擇：考慮提供不同的方式讓使用者完成工作，尤其是複雜或非標準的工作。
- 優先顯示重要內容：在內容和版面配置中，將核心工作、功能和資訊依偏好順序排列，協助使用者專注於這些元素。
- 增加價值：考量功能的目的和重要性，以及如何改善不同使用者的體驗。
職位
開發新設計或功能時，許多團隊會依據使用者角色來引導整個流程。虛構角色會使用您的數位產品，通常是根據量化和質性使用者研究而來。
此外，在設計和開發過程中，您也可以透過使用者角色快速且經濟實惠地測試及優先處理這些功能。在對話中加入實際考量因素，有助於專注於網站元件的相關決策，進而制定策略並建立以特定使用者群組為目標的目標。
納入身心障礙人士
「每個人都不一樣。我只能根據自己的經驗分享。你認識一位聽障人士，就只認識一位聽障人士，而不是我們所有人。」
ID24 演講的 Meryl Evans Deaf Tech：從過去到未來，穿越時空。
將身心障礙人士納入角色時，角色可做為包容性設計工具。方法有很多種。 您可以建立特定障礙類型的人物誌、在現有使用者人物誌中新增障礙類型，甚至建立人物誌光譜，反映情境、暫時和永久障礙的動態實況。
無論您如何將身心障礙人士納入買家角色，都不應以真實人物或刻板印象為依據。此外，使用者測試絕不能以目標對象角色取代。
- 姓名：Jane Bennet
- 年齡：57 歲
- 地點：英國艾塞克斯
- 職業：使用者體驗工程師
- 身心障礙：因早發性帕金森氏症 (YOPD) 導致手部顫抖
- 目標：使用語音轉文字輸入功能，輕鬆新增程式碼建議；以最少的按鍵次數在線上尋找自行車裝備。
- 令人沮喪的體驗：網站不支援僅使用鍵盤操作；設計應用程式的觸控互動區域太小。
身為使用者體驗工程師，Jane 負責設計及建構網頁，確保公司網站內容與時俱進。她整天都在協助許多團隊成員。 她是解決技術問題的高手，部門中只要發生任何意外狀況，大家都會向她求助。
她因顫抖而失去精細動作技能，使用滑鼠越來越困難。她越來越常使用鍵盤瀏覽網路。Jane 一直很注重體能，她熱愛公路賽和越野自行車賽。因此，去年診斷出她罹患早發型帕金森氏症時，對她來說更是沉重打擊。
身心障礙模擬器
使用無障礙模擬工具模擬或補充使用者角色時，請務必格外謹慎。
身心障礙模擬器是一把雙面刃，因為模擬器可能會建立同情或同理心，但這取決於個人、模擬器的使用情境，以及許多其他無法控制的因素。許多無障礙倡議人士反對使用身心障礙模擬工具，並建議尋找身心障礙人士製作的電影、示範、教學課程和其他內容，直接瞭解他們的體驗。
「我覺得我們必須坦白承認，任何模擬活動都無法影響我們希望視力正常者從心底和腦海中瞭解的某些重要事項。失明並非我們的特徵，對失明的誤解和低估才是我們最大的障礙。
這些誤解會造成人為障礙，阻礙我們充分參與，而這些錯誤的限制會累積成阻礙我們發展的因素。」
Mark Riccobono， 美國全國盲人聯盟主席。
無障礙經驗法則
在建立目標對象和設計時，建議您將啟發式評估納入工作流程。啟發式是互動設計的規則，由 Jakob Nielsen 和 Rolf Molich 於 1990 年提出。這十項原則是根據多年來在可用性工程領域的經驗所制定，並已用於設計和人機互動程式。
快轉到 2019 年，Deque 的設計團隊建立並分享了一組著重於數位無障礙的全新啟發式方法。根據他們的調查，如果設計流程納入無障礙功能，網站或應用程式最多可避免 67% 的無障礙錯誤。這是在編寫任何程式碼前，就能帶來的巨大影響。
與原始的一組啟發式原則類似，規劃設計時，有十項無障礙啟發式原則可供參考。
- 互動方法和模式：使用者可以選擇自己偏好的輸入方式 (例如滑鼠、鍵盤、觸控等)，與系統有效互動。
- 導覽和尋路：使用者隨時都能在系統中導覽、尋找內容，以及判斷自己所在位置。
- 結構和語意：使用者可以瞭解每個頁面的內容結構，以及如何在系統中操作。
- 防止錯誤和狀態：互動式控制項會提供持續且有意義的指示，協助防止錯誤，並在傳回錯誤時，向使用者提供清楚的錯誤狀態，指出問題所在和修正方式。
- 對比度和易讀性：使用者可以輕鬆辨識及閱讀文字和其他重要資訊。
- 語言和可讀性：使用者可以輕鬆閱讀及理解內容。
- 可預測性和一致性：使用者可以預測每個元素的用途。 清楚瞭解每個元素與整個系統的關係。
- 時間和保留：使用者有充足的時間完成工作，即使時間 (即工作階段) 結束，也不會遺失資訊。
- 移動和閃爍：使用者可以停止網頁上移動、閃爍或有動畫效果的元素。這些元素不應干擾使用者或造成其他傷害。
- 視覺和聽覺替代內容：使用者可以存取任何傳達資訊的視覺或聽覺內容的文字替代內容。
對這些無障礙設計啟發式方法有基本瞭解後，您可以使用無障礙設計啟發式方法工作表，並按照提供的操作說明，將這些方法套用至角色或設計。收集多方觀點，可讓這項練習更有啟發性。
以下是導覽和尋路檢查點的無障礙啟發式評估範例：
| 導航和尋路檢查點 | 表現優異 (+2 分) | 通過 (+1 分) | 失敗 (-1 分) | 不適用 (0 pt) |
|---|---|---|---|---|
| 當所有有效元素成為焦點時，是否會顯示清楚可見的指標？ | ||||
| 網頁是否含有有意義的標題文字，且網頁專屬資訊位於最前面？ | ||||
| 網頁標題元素和 H1 是否相同或相似？ | ||||
| 每個主要章節都有意義明確的標題嗎？ | ||||
| 連結的用途是否僅從連結文字或其直接脈絡定義？ | ||||
| 網頁最頂端是否提供略過連結，且該連結是否會在焦點上顯示？ | ||||
| 導覽元素的編排方式是否方便使用者尋路？ |
團隊成員查看網頁或元件並進行無障礙啟發式評估後，系統會計算每個檢查點的總分。此時，您可以決定如何修正發現的問題，或補足對支援數位無障礙功能至關重要的任何遺漏之處。
無障礙註解
將設計稿交給開發團隊前，請考慮加入無障礙註解。
一般來說，註解是用來解釋廣告素材選項，以及描述設計的不同面向。無障礙註解著重於開發人員可根據設計團隊或無障礙專家的指引，做出更符合無障礙標準的程式設計選擇。
在設計流程的任何階段，從線框到高傳真模擬，都可以套用無障礙註解。包括使用者流程、條件狀態和功能。他們通常會使用符號和標籤簡化流程，並將設計做為主要重點。
以下設計插圖範例來自 Indeed.com 的 Figma 無障礙註解套件。
視設計計畫而定，您應該可以選擇多個無障礙註解入門套件。或者，您也可以自行建立一組。無論是哪種情況，您都應決定要向交接團隊傳達哪些資訊，以及最適合的格式。
無障礙註解可考慮加入以下內容：
- 顏色：包含調色盤中所有不同顏色組合的對比度。
- 按鈕和連結：識別預設、懸停、有效、焦點和停用狀態。
- 略過連結：醒目顯示隱藏和可見的設計元素，以及這些元素在網頁上的連結位置。
- 圖片和圖示：為重要圖片和圖示新增替代文字建議。
- 音訊和影片：醒目顯示字幕、轉錄稿和口述影像的區域和連結。
- 標題：新增程式輔助層級，並加入所有看起來像標題的內容。
- 地標：使用 HTML 或 ARIA 標示設計的不同區段。
- 互動式元件：識別可點擊的元素、懸停效果、焦點區域。
- 鍵盤：找出焦點的起始位置 (Alpha 停止) 和後續的 Tab 鍵順序。
- 表單：新增欄位標籤、輔助文字、錯誤訊息和成功訊息。
- 可存取的名稱：識別輔助技術應如何辨識元素。