CSS 勾選框產生器並未自帶鍵盤快捷鍵，因為整個介面是以一般網頁的形式，在目前的瀏覽器分頁中執行，這代表頁面上的每個控制項都會沿用主瀏覽器的預設鍵盤行為。在工具內部，您可以使用 Tab 與 Shift+Tab 在色彩選擇器、數值輸入框、複製按鈕以及預覽勾選框之間移動焦點，使用 Enter 或 Space 來觸發按鈕，並在數值欄位取得焦點後，用方向鍵來變更數值。預覽勾選框本身是一個真正的原生輸入框，所以 Tab 會將焦點移至其上，Space 則會切換其勾選狀態;這也是複製出來的 HTML 在您的表單中會保留下來的行為。產生器不會監聽全域組合鍵、即時預覽上的方向鍵微調，或任何修飾鍵快捷鍵，也不會從鍵盤模擬 disabled、invalid、required、indeterminate 或 forced-colors 模式。若需要這些狀態，合約內容相當明確:當產品需要時，請將這些狀態加入您自己的樣式表，然後對部署後的表單執行鍵盤檢查，而非對產生器頁面執行。簡而言之，輸出內容的鍵盤支援是有意且完整的，而工具本身的鍵盤快捷鍵則單純就是瀏覽器的預設值。
瀏覽器預設值就是您唯一需要的快捷鍵
由於產生與複製作業都在目前的分頁中進行，沒有任何覆蓋層或模態外殼，因此 CSS 勾選框產生器會將其色彩選擇器、大小、邊框與圓角輸入框公開為一般的表單元素。瀏覽器處理焦點、數值輸入與提交的方式，與在任何其他頁面上完全相同，所以純鍵盤使用者可以使用在所有地方都已能正常運作的按鍵，瀏覽整個工具:
- Tab 與 Shift+Tab 依 DOM 順序向前、向後移動控制項之間的焦點。
- 方向鍵 在原生色彩選擇器中循環切換選項，或在數值欄位取得焦點後，以整數為單位微調其值。
- Enter 與 Space 會在「複製 CSS」與「複製 HTML」按鈕取得焦點時啟用它們。
- Esc 會關閉瀏覽器的色彩選擇器對話框(在將其顯示為彈出視窗的系統上)。
上述這組預設行為就是完整的快捷鍵清單。該工具不會攔截或重新對應按鍵，因此螢幕閱讀器使用者、開關裝置使用者以及語音控制使用者，都能獲得與在任何標準表單上相同的體驗。
從鍵盤操作即時預覽
您在產生器中央看到的預覽勾選框，是使用與複製出來的 HTML 在您表單中會產生的同一個原生輸入框所繪製，因此它是該工具所能提供最接近真實情況的鍵盤預演。下列流程會逐步說明確認 Tab 與 Space 行為如預期時的正確順序。
- 反覆按下 Tab，直到焦點到達預覽勾選框。伴隨出現的 focus-visible 外框應會以您所選的強調色顯示。
- 按一次 Space，將輸入框切換為勾選狀態。由 ::after 偽元素繪製的勾選符號應會出現，背景也應切換為勾選狀態的顏色。
- 再按一次 Space 以清除勾選。預覽應會在不移除焦點的情況下，回到未勾選狀態的背景。
- 將焦點以 Tab 向前移至「複製 CSS」按鈕，並按下 Enter 或 Space，將樣式表寫入剪貼簿，然後在「複製 HTML」上重複相同動作以複製標記。
- 閱讀程式碼區塊下方出現的成功標籤，這樣在貼到您的專案之前，就能知道實際複製的是哪一組輸出。
如果焦點環不見了，或 Space 鍵完全沒有作用，問題幾乎一定是焦點實際上並未落在輸入框上，因為嵌入的頁面中含有許多可取得焦點的控制項。請繼續按 Tab，或在預覽上點擊一次，然後再繼續進行鍵盤測試。
產生的勾選框所保有的鍵盤控制項
對於「CSS 勾選框產生器使用哪些鍵盤控制項」這個搜尋，最重要的答案是:產生的控制項是一個完整的原生勾選框，保留了所有內建的鍵盤行為。CSS 僅透過 appearance: none 改變其視覺繪製方式，並不會將輸入框替換為 div，也不會移除瀏覽器所公開的語意。MDN 對此屬性有相關文件說明，並指出抑制使用者代理繪製本身並不會破壞互動功能。在您收到的程式碼中:
- Tab 會將焦點移至輸入框。
- Space 會在勾選與未勾選之間切換。
- 表單仍會在提交時送出輸入框的勾選值。
- :focus-visible 外框會被保留下來(以您的強調色加上位移來對應)，而非被抑制，如此鍵盤使用者隨時都能看到焦點所在。
- 伴隨的 <label> 代表點擊可見的文字會切換輸入框，同時該標籤也為輸入框提供了輔助技術所使用的可存取名稱。
這就是為何合約強調並未移除焦點的原因。一個隱藏焦點環的自訂勾選框，對鍵盤使用者而言是一種退步，無論其視覺風格多麼吸引人。
產生器不會從鍵盤模擬的狀態
產生器所產生的基準涵蓋未勾選、已勾選以及 focus-visible 三種狀態。其他狀態都必須在您自己的樣式表中設計並驗證，因為該工具刻意拒絕在未被要求的情況下，默默地為它未獲指示要繪製的狀態捏造程式碼。實際上，這代表產生器不會回應鍵盤輸入來預覽或測試下列項目:
- :disabled 狀態，包括隨附的降低對比以及 cursor: not-allowed 的提示。
- 由周圍表單所定義的 :invalid、:required 或 :read-only 狀態。
- :indeterminate 狀態，該狀態只能由父元件以程式方式設定。
- 作業系統的強制色彩，當使用者啟用高對比時，自訂調色盤會被其覆寫。
- 表單層級的驗證訊息以及 aria-describedby 錯誤文字。
在目的端樣式表中新增這些內容是一項獨立的工作，需要搭配自身的鍵盤檢查。請將此工具視為一個良好的起點，而非一個已完成的可存取表單。
快速參考:控制項與按鍵
下表摘要說明當工具開啟時，每次按鍵會落在何處，讓您隨時都能猜到焦點所在。
| 頁面上的控制項 | 鍵盤行為 |
|---|---|
| 色彩選擇器(強調色、背景、勾選記號) | Tab 進入焦點;方向鍵在色相環與飽和度區域中移動;Enter 或 Space 確認;Esc 關閉彈出視窗。 |
| 大小、邊框與圓角的數值輸入框 | Tab 進入焦點;方向鍵以 1 為單位調整;在大多數瀏覽器上，Shift 加方向鍵可以較大的幅度調整;產生器會拒絕小數與超出範圍的值。 |
| 即時預覽勾選框 | Tab 進入焦點;Space 在勾選與未勾選之間切換;點擊方塊或其標籤具有相同效果。 |
| 複製 CSS 按鈕 | Tab 進入焦點;Enter 或 Space 將樣式表寫入剪貼簿並顯示成功標籤。 |
| 複製 HTML 按鈕 | 與複製 CSS 相同;剪貼簿權限會另外要求，因此若權限遭到拒絕，兩個程式碼區塊仍會保持可見，而不是回報假的成功訊息。 |
| 程式碼區塊 | 純文字唯讀;Tab 與 Shift+Tab 會將焦點移過這些區塊，而不是編輯其內容。 |
每一列僅僅描述一個符合標準的瀏覽器，在充滿表單控制項的頁面上本來就會執行的動作。若您的建置流程或 CSS 框架新增了自訂焦點樣式，那些樣式會套用於產生器預設值之上。
在目的端表單中執行下列鍵盤檢查
一旦將程式碼片段貼入您真正的樣式表，並將範例標籤替換為能描述實際選項的標籤，合約就會要求您對部署後的表單驗證鍵盤體驗。一份簡短的檢查清單能讓測試保持誠實:
- 確認 Tab 能依預期的焦點順序到達您的勾選框，而非落在不相關的小工具或隱藏的控制項之後。
- 在已取得焦點的勾選框上按下 Space，並確認視覺狀態、表單值以及任何相關的摘要文字都會一起改變。
- 在您真實的背景與任何相鄰的文字上檢查 focus-visible 外框。強調色可能需要變更，才能在實際頁面上通過對比要求。
- 在 200% 縮放以及啟用瀏覽器強制色彩設定下進行測試，然後決定要抑制或遵循該覆寫。
- 以鍵盤操作 disabled 與 invalid 狀態，以確認其能被正確宣告，且焦點不會落在已停用的選項上。
產生器提供給您的是一個帶有樣式繪製並保留下焦點環的原生輸入框，除此之外的一切都是交付時的決策。若您希望更深入了解目的端的檢查流程，請參閱這份 css-checkbox-generator-output-a-native-control 指南。請將此工具視為一個乾淨的起點，將其貼入受控的樣式表，保留原生語意，並以真實的輔助技術驗證實際的表單。
如果您正在權衡各種選項，CSS 三次貝茲曲線產生器能給您什麼結果對此有詳細說明。