無障礙設計 (WCAG 2.2) 是做什麼的？
此技能確保數位介面對所有使用者（包括使用螢幕閱讀器、切換控制或鍵盤導航者）皆可感知、可操作、可理解且穩固（POUR）。它專注於 WCAG 2.2 成功標準的技術實作。
使用時機
- 定義 Web、iOS 或 Android 的 UI 元件規格。
- 稽核現有程式碼以找出無障礙障礙或合規差距。
- 實作新的 WCAG 2.2 標準，例如目標尺寸（最小）和焦點外觀。
- 將高層次的設計需求轉換為技術屬性（ARIA 角色、特質、提示）。
核心概念
- POUR 原則：WCAG 的基礎（可感知、可操作、可理解、穩固）。
- 語義映射：使用原生元素而非通用容器，以提供內建的無障礙支援。
- 無障礙樹：輔助技術實際「讀取」的 UI 表示。
- 焦點管理：控制鍵盤/螢幕閱讀器游標的順序與可見性。
- 標籤與提示：透過
aria-label、accessibilityLabel和contentDescription提供上下文。
運作方式
步驟 1：識別元件角色
判斷功能用途（例如，這是按鈕、連結還是頁籤？）。在訴諸自訂角色之前，盡可能使用最語義化的原生元素。
步驟 2：定義可感知屬性
- 確保文字對比度達到 4.5:1（一般文字）或 3:1（大字型/UI 元件）。
- 為非文字內容（圖片、圖示）加入文字替代方案。
- 實作回應式重新排版（最多放大至 400% 而不損失功能）。
步驟 3：實作可操作控制
- 確保最小 24x24 CSS 像素的目標尺寸（WCAG 2.2 SC 2.5.8）。
- 確認所有可互動元素皆可透過鍵盤觸及，並具有可見的焦點指示器（SC 2.4.11）。
- 為拖曳動作提供單一指標替代方案。
步驟 4：確保可理解邏輯
- 使用一致的導航模式。
- 提供描述性的錯誤訊息與修正建議（SC 3.3.3）。
- 實作「重複輸入」（SC 3.3.7），避免要求使用者重複輸入相同資料。
步驟 5：驗證穩固相容性
- 使用正確的「名稱、角色、值」模式。
- 為動態狀態更新實作
aria-live或即時區域（live regions）。
無障礙架構圖
flowchart TD
UI["UI 元件"] --> Platform{平台?}
Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
Platform -->|iOS| SwiftUI["無障礙特質 + 標籤"]
Platform -->|Android| Compose["語義 + ContentDesc"]
ARIA --> AT["輔助技術（螢幕閱讀器、切換控制）"]
SwiftUI --> AT
Compose --> AT
跨平台對照表
| 功能 | Web (HTML/ARIA) | iOS (SwiftUI) | Android (Compose) |
|---|---|---|---|
| 主要標籤 | aria-label / <label> | .accessibilityLabel() | contentDescription |
| 次要提示 | aria-describedby | .accessibilityHint() | Modifier.semantics { stateDescription = ... } |
| 動作角色 | role="button" | .accessibilityAddTraits(.isButton) | Modifier.semantics { role = Role.Button } |
| 即時更新 | aria-live="polite" | .accessibilityLiveRegion(.polite) | Modifier.semantics { liveRegion = LiveRegionMode.Polite } |
範例
Web：無障礙搜尋
<form role="search">
<label for="search-input" class="sr-only">搜尋產品</label>
<input type="search" id="search-input" placeholder="搜尋..." />
<button type="submit" aria-label="提交搜尋">
<svg aria-hidden="true">...</svg>
</button>
</form>
iOS：無障礙動作按鈕
Button(action: deleteItem) {
Image(systemName: "trash")
}
.accessibilityLabel("刪除項目")
.accessibilityHint("從列表中永久移除這個項目")
.accessibilityAddTraits(.isButton)
Android：無障礙切換開關
Switch(
checked = isEnabled,
onCheckedChange = { onToggle() },
modifier = Modifier.semantics {
contentDescription = "啟用通知"
}
)
應避免的反模式
- Div 按鈕：使用
<div>或<span>處理點擊事件，卻未加入角色和鍵盤支援。 - 僅靠顏色表達意義：只透過顏色變化（例如將邊框變紅）來表示錯誤或狀態。
- 未封閉的模態框焦點：模態框未能限制焦點，導致鍵盤使用者在模態框開啟時能操作背景內容。焦點必須被限制在模態框內，並且可以透過
Escape鍵或明確的關閉按鈕來逃脫（WCAG SC 2.1.2）。 - 冗餘的替代文字：在替代文字中使用「圖片...」或「照片...」（螢幕閱讀器已會宣告「圖片」角色）。
最佳實務檢查清單
- 可互動元件達到 24x24px（Web）或 44x44pt（原生）的目標尺寸。
- 焦點指示器清晰可見且具有高對比度。
- 模態框在開啟時限制焦點，並在關閉時乾淨釋放（
Escape鍵或關閉按鈕）。 - 下拉選單和彈出選單在關閉時將焦點恢復到觸發元素。
- 表單提供基於文字的錯誤建議。
- 所有僅含圖示的按鈕都有描述性的文字標籤。
- 文字縮放時，內容能正確重新排版。
參考資料
相關技能
frontend-patternsdesign-systemliquid-glass-designswiftui-patterns