手風琴 UI 系統 是做什麼的？
目的
手風琴 UI 系統技能提供了一套設計與建構手風琴的方法——也就是將可點擊的標題列堆疊起來，點擊後會展開顯示相關內容。這種模式對於漸進式揭露至關重要，讓使用者可以快速瀏覽高層級資訊，並自行選擇要閱讀哪些細節。系統化的手風琴設計方針能確保它在不隱藏關鍵資訊或造成無障礙障礙的情況下，降低認知負擔。
使用場景
- 常見問題區塊： 將大量的問題與答案組織成易於掃讀的清單。
- 行動選單： 收合次要導覽項目以節省垂直空間。
- 複雜表單： 將相關的表單欄位分組為可切換的區塊。
- 產品詳細資訊： 在電子商務頁面中隱藏技術規格、運送資訊或評價。
- 篩選功能： 在探索側邊欄中管理多個面向群組。
何時不應使用
- 內容量少： 如果總內容很短，將它藏在點擊背後會增加不必要的互動成本。
- 關鍵指示： 如果使用者必須閱讀資訊才能繼續（例如法律警告或「操作步驟」），請勿隱藏。
- 搜尋密集型頁面： 如果使用者頻繁使用瀏覽器的「尋找」（Cmd/Ctrl+F）功能，隱藏在手風琴內的內容通常無法被預設搜尋到。
- 單一項目揭露： 如果只有一段內容需要切換，請改用簡單的「顯示更多」連結或單一揭露元件。
輸入
- 內容清單： 一組標題及其對應的展開內容。
- 展開邏輯： 一次只能開啟一個項目（獨佔式），還是可以同時開啟多個？
- 觸發情境： 手風琴將被放在哪裡？（例如主要內容區、側邊欄或行動抽屜）
- 既有系統： 來自母公司設計系統的流暢間距與字級比例。
輸出
- 手風琴結構規格： 針對標題、圖示、面板與間距的視覺定義。
- 互動規格： 展開、焦點狀態與轉場的行為定義。
- 無障礙設計藍圖： ARIA 角色、狀態與鍵盤對應。
- 響應式策略： 手風琴如何在窄視口中適應的規則。
工作流程
1. 建構內容結構
定義手風琴項目的標準組成部分：
- 標題（觸發器）： 可點擊的區域，包含標題。
- 圖示（提示）： 通常是一個 chevron 或加/減號，用來表示可展開性。
- 面板： 容納隱藏內容的容器。
- 群組： 管理多個項目之間關係的父容器。
2. 建立視覺提示
套用 visual-hierarchy-system 以確保手風琴是可識別的：
- 狀態指示器： 使用圖示（chevron），在手風琴開啟時旋轉或改變。
- 分隔： 使用邊框、背景顏色變化或垂直間距（來自
fluid-spacing-system）來區分項目。 - 標題： 確保標題文字看起來可互動（較高的字重或不同的顏色）。
3. 定義互動邏輯
選擇行為模式：
- 獨佔式（單一開啟）： 開啟一個項目會自動關閉其他項目。最適合保持焦點與減少頁面長度。
- 多重開啟： 可以同時保持多個項目開啟。最適合使用者需要跨區塊比較資訊時。
- 預設狀態： 決定是否預設開啟第一個項目，以提示使用者此功能的存在。
4. 針對間距與內容進行最佳化
將 fluid-spacing-system 套用至內部：
- 標題內邊距： 確保觸碰目標至少為 24x24px（WCAG 2.2 SC 2.5.8 最低要求）；若版面允許，建議使用 44x44px 以獲得舒適的觸控體驗。
- 面板內邊距： 使用內部間距來建立標題與其內容之間的清晰關係。
- 轉場動畫： 使用細微的高度或透明度轉場（200-300ms）來柔化內容出現時的「跳躍感」。
5. 驗證無障礙性與響應式設計
- 鍵盤： 使用者必須能夠使用
Tab鍵導覽到標題，並使用Enter/空白鍵來切換，遵循 ARIA APG 手風琴模式。 - ARIA： 將每個觸發器包在標題元素中（
<h3><button aria-expanded="true/false" aria-controls="panel-id">...</button></h3>），並在面板包含大量內容時，為面板設定role="region"並使用aria-labelledby指向觸發器。 - 行動裝置： 確保長標題能優雅換行，不會與圖示重疊。
決策規則
- Chevron 規則： 務必在標題右側包含一個視覺指示器（例如 chevron）。關閉時朝下，開啟時朝上。
- 第一個項目規則： 如果第一個手風琴項目包含最重要或最常被查詢的資訊，則預設開啟它。
- 文字截斷： 永遠不要截斷手風琴標題。如果標題很長，讓它換行到多行，以確保清晰。
- 對齊： 保持展開/收合觸發圖示一致（通常靠右對齊），以建立可預測的掃讀路徑。
限制條件
- 無障礙性： 標題必須使用語意化標題標籤（H2-H4），其中包含
<button>以便鍵盤操作；符合 WCAG 2.2 SC 2.5.8 的最小目標尺寸（24x24px）。 - 響應式設計： 手風琴寬度應為流暢（父容器的 100%）。面板內容必須完全響應。
- 層級結構： 手風琴標題的視覺重要性不得高於頁面的 H1。
常見失敗模式
- 謎樣觸發器： 手風琴標題看起來像純文字，讓使用者不知道可以點擊。
- 內容跳躍： 快速、突兀的轉場動畫讓使用者的滾動位置感到困惑。
- 缺少焦點狀態： 忘記設計可見的焦點環給鍵盤使用者。
- 面板內容過多： 在面板內放入過多複雜的互動內容（例如其他手風琴），導致「巢套地獄」。
- 不可用的 ARIA： 未能透過程式更新
aria-expanded狀態。
驗證標準
- 每個手風琴項目都有清晰的視覺指示器（例如 chevron）。
- 標題可透過鍵盤操作（基於按鈕），並有可見的焦點狀態。
-
aria-expanded與aria-controls已正確定義。 - 內部間距遵循流暢間距系統。
- 獨佔式/多重開啟邏輯適合內容類型。
- 手風琴轉場流暢，不破壞版面。
- 觸碰目標符合 WCAG 2.2 最小尺寸 24x24px（建議 44x44px）。