---
schema_version: "1"
id: 23019be47891b024e32ff60482e4867d88a2e87028b138cb4a279629bbe312f4
title: 無障礙與包容設計 - 模式
collection: architect
version: current
locale: zh-tw
portal_url: https://docs.salesforce.com/architect/current/zh-tw/well-architected/guides/fairness-accessibility-patterns.md
canonical_url: https://architect.salesforce.com/docs/architect/zh-tw/well-architected/guide/fairness-accessibility-patterns.html
source_site: architect.salesforce.com
content_type: documentation
content_hash: 36c74897f82bbf3908308e52048dcb9ff209ab2899493c4fffbef008979a78d1
products:
  - 結構良好的架構
  - Architect Site Content Repo
---
# 無障礙與包容設計 - 模式

<br>

深入瞭解結構良好的公平[性](/docs/architect/zh-tw/well-architected/guide/fairness.html) → [Lightning 與 Experience Cloud 的無障礙功能](/docs/architect/zh-tw/well-architected/guide/fairness.html#accessibility-with-lightning-and-experience-cloud)

## WCAG 2.2 AA 規範

**模式**

| 要尋找的位置 | 良好的外觀 |
| --- | --- |
| 平台 \| 設計標準               | ✅ WCAG 2.2 層級 AA 是由建築小組驗證的自訂建立工作 (Experience Cloud、LWC、自訂主題) 最低無障礙列                                                |
| 平台 \| 設計標準               | ✅ 可辨識原則:替代文字存在於影像和圖示中;字幕會伴隨影片   |
| 平台 \| 設計標準               | ✅ 可操作原則:所有功能只能透過鍵盤操作,不需要滑鼠或觸控—語音控制和切換存取輔助技術依賴相同的鍵盤/焦點模型             |
| 平台 \| LWC                            | ✅ 標準 Lightning Web 元件會依預期使用,自動提供基準存取設定                                         |
| 平台 \| LWC                            | ✅ 自訂元件實作透過螢幕助讀程式測試驗證的明確無障礙功能                                               |
| 平台 \| 測試計畫                     | ✅ 無障礙測試包含在所有測試階段中 (非臨時或選用)                                                               |

**反模式**

| 要尋找的位置 | 看起來怎麼壞 |
| --- | --- |
| 平台 \| 設計標準               | ⚡️ WCAG 2.2 層級 AA 視為選擇性或「有」,而非最低需求                           |
| 平台 \| 設計標準               | ⚡️ 影像與圖示缺少文字替代項目;影片缺少字幕                                                        |
| 平台 \| 設計標準               | ⚡️ 功能需要滑鼠或觸控互動,且沒有鍵盤替代功能                              |
| 平台 \| LWC                            | ⚡️ 自訂元件在沒有無障礙實作或驗證的情況下建立                                       |
| 平台 \| LWC                            | ⚡️ 自訂輸入元件使用 div 元素和 CSS 樣式,沒有語意意義或鍵盤存取設定          |
| 平台 \| 測試計畫                     | ⚡️ 無障礙測試為臨時、選擇性測試,或僅在啟動前執行 (非在整個開發期間)              |

## 螢幕助讀程式結構

**模式**

| 要尋找的位置 | 良好的外觀 |
| --- | --- |
| 平台 \| LWC                            | ✅ 語意 HTML 元素 (標題、瀏覽、主要、側邊、頁尾、文章、區段) 會用於自訂 Lightning Web 元件                      |
| 平台 \| LWC                            | ✅ 系統會在僅限語意 HTML 無法傳達介面行為時套用 ARIA 地標、角色和內容                                 |
| 平台 \| LWC                            | ✅ 動態內容更新會使用 ARIA-Live 區域向螢幕助讀程式使用者公告變更                                                      |
| 平台 \| LWC                            | ✅ 自訂互動元件具有符合其行為的明確角色定義                                                         |
| 平台 \| LWC                            | ✅ 表單標籤會使用適當的標籤元素或 aria-labelledby 屬性明確與所有表單輸入相關聯                         |
| 平台 \| LWC                            | ✅ Lightning 輸入元件設定為具有必要的標籤屬性,提供內建的標籤關聯                                |
| 平台 \| 測試計畫                     | ✅ 使用實際螢幕助讀程式進行測試:Windows 上的 JAWS 與 NVDA、macOS 與 iOS 上的 VoiceOver、Android 上的 TalkBack                   |
| 平台 \| 測試計畫                     | ✅ 使用實際輔助技術手動測試由瞭解螢幕助讀程式使用者瀏覽方式的人員執行                         |
| 平台 \| 設計標準               | ✅ 預留位置文字永遠不會作為唯一的標籤使用,因為預留位置會在焦點時消失,並為螢幕助讀程式提供不足的內容 |

**反模式**

| 要尋找的位置 | 看起來怎麼壞 |
| --- | --- |
| 平台 \| LWC                            | ⚡️ 分類粗略的標記條紋表示從內容階層強制螢幕助讀程式使用者線性瀏覽 |
| 平台 \| LWC                            | ⚡️ ARIA 不會在僅限語意 HTML 無法傳達介面行為時使用                             |
| 平台 \| LWC                            | ⚡️ 動態內容更新不使用 ARIA 即時區域;螢幕助讀程式使用者會遺漏重要變更        |
| 平台 \| LWC                            | ⚡️ 自訂互動元件缺少明確的角色定義;螢幕助讀程式不正確地宣告這些角色  |
| 平台 \| LWC                            | ⚡️ 表單輸入缺少明確的標籤關聯性;預留位置文字會作為唯一標籤使用                     |
| 平台 \| 測試計畫                     | ⚡️ 僅使用自動化無障礙工具;不會執行手動螢幕助讀程式測試       |
| 平台 \| 測試計畫                     | ⚡️ 測試由看得見的使用者執行,他們不熟悉螢幕助讀程式使用者實際瀏覽的方式         |

## 鍵盤瀏覽

**模式**

| 要尋找的位置 | 良好的外觀 |
| --- | --- |
| 平台 \| 設計標準               | ✅ 可透過鍵盤存取完整功能,無須在使用者旅程中的任何時間點使用滑鼠或觸控互動                       |
| 平台 \| LWC                            | ✅ 邏輯焦點順序遵循視覺版面配置與互動流程                                                                                     |
| 平台 \| LWC                            | ✅ 動態內容載入或強制回應開啟時,會以程式設計的方式管理焦點,以引導鍵盤使用者瞭解新內容                                |
| 平台 \| LWC                            | ✅ 強制回應和彈出元件會將焦點移至強制回應標題或開啟時的第一個互動元素;將焦點移至關閉時的觸發按鈕               |
| 平台 \| 設計標準               | ✅ 可見的焦點指標會清楚顯示哪個元素一律具有鍵盤焦點                                                                |
| 平台 \| 設計標準               | ✅ 焦點指標符合 3:1 對外部內容的對比需求                            |
| 平台 \| LWC                            | ✅ 使用者可以單獨使用鍵盤來瀏覽至所有元件,而不會遭到陷阱                                                    |
| 平台 \| LWC                            | ✅ 強制回應對話會在開啟時抓取強制回應內的焦點 (防止存取隱藏內容),但在關閉時釋出焦點                            |
| 平台 \| 設計標準               | ✅ 常用動作的鍵盤快速鍵可避免與螢幕助讀程式快速鍵和瀏覽器快速鍵衝突                                         |
| 平台 \| 設計標準               | ✅ 單一字母快速鍵只會在特定元件具有焦點 (非全域) 時啟用,以避免與螢幕助讀程式瀏覽指令衝突 |
| 平台 \| 文件                  | ✅ 所有自訂鍵盤快速鍵都會記錄在無障礙的說明內容中                                                                            |
| 平台 \| 測試計畫                     | ✅ 測試步驟包含僅透過鍵盤瀏覽所有使用者旅程,而無須使用滑鼠或觸控                                                 |

**反模式**

| 要尋找的位置 | 看起來怎麼壞 |
| --- | --- |
| 平台 \| 設計標準               | ⚡️ 功能需要滑鼠或觸控互動;僅限鍵盤使用者無法完成關鍵工作           |
| 平台 \| LWC                            | ⚡️ 焦點順序不會遵循邏輯的視覺版面配置;使用者以非預期的順序來按 Tab 鍵切換元素       |
| 平台 \| LWC                            | ⚡️ 強制回應會在沒有焦點管理的情況下開啟;鍵盤使用者會停留在現在隱藏的觸發按鈕上             |
| 平台 \| LWC                            | ⚡️ 強制回應關閉不會將焦點傳回觸發按鈕;使用者必須尋找其在頁面中的位置           |
| 平台 \| 設計標準               | ⚡️ 焦點指標因美學原因而遭到抑制;使用者看不到哪個元素有焦點            |
| 平台 \| 設計標準               | ⚡️ 焦點指標對比不足 (<3:1)                            |
| 平台 \| LWC                            | ⚡️ 使用者會陷入沒有逸出機制的介面區域 (鍵盤陷阱)                        |
| 平台 \| LWC                            | ⚡️ 內嵌內容 (iframes、第三方小工具) 可永久捕捉鍵盤焦點                        |
| 平台 \| 設計標準               | ⚡️ 單一字母快速鍵會啟用與螢幕助讀程式單一字母瀏覽指令的全域衝突 |
| 平台 \| 文件                  | ⚡️ 自訂鍵盤快速鍵無法記錄;使用者無法發現                                     |

## 視覺設計與對比

**模式**

| 要尋找的位置 | 良好的外觀 |
| --- | --- |
| 平台 \| 設計標準               | ✅ 一般文字低於 18pt 或 14pt 粗體的最低 4.5:1 對比率                                                                |
| 平台 \| 設計標準               | ✅ 大型文字和有意義的 UI 元件和圖形 (表單框線、資訊圖示) 的最少 3:1 對比率;純粹裝飾與停用元素會排除                      |
| 平台 \| Experience Cloud               | ✅ 自訂主題與品牌 Experience Cloud 網站包含使用瀏覽器開發工具或自動檢查器的明確對比驗證 |
| 平台 \| 設計標準               | ✅ 支援將文字調整為 200%,但不會遺失內容或功能 (WCAG 需求)                                        |

**反模式**

| 要尋找的位置 | 看起來怎麼壞 |
| --- | --- |
| 平台 \| 設計標準               | ⚡️ 文字對比率低於 4.5:1 (一般文字) 或 3:1 (大型文字和 UI 元件)    |
| 平台 \| Experience Cloud               | ⚡️ 自訂主題會在沒有對比驗證的情況下部署;視力不佳的使用者無法閱讀內容 |
| 平台 \| 設計標準               | ⚡️ 將文字調整大小超過 200%,會使版面配置失去內容或功能                       |

## 無障礙測試和驗證

**模式**

| 要尋找的位置 | 良好的外觀 |
| --- | --- |
| 平台 \| CI/CD                          | ✅ Axe 核心或 Lighthouse 無障礙掃描已整合至 CI/CD 管道,可在每個部署中找出結構問題       |
| 平台 \| CI/CD                          | ✅ 建立失敗時偵測到重要無障礙問題                                                                           |
| 平台 \| 測試計畫                     | ✅ 透過螢幕助讀程式、僅限鍵盤瀏覽和瀏覽器縮放至 200%,在整個開發期間會定期執行手動測試  |
| 平台 \| 測試計畫                     | ✅ 測試顯示互動問題,包括混淆的公告訂單、焦點管理失敗和鍵盤陷阱            |
| 平台 \| 公司                       | ✅ 身心障礙的使用者會包含在整個設計流程的可用性測試中                                                   |
| 平台 \| 公司                       | ✅ 可用性測試顯示自動與手動專家測試忽略的實際阻礙                                            |
| 平台 \| 測試計畫                     | ✅ 已執行自動測試 (~57% 的問題數量)、手動測試 (互動問題) 和使用者測試 (真實世界阻礙) |

**反模式**

| 要尋找的位置 | 看起來怎麼壞 |
| --- | --- |
| 平台 \| CI/CD                          | ⚡️ 無障礙掃描未整合至 CI/CD 管道                                          |
| 平台 \| CI/CD                          | ⚡️ 儘管有重大無障礙問題,仍會繼續建立                                                   |
| 平台 \| 測試計畫                     | ⚡️ 不會執行含輔助技術的手動測試;只會使用自動掃描             |
| 平台 \| 公司                       | ⚡️ 無障礙使用者不包含在可用性測試中                                          |
| 平台 \| 測試計畫                     | ⚡️ 自動化無障礙掃描器會在啟動前執行一次,且視為已完成無障礙測試 |