打造無障礙切換控制項

網頁功能： <input type="checkbox" switch> accent-color

在 <input type="checkbox" switch> 上使用 HTML switch 屬性，並搭配相關聯的 <label>，建構二進位開啟/關閉切換鈕，保留原生表單提交、鍵盤導覽和螢幕閱讀器語意 (請參閱「設定核取方塊樣式」和「表單」)。

標記

在標準核取方塊輸入中加入布林值 switch 屬性：

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>
  • 標籤可以包裝輸入內容，或與 for/id 建立關聯。所有樣式都以輸入內容為目標，因此不取決於標籤結構。
  • 勾選後，輸入內容會提交標準核取方塊值。在 JavaScript 中，監聽 change (或 input) 事件並讀取 .checked，而非 .value。

樣式

使用 accent-color 自訂控制項的醒目顯示顏色 (請參閱「品牌一致的表單」)，並確保焦點樣式清晰可見：

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

備用策略

切換控制的備用方案和瀏覽器支援

如果基準目標不支援 <input type="checkbox" switch>，請只在 'switch' in HTMLInputElement.prototype 為 false 時載入 input-switch-polyfill。請勿無條件載入 Polyfill。polyfill 會設定 role="switch"、套用切換鈕樣式 (appearance: none)、同步處理計算出的 accent-color，以及提供指標拖曳支援，藉此強化具有 switch 屬性的核取方塊。

請根據專案採用適當的套件載入方式。以下範例假設您的設定可以解析模組指定碼：

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

accent-color 的備用方案和瀏覽器支援

accent-color 屬性是漸進增強。不支援這項屬性的瀏覽器會忽略該屬性，並使用預設的使用者介面顏色。