# T026｜介面系統標準與控制規範 v01

狀態：候選控制規範；建立日期：2026-09-27。適用於本機重建原型與元件展示，不代表 OpenAI 官方設計系統，不代表原站或原型已符合 WCAG，也沒有國際認證。

## 1. 標準層級與範圍

| 依據 | 地位 | 本測試採用方式 |
| --- | --- | --- |
| [WCAG 2.2](https://www.w3.org/TR/WCAG22/)（2024-12-12 Recommendation） | W3C 正式網頁標準 | 將 A 與 AA 全部納入驗收範圍；不以抽樣自動掃描代替整頁、完整流程的符合性評估 |
| [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) | W3C Recommendation | 自訂互動元件的角色、名稱、值與狀態；優先原生 HTML，再補 ARIA |
| [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/about/introduction/) | 非規範性實作指引 | 用於鍵盤與互動模式設計；範例不是可直接宣稱生產成熟的元件庫 |
| [DTCG Format 2025.10](https://www.designtokens.org/TR/2025.10/format/) | 穩定的 Final Community Group Report；不是 W3C Standard，也不在 W3C Standards Track | token 交換格式基線；與本專案 token 分層、命名、發布政策分開 |
| [WCAG Understanding / Quick Reference](https://www.w3.org/WAI/WCAG22/quickref/) | 非規範性說明與技巧 | 輔助設計測試案例；有疑義回到正式成功準則 |

「完整系統」在本測試的意思是：來源 → tokens → 元件 → 頁面 → 狀態 → 驗證 → 版本控制均有入口。未實作的登入、影音播放、正式課程服務不憑空標示完成；新增時必須重新判定適用性。其他司法管轄區的法律符合性、ISO 認證與個別採購規範不在本測試的已驗證範圍。

## 2. 視覺重建與無障礙控制的關係

原站截圖與 DOM 樣式是外觀研究證據，不能推論為 OpenAI 的內部規則。每個抽取值應標示「實測／推估／本地新增」，附網址、擷取日期、viewport、狀態及來源檔案。遇到原站低對比、焦點不清楚或目標過小時，保留差異紀錄，採可及版本；不能為了像素相似覆寫必要的可用性控制。

本專案建議採下列自訂品質門檻；這些數值不是 W3C 對所有產品的規定：

- 核心截圖：1440、1024、390 CSS px；另測 320 CSS px 的內容重排。
- 固定相同 viewport、內容、縮放與字型載入狀態後，再比較版面。動態資料與圖片差異另列，不能把整張圖片差異比例當作唯一成功判準。
- 比較導航位置、內容最大寬度、字級／字重／行高、段落換行、卡片比例、間距、背景、邊框、圓角與互動狀態；各項附「相近／有差異／未觀察」。人類美感接受另記。
- 焦點建議採至少 2 px 清楚輪廓及 2 px 間隙；一般可點控制建議 44 × 44 CSS px。這是本案易用性目標，不把它寫成 WCAG 2.2 AA 的普遍硬門檻。

## 3. 全部 A／AA 適用性追蹤矩陣

涵蓋 WCAG 2.2 的 55 個 A／AA 成功準則（4.1.1 已在 2.2 移除，不納入）。下列是本案測試分工與執行提示，非標準全文翻譯。判定必須回看[正式準則與符合性要求](https://www.w3.org/TR/WCAG22/#conformance)及[官方快速參考](https://www.w3.org/WAI/WCAG22/quickref/)。

標記：**必測**＝已知介面類型會涉及；**條件**＝實作出現該功能才適用，現階段不能自行當作通過；**人工**＝需人員判讀；**混合**＝程式檢查加人工。所有列初始結果均為「待驗證」，須由整合 QA 報告提供結果。N/A 必須附實際功能盤點與理由。

| SC | 等級 | 適用性 | 本案驗收案例／應保存的證據 | 方法 |
| --- | --- | --- | --- | --- |
| 1.1.1 | A | 必測 | 逐張核對卡片與裝飾圖的替代文字決策 | 混合 |
| 1.2.1 | A | 條件 | 若加入單一媒體，檢查等效資訊 | 人工 |
| 1.2.2 | A | 條件 | 逐段核對預錄影音字幕 | 人工 |
| 1.2.3 | A | 條件 | 盤點影片視覺資訊與替代內容 | 人工 |
| 1.2.4 | AA | 條件 | 若有直播，檢查即時字幕流程 | 人工 |
| 1.2.5 | AA | 條件 | 核對預錄影片口述影像需求 | 人工 |
| 1.3.1 | A | 必測 | 對照視覺分組與可及樹 | 混合 |
| 1.3.2 | A | 必測 | 關閉 CSS 後巡讀首頁內容 | 人工 |
| 1.3.3 | A | 必測 | 校對說明文字能否獨立理解 | 人工 |
| 1.3.4 | AA | 必測 | 裝置橫向與直向實測 | 人工 |
| 1.3.5 | AA | 條件 | 若收集個人資料，核對欄位 autocomplete | 混合 |
| 1.4.1 | A | 必測 | 去色後辨識選取與錯誤 | 人工 |
| 1.4.2 | A | 條件 | 盤點自動音訊與控制入口 | 人工 |
| 1.4.3 | AA | 必測 | 保存文字／背景配對與計算結果 | 混合 |
| 1.4.4 | AA | 必測 | 200% 文字縮放截圖與操作 | 人工 |
| 1.4.5 | AA | 必測 | 盤點圖片中文字與必要性 | 人工 |
| 1.4.10 | AA | 必測 | 320 CSS px 及 400% 縮放操作 | 混合 |
| 1.4.11 | AA | 必測 | 核對控制、圖示、狀態的顏色配對 | 混合 |
| 1.4.12 | AA | 必測 | 注入文字間距覆寫後巡檢 | 人工 |
| 1.4.13 | AA | 條件 | tooltip／浮層的離開、停留與關閉 | 人工 |
| 2.1.1 | A | 必測 | 全程不使用滑鼠完成主要流程 | 人工 |
| 2.1.2 | A | 必測 | 每個可聚焦區域測進入／離開 | 人工 |
| 2.1.4 | A | 條件 | 單字元快捷鍵盤點與關閉測試 | 人工 |
| 2.2.1 | A | 條件 | 逾時前後完整流程紀錄 | 人工 |
| 2.2.2 | A | 條件 | 自動輪播、更新與動態控制測試 | 人工 |
| 2.3.1 | A | 必測 | 盤點所有動畫與影片閃動 | 人工 |
| 2.4.1 | A | 必測 | 跳至主要內容實測 | 混合 |
| 2.4.2 | A | 必測 | 核對每個畫面的 document.title | 混合 |
| 2.4.3 | A | 必測 | 記錄 Tab 序列與視覺順序 | 人工 |
| 2.4.4 | A | 必測 | 脫離視覺位置檢查連結目的 | 人工 |
| 2.4.5 | AA | 條件 | 若形成多頁集合，盤點替代尋路方式 | 人工 |
| 2.4.6 | AA | 必測 | 標題／標籤內容審閱 | 人工 |
| 2.4.7 | AA | 必測 | 每個互動控制的焦點截圖 | 人工 |
| 2.4.11 | AA | 必測 | 固定導航、抽屜與縮放下巡行焦點 | 人工 |
| 2.5.1 | A | 條件 | 若有複雜手勢，測替代控制 | 人工 |
| 2.5.2 | A | 必測 | 按下後拖出再放開的取消測試 | 人工 |
| 2.5.3 | A | 必測 | 比對可見標籤與 accessible name | 混合 |
| 2.5.4 | A | 條件 | 若有動作感應，測替代操作及關閉 | 人工 |
| 2.5.7 | AA | 條件 | 若有拖曳，測不拖曳操作 | 人工 |
| 2.5.8 | AA | 必測 | 保存目標矩形尺寸／間距與例外理由 | 混合 |
| 3.1.1 | A | 必測 | 核對 html lang 與主要內容 | 混合 |
| 3.1.2 | AA | 必測 | 盤點混合語言段落 | 人工 |
| 3.2.1 | A | 必測 | 聚焦每個控制並記錄副作用 | 人工 |
| 3.2.2 | A | 必測 | 改變篩選／輸入時檢查預期性 | 人工 |
| 3.2.3 | AA | 條件 | 比較每頁導航順序 | 人工 |
| 3.2.4 | AA | 必測 | 比較重複圖示／動作命名 | 人工 |
| 3.2.6 | A | 條件 | 比較跨頁協助入口位置 | 人工 |
| 3.3.1 | A | 條件 | 觸發表單錯誤並記錄訊息 | 人工 |
| 3.3.2 | A | 必測 | 核對搜尋／篩選標籤與說明 | 混合 |
| 3.3.3 | AA | 條件 | 核對修復錯誤的提示是否可用 | 人工 |
| 3.3.4 | AA | 條件 | 若有重大資料操作，測確認／撤回 | 人工 |
| 3.3.7 | A | 條件 | 完整流程重複輸入盤點 | 人工 |
| 3.3.8 | AA | 條件 | 若有登入，測密碼管理器與貼上 | 人工 |
| 4.1.2 | A | 必測 | 核對可及樹中的名稱、角色與狀態 | 混合 |
| 4.1.3 | AA | 必測 | 螢幕閱讀器實測搜尋結果更新 | 人工 |

### 關鍵量測設定

- 文字對比：一般文字至少 4.5:1；大字至少 3:1，大字門檻依正式定義判定，不能將一般 18 px 字視為大字。[官方對比說明](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
- 重排：一般垂直捲動內容在等效 320 CSS px 寬度檢查；必要二維內容的例外只能限於該內容，不能讓整頁免測。[官方重排說明](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)
- 文字間距覆寫：行高 1.5 倍、段距 2 倍、字距 0.12 倍、詞距 0.16 倍，依語言適用性檢查資訊與功能是否遺失。[官方文字間距說明](https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html)
- 目標尺寸：AA 的基本門檻為 24 × 24 CSS px，規格含間距等例外；每次採用例外都記錄理由。44 px 是本案推薦值，不假稱 AA 統一要求。[官方目標尺寸說明](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- 焦點：AA 要求焦點不被作者建立的內容完全遮住；本案再提高為主要控制可完整辨認。[官方焦點遮蔽說明](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)

## 4. 元件契約與狀態控制

每個元件都必須有名稱、用途、語意標記、變體、尺寸、資料欄位、鍵盤、狀態、響應式規則、tokens、驗收案例與限制。未出現的狀態標示 N/A 及原因，不為了填表製造假互動。

| 元件 | 必要語意與操作 | 必須展示／驗證的狀態 |
| --- | --- | --- |
| 頁首／導航 | header、nav、清楚名稱；目前位置 aria-current；導航連結不偽裝成 menuitem | 預設、hover、focus、目前頁、窄螢幕展開／收合 |
| 連結／按鈕 | 導航用 a；動作用 button；不可巢狀互動 | 預設、hover、focus-visible、pressed、disabled（適用時） |
| 主題篩選 | 可切換的 filter 可用 button + aria-pressed；若是真 tabs 才採 tablist 契約 | 未選、已選、focus、空結果、重設 |
| 搜尋欄位 | 可見 label、搜尋用途、清除按鈕名稱、結果數公告 | 空白、輸入、focus、有結果、無結果；非同步才需 loading／error |
| 內容卡片 | 標題階層一致；點擊目的一致；縮圖與文字不重複朗讀 | 預設、hover、focus、圖片失敗、長標題 |
| 展開／收合 | button + aria-expanded；控制的內容有穩定 ID | 收合、展開、focus；收合後不能把焦點留在隱藏內容 |
| Modal／行動抽屜 | 只有確實阻止背景互動時才標示 modal；有標題與關閉按鈕 | 開啟、內部 Tab 循環、Esc、關閉後焦點返回 |
| 状態訊息 | 一般更新採溫和的 live region；錯誤不僅靠顏色 | loading、empty、error、success 各自有文字與後續動作 |
| 頁尾 | footer、分組標題與有效連結 | 預設、focus、窄螢幕重排 |

互動模式依 [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)、[Modal Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) 與 [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) 指引適用選取。真 tabs 應有對應 panel、選取狀態與方向鍵移動；篩選按鈕沒有 panel 切換關係時，不套 tab 角色。原生 dialog 的焦點與關閉行為仍須跨瀏覽器實測，不能只因使用原生元素便標通過。

disabled 原生控制不納入 Tab；若採 aria-disabled 保留可探索性，必須另行阻止滑鼠與鍵盤啟動。載入期間避免重複送出並保留有意義的名稱。hover 不可成為唯一資訊入口。狀態切換不應突然改變控制尺寸或焦點位置。

## 5. Tokens 交換與單一來源

依 [DTCG 2025.10 Format](https://www.designtokens.org/TR/2025.10/format/) 保存 JSON token，使用 `$type`／`$value` 與必要說明、合法值與可解析別名；檔名建議 `.tokens.json`。本案採用明確的格式版本；不得把正在編輯的 drafts 當成已固定的基線。格式檢查應識別無效型別、斷裂別名及循環參照。

以下是本案自訂架構，並非 DTCG 強制命名：

```text
01 primitives：色階、字型、字級、間距、圓角、時間
02 semantic：canvas、surface、text、border、focus、action、status
03 component：button、card、navigation、search、dialog
04 output：CSS variables 與元件樣式
```

原始 tokens → 產生 CSS → 元件引用，建立一個可重跑的產生指令；避免兩份數值手動同步。抽取來源、信心、偏差、版本放 sidecar metadata 或 `$extensions`，不把未知欄位塞入標準型別。展示頁需能讀取同一 token 來源。修改語意 token 要同時檢查所有使用它的狀態，不能只看首頁。

## 6. 本案版本與發布治理

Q0–Q7 為品質門檻，與 harness 的 G0–G5 流程階段分開：G4 獨立 review 必須檢查 Q0–Q6 的證據與未通過項；G5 人類確認若涉及發布，還必須通過 Q7。G4 可核可本機 staging，仍須清楚保留 Q4 無障礙完整驗證與 Q6 人類驗收等未結項目，不等同 AA 或發布通過。

| 門檻 | 必要產物 | 通過條件 | 失敗處理 |
| --- | --- | --- | --- |
| Q0 來源 | 網址、擷取資訊、截圖／樣式證據 | 實測與推估可辨識；資產來源可追溯 | 缺證據維持候選 |
| Q1 結構 | token JSON、元件清單、頁面實作 | 解析、別名、build／靜態檢查通過 | 阻止升級狀態 |
| Q2 視覺 | 三種主 viewport 並排證據 | 主區域對照有結論；差異有說明 | 修正或保留未通過 |
| Q3 操作 | 主要流程、鍵盤、錯誤／空狀態紀錄 | 無阻斷流程或鍵盤陷阱 | P0／P1 不得關閉為通過 |
| Q4 無障礙 | 自動報告＋上列逐項人工結果 | 適用項無未解決失敗；N/A 有理由 | 不聲稱 AA 符合 |
| Q5 可重現 | 啟動指令、依賴、方法副本 | 在明示環境可重新執行；紀錄檔完整 | 標記依賴或環境限制 |
| Q6 人類驗收 | 使用者對畫面與用途的決定 | 明確收到接受；若未收到保持候選 | 不自行升級已確認 |
| Q7 對外發布 | 明確授權及實際部署證據 | 授權、部署成功、線上驗證均存在 | 本機可用不代表已發布 |

版本建議：patch 修錯但不改公開元件契約；minor 新增向下相容的元件或 token；major 改名、刪除或破壞行為。v01 是實驗版本，尚未承諾正式穩定 API。每次變更附原因、影響、替代方式與回復路徑；先建立新版本，保留來源證據。

驗收紀錄欄位：`case_id / source_SC / page / viewport / state / browser_version / assistive_technology / date / method / expected / actual / result / evidence_path / reviewer / unresolved_issue`。result 只允許 PASS、FAIL、NOT_TESTED、N/A，不能把缺失證據改成 PASS。負責人與日期採實際執行資訊，未指定則不虛構。

## 7. 本次尚待整合 QA 的人工項目

本文件完成的是控制規範與一手來源研究，本分工沒有操作原型或執行無障礙測試。因此矩陣不含任何已通過宣稱。主工作流程應在驗證檔逐項填入：

1. 鍵盤從首頁進入、搜尋、篩選、開啟／關閉內容、返回起點。
2. macOS Safari + VoiceOver 實測；其他平台／螢幕閱讀器未測須列明，不能推廣為全平台通過。
3. 320 px、200% 文字縮放、400% zoom、文字間距覆寫及橫向畫面。
4. forced-colors、高對比設定與 reduced-motion；此處同時含本案韌性要求，不能全部混稱 AA 獨立條款。
5. 每個互動狀態的可及名稱、焦點、contrast；特別檢查固定頁首遮擋。
6. 顯示原站和重建版的同尺寸證據，交由使用者決定美感是否接受。

完成上述檢查後，最多只能按證據寫「已檢查的範圍通過／存在缺失」。要正式宣稱 WCAG 2.2 AA 符合，仍須確認所有適用 A／AA、完整頁面／流程、技術支援與不干擾要求，清楚列出聲明範圍。自動化零錯誤、Lighthouse 高分、token 格式合法與畫面相近，彼此都不能替代。