打造對所有人都有效的數位產品，是現代產品設計的核心責任。可訪問性不是專案結束時才要勾選的選項；它是一項基本的設計原則，從最初的草圖階段就影響著決策。當設計師在早期就整合可訪問性標準時，他們所建立的介面將具備可用性、包容性與穩健性。
本指南概述了您必須了解的關鍵標準。內容涵蓋網頁內容可訪問性指南（WCAG）、視覺設計需求、互動模式以及內容策略。遵循這些指南，可確保您的設計能支援具有不同能力的使用者，包括視障、聽障、行動障礙或認知差異者。
🌐 理解 WCAG 框架
網頁內容可訪問性指南（WCAG）是全球網頁可訪問性的國際標準。由萬維網聯盟（W3C）管理，這些指南提供了一個框架，使網頁內容對殘障人士更具可訪問性。雖然最初專注於網頁，但這些原則廣泛適用於軟體、應用程式與數位產品。
這些指南分為三個符合程度等級：
- Level A： 最低可訪問性等級。若網站未達此標準，則完全無法使用。
- Level AA： 中等級別。這通常是大多數法律合規與產業標準的目標。
- Level AAA： 最高可訪問性等級。雖然是理想目標，但通常無法對所有內容達成。
大多數組織的目標是達到WCAG 2.1 Level AA的合規性。這種平衡確保了高可用性標準，同時又不會使開發變得不可行。設計師應熟悉此等級內的具體成功標準。
🏗️ 可訪問性的四大原則（POUR）
WCAG 建立在四大核心原則之上。每一項設計決策都應以此四大支柱為評估依據。若設計未能符合其中任何一項原則，則該設計即不具可訪問性。
1. 可感知
資訊與使用者介面元件必須以使用者能夠感知的方式呈現。無論使用者的感官能力為何，都必須能感知到所呈現的資訊。
- 文字替代： 為非文字內容提供文字替代。例如，圖片必須具備描述性的替代文字。
- 時間性媒體： 為時間性媒體提供替代方案，例如影片的字幕。
- 可適應： 創建可以不同方式呈現，且不損失資訊的內容。
- 可辨識： 讓使用者更容易看見與聽見內容。
2. 可操作
使用者介面元件與導航必須可操作。所有功能都必須能透過鍵盤存取，且使用者必須有足夠時間閱讀與使用內容。
- 鍵盤可存取： 所有功能都必須能夠透過鍵盤介面操作。
- 足夠的時間： 必須給予使用者足夠的時間來閱讀和使用內容。
- 癲癇發作與身體反應： 不要設計會引發癲癇發作的內容。
- 可導航： 提供方法幫助使用者導航、尋找內容，並確定他們的位置。
3. 易於理解
資訊與使用者介面的操作必須易於理解。使用者必須能夠理解資訊，以及使用者介面的操作方式。
- 可讀性： 確保文字內容具有可讀性且易於理解。
- 可預測性： 確保網頁以可預測的方式呈現與運作。
- 輸入協助： 協助使用者避免並修正錯誤。
4. 健壯性
內容必須足夠健壯，以便被各種使用者代理（包括輔助技術）可靠地解讀。
- 相容性： 最大化與現有及未來使用者工具的相容性。
- 有效程式碼： 確保程式碼有效，以便螢幕閱讀器與瀏覽器能正確解讀。
🎨 視覺設計標準
視覺設計在可及性中扮演關鍵角色。高對比度、清晰的字體與謹慎的色彩運用，確保內容對每個人（包括低視力或色盲者）都可讀。
色彩對比
對比是指使物體可辨識的明暗或色彩差異。低對比度的文字對許多使用者而言難以閱讀，尤其是視覺障礙者。
- 一般文字： 一般文字的對比度至少須達到 4.5:1 與其背景之間的對比。
- 大字體： 字體大小為 18pt 或 14pt 粗體的文字，其對比度必須至少為3:1.
- UI 元件： 圖示和 UI 部分的對比度必須至少為3:1 與鄰近顏色之間的對比度。
不要僅依賴顏色來傳達資訊。例如，若使用紅色文字表示錯誤，也應包含圖示或文字訊息來說明錯誤內容。
字體與間距
字體選擇與間距對可讀性有顯著影響。無襯線字體通常比襯線字體在螢幕上更易閱讀。
- 字體大小： 基礎字體大小應至少為 16px。避免僅使用字體大小來傳達重要性。
- 行高： 確保行高至少為字體大小的 1.5 倍，以防止文字行在視覺上融合。
- 字元間距： 增加字元間距，以提升閱讀障礙或低視力使用者的可讀性。
- 段落間距： 確保段落之間有足夠的間距，以區分文字區塊。
⌨️ 互動與導航標準
互動設計必須考慮無法使用滑鼠的使用者。這包括依賴鍵盤、切換裝置或語音控制的運動功能障礙者。
鍵盤導航
使用者必須僅使用鍵盤就能導航整個介面。Tab 順序必須符合邏輯，並遵循頁面的視覺流程。
- Tab 順序： 確保焦點能邏輯地在介面中移動。
- 焦點指示器： 永遠不要移除預設的焦點外框。若需自訂，請確保其清晰可見，且與周圍內容有明顯區別。
- 跳過連結： 提供機制以跳過重複內容，例如導航選單。
焦點管理
當內容動態變更時，必須正確管理焦點。例如，若開啟彈窗，焦點應移入彈窗內；關閉時，焦點應返回觸發該彈窗的元素。
觸控目標
對於行動裝置和觸控介面，互動元素必須足夠大，才能精確點選。
- 最小尺寸：觸控目標至少應為 44×44 個 CSS 像素。
- 間距：確保目標之間有足夠的間距，以避免意外觸發。
📝 內容與語義結構
內容結構有助於輔助技術理解資訊的層級與意義。語義化 HTML 是此結構的基礎。
標題與層級
使用標題來邏輯性地組織內容。使用者經常跳過標題以快速尋找資訊。
- 邏輯順序：不要跳過標題層級。應從 H1 到 H2，再至 H3。不要從 H1 直接跳到 H4。
- 描述性文字：標題應清楚描述其後的內容。
表單與標籤
表單是複雜的互動點，需要明確的標籤與錯誤處理。
- 關聯標籤：每個輸入欄位都必須有程式碼關聯的標籤。
- 錯誤識別：錯誤必須以文字標示，並由螢幕閱讀器朗讀。
- 錯誤建議：提供修正錯誤的建議。
圖片與圖示
圖片傳達的資訊必須讓無法看見的使用者也能取得。
- 替代文字：提供替代文字，傳達與圖片相同的功能或意義。
- 裝飾性圖片：若圖片純屬裝飾，應標示為此類，讓螢幕閱讀器忽略它。
- 複雜圖片：為複雜的圖表或圖解提供詳細描述。
📊 常見設計陷阱與解決方案
以下是列出常見設計問題及其可及性解決方案的表格。
| 常見陷阱 | 可及性問題 | 解決方案 |
|---|---|---|
| 低對比度文字 | 低視力使用者難以閱讀文字。 | 使用對比度檢查工具，確保對比度達到 4.5:1。 |
| 僅靠顏色指示 | 色盲使用者無法區分狀態。 | 在顏色旁加上圖示或文字標籤。 |
| 缺少焦點狀態 | 使用鍵盤的使用者無法知道他們的位置。 | 為所有互動元素設計可見的焦點指示器。 |
| 表單標籤不清晰 | 螢幕閱讀器無法識別輸入欄位。 | 確保每個輸入欄位都有對應的標籤。 |
| 自動播放媒體 | 干擾使用者並阻止專注。 | 關閉自動播放，或立即提供暫停按鈕。 |
| 觸控目標過小 | 對動作障礙使用者而言困難。 | 確保觸控目標至少為 44×44 像素。 |
🧪 測試你的設計
若無測試，可及性設計便不完整。自動化工具雖有幫助，但無法發現所有問題。
自動審計
使用自動化工具來發現常見問題，例如缺少替代文字、對比度不足或無效的顏色組合。這些工具可提供合規性的基準。
- 檢查顏色對比度：驗證設計系統中各處的對比度水平。
- 驗證結構： 確保語義標籤被正確使用。
- 審查替代文字： 檢查所有圖片是否都有描述。
手動檢查
自動化工具會忽略上下文。手動檢查可確保使用者體驗邏輯一致。
- 僅使用鍵盤： 僅使用 Tab 鍵導航您的介面。您是否能存取所有內容？
- 縮放： 將介面縮放到 200%。內容是否出現斷裂或重疊？
- 焦點順序： 焦點是否在介面中邏輯性地移動？
使用者測試
沒有任何東西能取代來自真實使用者的反饋。在您的使用者研究中納入殘障人士。
- 招募多樣化的使用者： 包含有視覺、運動及認知障礙的使用者。
- 觀察任務： 觀察使用者如何完成關鍵任務，且不加以干擾。
- 收集反饋： 問詢使用者的使用經驗與痛點。
🏛️ 設計系統的角色
設計系統是擴展可及性的強大工具。透過將可及性內建於元件程式庫中，可確保整個產品的一致性。
- 標準化元件： 建立可及性版本的按鈕、輸入欄位與對話方塊。
- 權杖管理： 定義符合對比度與尺寸要求的色彩與間距權杖。
- 文件說明： 清楚記錄每個元件的可及性需求。
- 審查流程： 在設計系統核准流程中納入可及性檢查。
⚖️ 法律與道德考量
除了可用性之外，可訪問性通常是一項法律要求。政府和組織會執行標準，以確保平等的訪問權。
法律合規
各種法律規定數位可訪問性。不遵守可能導致訴訟和罰款。
- 第508節：要求聯邦機構使電子和資訊技術具有可訪問性。
- 美國殘疾人法案（ADA）：美國殘疾人法案適用於公共場所，包括網站。
- 歐洲可訪問性法案：為歐盟的產品和服務設立標準。
道德責任
打造包容性產品是正確的事。根據能力排除使用者會限制您產品的潛力，並疏遠了相當大一部分的人口。
- 市場覆蓋範圍：每四名成人中就有一名有殘疾。忽視可訪問性會縮小您的市場。
- 品牌聲譽：以包容性著稱的公司能與客戶建立更強的信任。
- 未來保障：隨著技術的演進，可訪問性確保您的產品持續可用。
🔄 跟上變化的步伐
可訪問性標準不斷演進。新技術和使用者需求不斷出現。保持資訊靈通至關重要。
- 追蹤更新：留意 WCAG 的更新和新指南。
- 社群參與：參與可訪問性社群和論壇。
- 持續學習：撥出時間學習新的技術和工具。
🛠️ 將可訪問性融入工作流程
為了讓可訪問性成為習慣，請將其融入設計過程的每個階段。
研究階段
在您的使用者研究計畫中包含可訪問性。識別可能從您的產品中受益的殘疾使用者。
設計階段
在線框圖和原型設計過程中應用無障礙標準。不要等到最後才修復問題。
開發交接
為開發人員提供明確的規格說明。包括對比度值、焦點狀態和互動細節。
品質保證階段
在品質保證清單中包含無障礙測試。確保新功能不會破壞現有的無障礙功能。
🔍 特定成功標準深入探討
理解特定的成功標準有助於你精確地應用這些標準。
1.1.1 非文字內容
任何呈現給使用者的非文字內容都必須有文字替代品，以達到同等目的。
- 圖片：替代文字必須描述內容。
- 按鈕：如果圖示是按鈕，則 aria-label 必須描述該操作。
2.4.7 焦點可見
任何可透過鍵盤操作的使用者介面，都必須有一種運作模式，使鍵盤焦點指示器可見。
- 可見性：焦點指示器必須在背景上清晰可見。
- 對比度：焦點指示器必須符合 3:1 的對比度。
3.3.3 錯誤建議
如果偵測到輸入錯誤，系統會建議修正。
- 清晰度：建議必須清晰且可執行。
- 無障礙：建議必須與輸入欄位以程式方式關聯。
4.1.2 名稱、角色、值
對於使用者介面元件，其名稱和角色可透過程式方式確定。
- 語義化 HTML：盡可能使用原生 HTML 元素。
- ARIA：僅在原生 HTML 不足時才使用 ARIA 屬性。
💡 設計師實用技巧
以下是一些可執行的技巧，可幫助您改善日常設計工作流程。
- 使用對比度工具：設計時保持對比度檢查插件或工具開啟。
- 檢查字型大小：確保當瀏覽器字型大小增加時，所有文字都能正確縮放。
- 使用螢幕閱讀器進行測試：偶爾使用螢幕閱讀器測試您的原型，以了解使用者的體驗。
- 與同儕共同審查：請同事審查您的設計是否存在無障礙問題。
- 記錄決策：在設計筆記中說明您為何做出某些無障礙相關的選擇。
🌍 全球標準
雖然 WCAG 是主要標準，但其他地區也有自己的指導原則，通常與之相符。
- ISO 9241：視覺顯示終端辦公作業的人體工學要求。
- EN 301 549：公共部門機構無障礙的歐洲標準。
- 第 508 條：美國聯邦標準。
遵循 WCAG 2.1 AA 通常可滿足大多數這些地區性要求。
🚧 處理例外情況
有時，設計需求可能與無障礙標準衝突。在這些情況下，應記錄例外情況並提供替代方案。
- 理由：說明為何此例外是必要的。
- 替代方案：為無法使用例外情況的使用者提供可訪問的替代方案。
- 核准： 在實施例外情況前，須取得利害關係人的核准。
📢 推廣與領導
設計師經常需要在團隊和組織內部為無障礙性發聲。
- 教育相關利益方：說明無障礙性的商業價值。
- 分享資源：向你的團隊提供文章和指南。
- 以身作則：讓自己的作品具備無障礙性，並作為參考分享給他人。
🔗 深入學習的資源
有許多資源可供你深化知識。
- WCAG 官方網站：指引的首要來源。
- WAI 教學課程：關於無障礙性的教育材料。
- Deque 大學：無障礙專業人員的培訓與認證。
- A11y 專案：由社群推動的檢查清單與資源。
透過致力於這些標準，你將為更包容的數位環境貢獻一份心力。無障礙性是一段持續的旅程，而非終點。保持好奇，持續學習，並在每一個設計決策中優先考慮包容性。
設計的未來是包容的。你的設計具有賦能使用者的力量，並能創造出對每個人皆適用的體驗。從今天開始應用這些標準吧。
