Web Accessibility 怎样给自定义按钮补键盘操作

如果一个 div 鼠标能点，但按 Tab 找不到、按 Enter 或 Space 没反应，它还不能算是可用的按钮。最稳妥的修复是改回原生 ；只有在结构确实受限时，才给自定义元素补上语义、焦点和键盘行为。要点是：role="button" 只说明“它是什么”，不会自动补齐点击、焦点或按键逻辑。

原生按钮优先；必须保留自定义元素时，至少同时具备可读名称、role="button"、tabindex="0"、可见焦点样式，以及 Enter 和 Space 对同一动作的处理。

官方资料入口：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role；WAI-ARIA 按钮模式：https://w3c.github.io/wai-website/ARIA/apg/patterns/button/。

先判断控件是否应该回到原生 button

提交表单、打开面板、关闭弹窗、执行删除或保存等命令，本质上都是按钮动作。原生 button 已经提供语义、Tab 焦点、Enter/Space 激活和浏览器默认交互，通常只需要补充样式与业务事件。

保存设置


前往设置页

如果视觉上需要一个链接样式，可以用 CSS 改变外观，不必牺牲元素原本的交互契约。只有当组件容器必须是 div、历史 DOM 结构暂时不能改动，或某个非原生控件确实承担按钮动作时，才进入下面的补齐流程。

自定义元素为什么只加 role 还不够

自定义元素默认不在 Tab 顺序里，role="button" 也不会自动让鼠标点击事件响应键盘。先补语义和焦点入口，再确保焦点样式可见；这里的 aria-label 只在没有可见文本时使用，有可见文本时优先保留文本作为名称。

保存设置

/* 自定义控件必须让键盘焦点在视觉上可见 */
.custom-button:focus-visible {
  outline: 3px solid #1d70f7;
  outline-offset: 3px;
}

/* 只有不可聚焦的装饰层才考虑 pointer-events，不要隐藏控件焦点 */
.custom-button[aria-disabled="true"] {
  opacity: 0.55;
}

不要用 tabindex="1" 或更大的正数强行改变页面顺序；复杂页面更容易因此出现跳跃焦点。一般交互控件使用 0，隐藏或暂时不可用的控件才从自然 Tab 路径中移除，并同步处理其真实状态。

让 Enter 与 Space 触发同一个动作

把业务动作集中到一个函数，再让鼠标点击与键盘事件都调用它，可以避免两套逻辑逐渐分叉。WAI-ARIA 按钮模式要求控件获得焦点后，Enter 和 Space 都能激活按钮；Space 还要阻止页面滚动。

const customSave = document.querySelector('#custom-save');

// 业务动作只保留一份，鼠标和键盘共用它，避免状态更新不一致。
function saveSettings() {
  document.querySelector('#save-result').textContent = '设置已保存';
}

// 鼠标点击沿用同一个动作入口。
customSave.addEventListener('click', saveSettings);

customSave.addEventListener('keydown', (event) => {
  // key 为 " " 表示 Space；按下 Space 时阻止页面滚动。
  if (event.key === ' ' || event.key === 'Enter') {
    event.preventDefault();
    saveSettings();
  }
});

这里使用 keydown 监听两个按键，并没有把 keyup 再绑定一次同样的动作，否则一次按键可能触发两次。若组件使用框架事件系统，也应保持“一个动作函数、两个输入入口”的结构。动作完成后要让结果区域有合适的文本反馈，但不要把视觉提示误当成焦点管理。

按动作类型复查状态与焦点去向

普通命令按钮不需要凭空添加 aria-pressed。它用于切换按钮的按下状态，属性值必须随真实状态变化；如果按钮控制可展开区域，则应让 aria-expanded 与面板的开合状态保持一致。打开对话框后，焦点通常应进入对话框；关闭后，焦点一般回到触发按钮。

静音



  筛选

const muteButton = document.querySelector('#mute-button');
let muted = false;

// 更新业务状态和可访问状态，不能只改按钮文字。
muteButton.addEventListener('click', () => {
  muted = !muted;
  muteButton.setAttribute('aria-pressed', String(muted));
  muteButton.textContent = muted ? '取消静音' : '静音';
});

如果自定义按钮只是打开一个弹窗，不要只更新 aria-expanded 就结束；还要处理对话框的可见状态、对话框内部的初始焦点和关闭后的焦点回收。图中的关系是静态说明，不代表浏览器已经替你完成这些动作。

用键盘路径做发布前回退检查

在交付前沿着页面自然顺序按一次 Tab，确认能到达控件且焦点轮廓明显；聚焦后分别按 Enter 和 Space，确认同一动作各触发一次。再检查以下边界：

• 控件是否真的承担按钮动作，而不是应该保留为链接的页面跳转。
• 是否只给必要的自定义元素添加 role，没有用 ARIA 覆盖正确的原生语义。
• Space 是否阻止了页面滚动，Enter 和 Space 是否没有重复绑定。
• 切换状态、展开状态和弹窗焦点是否与视觉状态同步。
• 禁用状态是否同时阻止动作、调整焦点路径，并向辅助技术反映真实状态。

一句话记忆：先用真正的 button，不得已才模拟按钮；模拟时补齐“是什么、能否到达、如何激活、状态是什么、激活后焦点去哪儿”这五件事。

相关问题

加了 role="button" 后为什么 Tab 还是找不到？ 因为 role 只提供语义，非原生元素还需要合适的 tabindex 才能进入键盘焦点顺序。

自定义按钮只处理 Enter 可以吗？ 不建议。按钮模式通常要求 Enter 和 Space 都能激活；如果实际是链接，就保留 a 元素而不是模拟按钮。

aria-pressed 能代替点击和键盘事件吗？ 不能。它只表达切换状态，真实动作仍由原生按钮或 JavaScript 事件实现。