無障礙設計 (WCAG 2.2) 是做什麼的？
此技能確保數位介面對所有使用者（包括使用螢幕報讀軟體、切換控制或鍵盤導航者）皆具備可感知、可操作、可理解與穩健（POUR）的特性。它專注於 WCAG 2.2 成功準則的技術實作。
使用時機
- 定義 Web、iOS 或 Android 的 UI 元件規格。
- 稽核現有程式碼中的無障礙障礙或合規缺口。
- 實作新的 WCAG 2.2 標準，如目標尺寸（最小）與焦點外觀。
- 將高階設計需求對應至技術屬性（ARIA 角色、特質、提示）。
核心概念
- POUR 原則：WCAG 的基礎（可感知、可操作、可理解、穩健）。
- 語意映射：使用原生元素而非一般容器，以提供內建的無障礙支援。
- 無障礙樹：輔助技術實際「讀取」的使用者介面表示。
- 焦點管理：控制鍵盤/螢幕報讀游標的順序與可見性。
- 標籤與提示：透過
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或即時區域。
無障礙架構圖
flowchart TD
UI["UI 元件"] --> Platform{平台?}
Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
Platform -->|iOS| SwiftUI["無障礙特質 + 標籤"]
Platform -->|Android| Compose["語意 + 內容描述"]
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-Buttons：使用
<div>或<span>處理點擊事件，但未加上角色與鍵盤支援。 - 僅靠顏色表達意義：只透過顏色變化（例如將邊框變紅）來表示錯誤或狀態。
- 未封閉的 Modal 焦點：模態視窗未鎖定焦點，導致鍵盤使用者在模態開啟時可導覽背景內容。焦點必須被限制在模態內，且可透過
Escape鍵或明確的關閉按鈕離開（WCAG SC 2.1.2）。 - 多餘的替代文字：在 alt 文字中使用「圖片...」或「照片...」等字眼（螢幕報讀軟體已會宣告「圖片」角色）。
最佳實踐檢查清單
- 可互動元素達到 24x24px（Web）或 44x44pt（原生）的目標尺寸。
- 焦點指示器清晰可見且高對比。
- 模態視窗在開啟時鎖定焦點，並在關閉時乾淨釋放（
Escape鍵或關閉按鈕）。 - 下拉選單與彈出式選單在關閉後將焦點歸還給觸發元素。
- 表單提供文字形式的錯誤建議。
- 所有僅含圖示的按鈕都有描述性的文字標籤。
- 文字縮放時內容能正確重排。
參考資料
相關技能
frontend-patternsdesign-systemliquid-glass-designswiftui-patterns