以 appearance: none 樣式化處理的原生 HTML 核取方塊，是所有無障礙 CSS 切換開關的共同根基，而 CSS 切換開關產生器正是直接建構在那個核取方塊之上，因此勾選狀態、空白鍵啟動、聚焦以及表單送出都能在不額外撰寫腳本的情況下正常運作。上一段第一句話就是整個第一次使用的核心觀念:不是從一個 div 與 ARIA 屬性開始，而是從一個真正的表單控制項與視覺包裝層開始。產生器會詢問你七個項目——軌道寬度、軌道高度、內部邊距、轉場持續時間、關閉顏色、開啟顏色以及旋鈕顏色——並依據這些輸入計算剩餘的幾何尺寸(旋鈕直徑與 translateX 移動距離)。所有運算都在瀏覽器本機執行，你的設定不會被上傳，而你複製的程式碼片段不含 JavaScript，因為基本的核取方塊狀態本來就不需要它。在你開啟工具之前，最有用的準備工作就是決定這個開關要代表哪個二元設定，因為程式碼片段預設帶有一個類似「Enable feature」的佔位標籤，必須在控制項對使用者具有意義之前替換成真實的文字內容。
標籤屬於輸入的一部分。產生器會把一個 type="checkbox" 的 input 元素巢狀嵌入在可見的 label 標籤中，因此整個標示區域都可點擊，該控制項會透過標籤文字取得無障礙名稱。如果移除或更名該標籤，螢幕閱讀器將失去這個開關的身分識別，鍵盤的操作範圍也會縮減到那個微小的核取方塊本身。請將標籤視為正式產品文案，而非開發者註解。
先決定你的開關要代表哪個二元設定
切換開關不是按鈕。一個開關應該模擬一個持續性的狀態，使用者可以開啟或關閉，而且應用程式會在多次造訪之間記住這個狀態。具體來說:「電子郵件通知」、「深色模式」、「兩因素驗證」、「自動儲存」、「顯示預覽」這些都是系統可以保存為 true 或 false 的設定。它們不是動作:「儲存」、「送出」、「刪除」、「發送邀請」應該維持為按鈕，因為按下它們會產生一次性效果，而不是狀態。
產生器的範例標籤寫著「Enable feature」，這刻意設計成通用形式，以便在任何專案中都能使用，但在正式環境中同樣刻意地毫無用處。請在複製 HTML 之前先決定真實的文字內容。標籤會成為控制項的無障礙名稱，也是視力正常讀者點擊的可見文字，因此相同的文字肩負雙重任務。如果該設定帶有使用者應該知悉的後果，請在標籤之外新增第二句說明或一行輔助文字，讓無論開關處於開啟或關閉狀態，後果都能被看見。
幾何輸入會被限制在有效範圍內
在你開始拖動滑桿之前，先了解產生器所強制執行的邊界會有所幫助。每個數值輸入都會拒絕超出範圍的值，且驗證器會阻止任何會產生負數旋鈕尺寸或旋鈕超出軌道的組合。例如，你無法要求一個 32 像素高的軌道搭配 20 像素的邊距，因為旋鈕將必須塞進負八像素的空間中。
| 輸入項目 | 接受的格式 | 範圍 | 控制內容 |
|---|---|---|---|
| 軌道寬度 | 整數像素 | 36 至 120 | 膠囊狀的總水平長度 |
| 軌道高度 | 整數像素 | 20 至 64 | 軌道直徑與移動高度 |
| 內部邊距 | 整數像素 | 2 至 8 | 旋鈕邊緣與軌道邊緣之間的間距 |
| 轉場持續時間 | 整數毫秒 | 0 至 2000 | 顏色與變形變化所共用的時間 |
| 關閉 / 開啟 / 旋鈕顏色 | 六位數十六進位 | 精確格式 | 各狀態下的軌道填色與旋鈕填色 |
寬度必須至少比高度多出八個像素，如此關閉與開啟的旋鈕位置才能在視覺上保持區隔。如果你將輸入推到接近極限，預覽會立即更新，讓你能看出幾何形狀仍像個開關，還是已經塌縮成滑桿。軌道使用等於高度一半的膠囊邊框圓角，旋鈕則使用其自身直徑的一半，因此兩端都會保持圓潤，無需你額外計算。
六個步驟產生你的第一個開關
完整的逐步工作流程記載於我們的完整教學中，但第一次使用濃縮為六個具體動作，從空白的瀏覽器分頁開始只需一兩分鐘即可完成。
- 在任何現代瀏覽器中開啟 CSS 切換開關產生器;無需安裝任何東西，也不會上傳任何內容。
- 設定軌道寬度(36 至 120 px)、軌道高度(20 至 64 px)以及內部邊距(2 至 8 px)，保持寬度至少比高度多 8 px，以便關閉與開啟位置保持區隔。
- 為關閉軌道、開啟軌道與旋鈕挑選三個六位數十六進位顏色;驗證器會拒絕簡寫、三位數或非十六進位的值。
- 以整數毫秒設定轉場持續時間，範圍從 0 至 2000;預覽會隨每次變更更新，讓你能同時看到靜止顏色與內插動畫。
- 點擊預覽軌道或佔位標籤以在關閉與開啟之間切換;確認旋鈕移動順暢，顏色變化讀來仍是同一個開關。
- 使用 Copy CSS 與 Copy HTML 取得同步的程式碼片段，接著將範例標籤「Enable feature」替換為你真實的二元設定，然後將標記貼入你的樣式表與模板中。
複製出來的 HTML 保留了巢狀嵌入於標籤內、type 為 "checkbox" 的 input 元素，而複製出來的 CSS 使用 appearance: none 來去除原生核取方塊的繪製。這對組合正是保留原生鍵盤操作、聚焦與表單送出的關鍵——以 div 加 CSS 的替代方案需要 ARIA 配接與 JavaScript 才能恢復相同的行為。在 React 中將 class 屬性重新命名為 className，或在 Vue 模板中將其繫結的框架使用者，應保持該語意化的 input 與 label 配對完整不變。
能夠在主題變更下存活的顏色選擇
三個十六進位輸入定義了關閉軌道、開啟軌道與旋鈕，但它們也必須能與真實的頁面背景共存。一個在預覽的白色畫布上搶眼的軌道顏色，在深色儀表板上可能會消失。兩條規則可以避免大部分的意外。
首先，將旋鈕顏色視為固定的對比目標。挑選一個旋鈕顏色，使其在關閉與開啟軌道上都能清楚辨識，因為旋鈕是疊在當前顯示的顏色之上。如果你找不到一個能同時適用於兩種狀態的顏色，將關閉軌道的顏色設定得較接近旋鈕顏色，讓開啟軌道負責提供明亮的確認效果。
其次，請記得 focus-visible 輪廓使用的是選定的開啟顏色，而且是偏移於軌道之外，而不是被移除。如果你的頁面背景與開啟軌道屬於相同色相，鍵盤使用者將看不到聚焦環。請變更頁面背景或變更開啟顏色;這個輪廓並非可供調整的獨立輸入。
產生器不做的事
你複製的程式碼片段僅包含呈現層。裡面沒有 JavaScript，因此視覺上的開關永遠不會對狀態說謊——當 checkbox 翻轉時，旋鈕與顏色會跟隨變化，因為 CSS 會監聽 checked 這個偽類別。產生的 CSS 中也沒有獨立的 hover、active、disabled、invalid、loading 或 read-only 處理，這代表正式環境的設定畫面仍須透過周圍文案、ARIA 或框架邏輯來傳達這些狀態。
如果底層的網路呼叫失敗，可見的開關仍會顯示新的位置，因為 CSS 只讀取 checkbox 屬性，而不讀取伺服器回應。請在 CSS 之外處理擱置中與錯誤狀態，而不是讓視覺控制項承諾一個並未實際保留下來的變更。這同樣適用於樂觀 UI:如果你的框架在失敗時將 checkbox 復原，CSS 將會追蹤復原後的狀態，而這正是你想要的結果。
貼上後請驗證無障礙性
貼上程式碼片段只是中點，而不是終點。在你出貨之前，有五項檢查應納入你的例行作業。
- 狀態措詞。確認開啟與關閉可透過顏色以外的方式區分，尤其是在相鄰文字未能讓狀態顯而易見之處。當後果至關重要時，請加入明確的「開 / 關」文字。
- 鍵盤操作。透過 Tab 鍵切換到該控制項，按下空白鍵，確認核取方塊翻轉且視覺狀態跟隨變化。
- 聚焦對比。請在真實的頁面背景下檢視聚焦環，而不是在產生器的預覽畫布上檢視。MDN 上關於 appearance 的參考文件記載了產生器所保留的原生核取方塊行為。
- 縮放與觸控目標大小。將頁面縮放至 200%，確認該控制項仍可點擊，且標籤仍維持關聯。
- 強制色彩與減少動畫。啟用 Windows 高對比或強制色彩模式，確認開關仍讀來像個開關。針對動畫部分，將產生器的持續時間設為 0，或在目的樣式表中加入一個 prefers-reduced-motion 覆寫，將 transition-duration 屬性設為 0s。W3C 的CSS Basic User Interface Level 4 規範定義了該程式碼片段所依賴的 appearance 切換屬性。
若想取得在整合過程中浮現的更深層失敗模式清單，產生 CSS 切換開關時應避免的錯誤指南彙整了在框架改寫中最常出現的問題。
快速參考:產生器負責的部分 vs. 你負責的部分
| 層級 | 由產生器處理 | 由你負責 |
|---|---|---|
| 軌道與旋鈕幾何 | 旋鈕直徑、translateX 移動、邊框圓角 | 在可接受範圍內選擇尺寸 |
| 顏色與動畫 | 十六進位輸入、轉場持續時間、緩動時序關鍵字 | 對比於真實頁面背景 |
| 原生互動 | 核取方塊狀態、空白鍵啟動、focus-visible 環 | 不破壞 React 或 Vue 中的 checked 與 change 繫結 |
| 表單整合 | 底層核取方塊值的送出 | 標籤名稱、fieldset 分群、錯誤與說明文字 |
| 狀態持久化 | 無——不儲存、不呼叫 API | 儲存設定、回報擱置中的作業、從失敗中復原 |
| 停用、載入中、唯讀 | 未產生獨立的呈現 | 透過文案與周圍 UI 傳達這些狀態 |
一旦這兩欄釐清後，首次使用的其餘體驗就只是嚴謹的選擇:挑選一個真實的二元設定、挑選一個適合你表單的幾何形狀、挑選能與你實際出貨的頁面形成對比的顏色，然後驗證該程式碼片段的行為，就像它底層的核取方塊一直以來所表現的那樣。