自訂核取方塊樣式只有在底層 input 保留其原生瀏覽器行為時才能維持無障礙性 — 請保留 focus-visible 外框、label 巢狀結構，以及 input type="checkbox" 不變動，並在貼上程式碼前驗證每一個顏色與尺寸。導致表單損壞的最快途徑，就是把 CSS Checkbox Generator 當成已完成元件，而不是一個受控的起點。頁面上每個設定都有記載明確範圍：size 16–64 px、border 1–6 px、radius 0–50%，以及三個顏色各自嚴格的六位數 HEX。任何超出這些範圍的值都會被拒絕，因此輸出絕不會包含靜默運算錯誤的幾何或格式錯誤的顏色值。產生作業在你目前的瀏覽器分頁中進行，沒有上傳、帳號或儲存狀態。輸出會保留 input 元素、可見的 label，以及勾選狀態的背景，讓瀏覽器仍掌握勾選切換、鍵盤啟動與表單參與。最常見的錯誤不是程式寫錯，而是略過驗證步驟：忘了替換範例 label 文字、移除 focus-visible 外框、送出在目的佈景主題中對比失敗的顏色，以及從未在 200% 縮放或強制色彩模式中測試表單。請把這個頁面當成實際稽核之上的預覽圖層，真正的稽核仍須自行執行。
破壞原生表單控制項的錯誤
用 div 取代 input 是代價最高的錯誤，因為產生器所保留的每一項瀏覽器功能都會隨那次替換而消失。工具使用 ::after 偽元素繪製勾號，依方框大小縮放，且僅在 input 處於勾選狀態時呈現 — 整個設計仰賴一個真實的 input。若你在框架中把標記改寫為 <div class="checkbox"> 而失去原生元素，你也會失去鍵盤焦點、Space 鍵啟動、:checked 偽類、表單值，以及你實際產品所需的任何 disabled、required 或 invalid 樣式。
label 關聯是第二個靜默的失敗點。範例 HTML 將 input 巢狀置於 <label> 內,如此一來點擊可見文字即可切換控制項,且 checkbox 會獲得可存取名稱。移除該巢狀,或讓 label 在正式環境中仍顯示為 "Checkbox",會產生一個螢幕閱讀器朗讀時毫無意義的控制項。請務必重新命名 label 以描述實際選項 — "I agree to the terms"、"Subscribe to the newsletter"、"Enable dark mode"。
focus-visible 外框是人們會移除的第三道防護。產生器內含一個與所選強調色相符的焦點外框,並帶有偏移以清楚浮現於背景之上。鍵盤使用者需要它來辨識哪個控制項會回應 Space 鍵。若你的目的頁面有不同的表面顏色,請變更外框顏色與寬度以滿足周遭對比 — 不要刪除該規則。
其他常見的疏失:
- 在 label 上包裝 click 處理函式並對 input 呼叫 preventDefault — 這會破壞原生切換行為。
- 在 input 上設定 pointer-events: none — 點擊方框在某些瀏覽器中將失效。
- 忘了 box-sizing: border-box(已內建於輸出)— 若加以取代,可能讓邊框把可見尺寸推過 64 px。
- 在下游把 appearance: auto 加回 input — 勾號偽元素與勾選填色都會消失。
無法通過無障礙檢查的色彩選擇
頁面上的每個顏色都是嚴格的六位數 HEX,而三種角色各自獨立。強調色驅動焦點外框與勾選邊框;背景色在勾選狀態下填滿方框;勾號色則疊加於該填色之上。在預覽畫布上看起來合適的顏色,不等同於在你的實際表單背景上通過對比的顏色。
常見的錯誤模式是選了一個在白底頁面上好看的背景填色,然後把程式碼貼到深色佈景主題中,結果未勾選的邊框消失了。請用最終組合,對核取方塊實際所在的表面執行對比檢查,並確認勾號對背景的組合同樣通過你設計系統所使用的門檻。Color Contrast Checker 直接以 HEX 值運作,因此你可以直接貼上產生器的精確六位數輸出,而非憑猜測。
強制色彩模式是第二個陷阱。作業系統與瀏覽器可能會為了使用者無障礙而覆寫自訂顏色。產生器不會模擬該模式,你也不應該為了維持設計的完美而用媒體查詢抑制它。請確認核取方塊在強制色彩下仍能傳達勾選、未勾選與焦點;若作業系統提供的顏色對使用者更清晰,那就是正確的結果。
相關的錯誤是選擇低對比的勾號,使其僅在完整尺寸下看起來合適。勾號的筆畫寬度依方框大小縮放,並設有最小值以在 16 px 時仍可見。一旦低於支援範圍,或在你自己的樣式表中覆寫幾何,標記在小尺寸時可能完全消失。
幾何輸入與 Box-Sizing 陷阱
數值控制項設有限界是出於原因。Size 接受 16 到 64 的整數像素,border 1 到 6,radius 0 到 50%。小數值會被拒絕,因此產生器絕不會寫出 15.5px 或 border-width: 6.4px,這兩者在不同瀏覽器與縮放層級下都會產生不一致的呈現。若設計要求超出這些範圍的值,請先放大 size,或接受頁面所強制設定的刻意限制。
輸出包含 box-sizing: border-box,讓所選尺寸包含可見邊框。若在更具體的選擇器中覆寫該屬性而未重新計算寬度,將使視覺尺寸超出上限,並可能擾亂勾號比例 — 該比例與方框成正比,而非與內容區域成正比。
Radius 是百分比,因此 50% 會產生完全圓角的方形。超過 50% 並無實質作用 — 產生器會予以拒絕,而不會寫出無意義的值。若設計師想要橢圓形,他們需要的是矩形,而不是方形核取方塊。
| Control | Allowed range | What happens outside range |
|---|---|---|
| Size | 16–64 px (whole pixels) | Rejected; no output generated |
| Border | 1–6 px (whole pixels) | Rejected; no output generated |
| Radius | 0–50% | Rejected; no output generated |
| Each color | 6-digit HEX only | Rejected if malformed or wrong length |
勾號僅以右側與底部邊框繪製,旋轉 45 度,並使用比例式偏移。這些比例是刻意的產品選擇 — 頁面將其公開,以便視覺在支援的尺寸範圍內保持可預期。若你在下游樣式表中以自己的幾何取代它們,請在每個支援尺寸下驗證結果,而不是僅信任單一縮放層級下的視覺。
與 CSS Checkbox Generator 搭配的防禦性工作流程
依下列順序操作以避免上述錯誤。每個步驟皆假設 CSS Checkbox Generator 預覽已在目前分頁中開啟。
- 選定表面。決定核取方塊在正式環境中實際所在的顏色,而非工具預覽的背景顏色。若不確定,第一次先保留為白色,稍後再重新檢查對比。
- 先設定 size、border 與 radius。在 16 到 64 px 之間選擇方形尺寸,border 在 1 到 6 px 之間,radius 在 0 到 50% 之間。在挑選顏色前先鎖定這些,以便比例式勾號能依據最終幾何繪製。
- 選擇三個 HEX 顏色。設定強調色(驅動焦點外框與勾選邊框)、勾選狀態的背景填色,以及勾號顏色。請使用完整的六位數值 — 不接受 #fff 縮寫。若你有 RGB 值需轉換,RGB to HEX 工具可產生有效的六位數輸出。
- 切換即時預覽。點擊方框與預覽 label,操作勾選與未勾選狀態。使用 Tab 將焦點移入控制項,並用 Space 切換。若焦點外框消失,或勾選填色與強調色不一致,請先修正顏色再複製。
- 分別複製 CSS 與 HTML。Copy CSS 與 Copy HTML 按鈕會各自要求剪貼簿權限,並回報哪一個成功。若權限遭拒,兩個程式碼區塊仍保持可見以供手動選取 — 頁面絕不會回報假的成功。
- 替換範例 label 文字。將 <label> 元素內的可見 label 重新命名,以描述實際選項。請勿以 "Checkbox" 作為可見 label 部署表單。
- 貼入受控的樣式表。保留產生的 class 名稱,或予以一致地重新命名,但請勿移除 focus-visible 規則、原生 input type 或 label 巢狀結構。
- 在部署前於目的頁面上執行下列測試清單。
部署前的測試清單
內嵌預覽無法取代對實際表單的測試。工具頁面本身包含許多可聚焦的控制項,因此預覽中的 tab 順序並不反映應用程式中的 tab 順序。請在目的表單上執行以下清單:
- Tab 鍵將焦點移入核取方塊,並顯示 focus-visible 外框。
- Space 鍵切換勾選狀態。
- 點擊可見 label 文字可切換核取方塊。
- 螢幕閱讀器以 label 文字而非 "checkbox" 朗讀該控制項。
- 未勾選邊框與周遭表面之間的對比通過最低比例。
- 勾號與勾選背景之間的對比通過相同比例。
- 在 200% 縮放下,核取方塊仍可用,且焦點外框未遭裁切。
- 若有使用 disabled 狀態,需以獨立樣式呈現,且仍會朗讀為 "disabled"。
- 若有使用 invalid 或錯誤狀態,需在控制項旁附上文字與可見指示。
- 強制色彩模式保留勾選、未勾選與焦點資訊,而頁面不與作業系統抗衡。
What the Generator Doesn't Cover (and Why That Matters)
The baseline covers unchecked, checked, and focus-visible. It does not simulate indeterminate, invalid, required, read-only, high-contrast, or forced-colors. It does not include hover, disabled, or error styling. Those states exist in real forms and need their own rules in your stylesheet, with their own testing.
If your product needs disabled, error, or indeterminate states, plan them from the start. The guide on disabled and error states walks through what to add on top of the baseline output. The checklist for building a checkbox in CSS the right way covers the native semantics that the generator preserves and what you lose if you replace the input with a div.
Frameworks need light translation: class becomes className, and checked/onChange attach to the input rather than the generator's static markup. Keep the input, keep the label, keep the focus-visible rule.
The CSS appearance property the generator uses to suppress the browser's native drawing is documented at MDN's appearance reference and standardized in CSS Basic User Interface Level 4. If your downstream stylesheet re-enables native drawing, the checkmark pseudo-element and the checked fill will both disappear — that is a sign the override is fighting the output rather than extending it.
The page is best treated as a clean starting point: paste it into a controlled stylesheet, rename the class if needed, preserve the native semantics, and validate the complete form with real content and assistive technology before declaring it done.