HTML中role设为switch怎么做开关组件-html教程-PHP中文网

必须用原生而非role="switch"，仅当无法使用原生控件时才手动实现；role="switch"需严格配齐aria-checked、tabindex="0"及键盘事件监听，否则无障碍功能失效。

html中role设为switch怎么做开关组件

用 `role="switch"` 前必须确认你不用原生 `<input type="checkbox">`

直接用 <input type="checkbox"> 是最安全、最无障碍的开关实现方式——它自带 role="checkbox"、自动同步 aria-checked、支持空格键切换、能被表单提交捕获。只有当你**无法使用原生 checkbox**（比如设计要求滑块必须是纯 div + span，且不能包裹 input），才考虑手动实现 role="switch"。强行给 <input type="checkbox"> 加 role="switch" 会覆盖原生语义，导致屏幕阅读器误报“开关”，但空格键失效、状态不同步、表单不提交。

`role="switch"` 必须配齐三要素：状态、焦点、键盘响应

只写 role="switch" 等于没写。辅助技术看到这个 role，就默认这是一个可交互的开关控件，但若缺少以下三项，它只会读作“开关”，不报状态、无法聚焦、按空格无反应：

aria-checked="true" 或 "false" —— 动态反映当前开/关状态，不能靠 class 或 data-* 属性代替
tabindex="0" —— 让元素可被键盘聚焦（不能用 tabindex="-1"）
监听 keydown 事件，对 Space 键触发状态翻转，并同步更新 aria-checked 和视觉样式

示例结构：

<div role="switch" aria-checked="false" tabindex="0">
  <span class="switch-track">
    <span class="switch-thumb"></span>
  </span>
</div>

注意：该 div 不能有 aria-label 或 aria-labelledby 缺失——必须提供明确名称，例如 aria-label="启用深色模式"。

视觉隐藏原生 input 时，别用 `display: none` 或 `visibility: hidden`

如果你选择“视觉上用 div 实现滑块，但背后仍保留原生 <input type="checkbox">”（推荐做法），那原生 input 必须保留在 DOM 中、可聚焦、可被 AT 暴露：

Switch Modes

动态切换AI模型以优化成本与性能。当用户发出“eco mode”、“balanced mode”、“smart mode”或“max mode”等模式指令，或使用“/modes status”查询状态及“/modes setup”配置模式时触发。

下载

✅ 正确隐藏方式：position: absolute; opacity: 0; width: 1px; height: 1px; —— 元素仍在 tab 序列中，状态变更自动广播
❌ 绝对禁用：display: none、visibility: hidden、aria-hidden="true" —— 屏幕阅读器完全感知不到控件
❌ 不要加 tabindex="-1" —— 它会破坏原生 tab 顺序，且让空格键失效

此时外层 label 的 for 必须严格匹配 input 的 id，大小写敏感；不要用 aria-labelledby 替代真实 <label></label>，否则点击 label 不触发 input、也不触发表单提交。