构建无障碍开关控件

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

在 <input type="checkbox" switch> 上使用 HTML switch 属性，并关联 <label>，以构建一个保留原生表单提交、键盘导航和屏幕阅读器语义的二进制开关切换开关（请参阅设置复选框样式和表单）。

Markup

将布尔值 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 属性是渐进增强。不支持此属性的浏览器会忽略它，并使用其默认界面颜色。