如何让切换按钮支持空格键和回车键键盘操作-html教程-PHP中文网

本文介绍如何使用语义化元素配合 aria-pressed 实现符合无障碍标准的可键盘操作切换按钮，确保用户可通过 Tab 键聚焦、Space/Enter 键触发切换，并保持视觉状态同步。

本文介绍如何使用语义化 `

在构建可访问的 UI 组件时，仅依赖 + 的“伪切换”方案存在固有缺陷：原生 checkbox 本身不响应 Space/Enter 键（除非被显式聚焦且为 role="switch" 或 role="checkbox" 并正确处理事件），而默认不可聚焦（需手动加 tabindex="0"）且无内置键盘交互逻辑。更关键的是，该模式无法向屏幕阅读器准确传达“这是一个可切换的状态按钮”，违反 WCAG 2.1 原则。

推荐方案：改用语义化

aria-pressed 是专为切换按钮（toggle button）设计的 ARIA 属性。当 role="button" 元素同时拥有 aria-pressed（值为 "true" 或 "false"）时，辅助技术会将其识别为状态可切换的控件，并自动支持 Space 和 Enter 键触发 —— 这正是浏览器对原生

以下是完整、可直接使用的实现：

✅ HTML 结构（语义清晰，开箱即用）

<button id="toggle" type="button" aria-pressed="false" aria-label="切换为月付价格">
  <span class="toggle-inner"></span>
</button>

type="button" 防止表单意外提交；
aria-label 提供明确的可访问名称（替代 alt 或隐藏文本），屏幕阅读器将朗读“切换为月付价格，未按下”；
内部作为滑块容器，便于 CSS 控制视觉反馈。

✅ JavaScript 逻辑（简洁可靠）

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

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

  // 切换状态
  toggleBtn.setAttribute("aria-pressed", !isMonthly);

  // 更新价格内容
  if (isMonthly) {
    basic.textContent = "199.99";
    professional.textContent = "249.99";
    master.textContent = "399.99";
  } else {
    basic.textContent = "19.99";
    professional.textContent = "24.99";
    master.textContent = "39.99";
  }
}

// 直接监听 click 即可 —— Space/Enter 自动触发 click 事件
toggleBtn.addEventListener("click", toggleContent);

⚠️ 注意：不要监听 keydown 或 keypress。原生

✅ CSS 样式（状态驱动，平滑过渡）

#toggle {
  background: #e0e0e0;
  width: 4.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 2rem;
  padding: 0;
  cursor: pointer;
  position: relative;
  outline: none; /* 由:focus-visible 更优雅地控制焦点样式 */
}

#toggle:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.toggle-inner {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 2rem;
  height: 2rem;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

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