如何让切换按钮支持空格键和回车键键盘操作？

碧海醫心 2026-01-21 00:00:00 次阅读

通过将自定义切换控件重构为语义化 `

在 Web 可访问性（a11y）实践中，使用 + 模拟切换按钮虽能实现视觉效果，但无法原生响应键盘交互（如空格键/回车键），因为默认不接收键盘事件，且在非聚焦状态下也不会响应 keydown —— 即便手动添加 tabindex="0"，也违背了语义化原则，导致屏幕阅读器误读为“可聚焦的标签”，而非“可切换的按钮”。

✅ 正确方案：改用

✅ 推荐 HTML 结构（语义化 + 可访问）

⚠️ 注意：移除和，不再依赖隐藏复选框；type="button" 防止表单意外提交。

✅ JavaScript 控制逻辑（简洁可靠）

const toggleBtn = document.getElementById("toggle");
const basic = document.getElementById("basic");
const professional = document.getElementById("professional");
const master = document.getElementById("master");

function toggleContent() {
  const isPressed = toggleBtn.getAttribute("aria-pressed") === "true";
  const newPressedState = !isPressed;

  // 同步更新状态与 UI
  toggleBtn.setAttribute("aria-pressed", newPressedState);
  toggleBtn.setAttribute("aria-label", 
    newPressedState ? "切换为年付价格" : "切换为月付价格"
  );

  // 切换价格显示
  if (newPressedState) {
    basic.textContent = "19.99";
    professional.textContent = "24.99";
    master.textContent = "39.99";
  } else {
    basic.textContent = "199.99";
    professional.textContent = "249.99";
    master.textContent = "399.99";
  }
}

// ✅ click 事件已天然兼容键盘（Enter/Space）+ 鼠标
toggleBtn.addEventListener("click", toggleContent);

✅ CSS 样式示例（基于 aria-pressed 状态驱动）

#toggle {
  background: #e0e7ff;
  width: 4.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 2rem;
  padding: 0;
  cursor: pointer;
  position: relative;
  outline: none; /* 避免重复焦点环，可用 :focus-visible 替代 */
}

#toggle .toggle-inner {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 2rem;
  height: 2rem;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

#toggle[aria-pressed="true"] .toggle-inner {
  transform: translateX(calc(100% - 0.4rem));
}

/* 增强键盘焦点可见性（推荐） */
#toggle:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}