如何在HTML中正确禁用<button>元素？

大家常用的通过disabled属性禁用按钮的方式（比如document.querySelector("button").disabled = true;），其实存在不少可用性问题：

• 按钮会直接失去焦点，键盘用户没法通过Tab键访问它
• 依赖屏幕阅读器的用户很难知道按钮为啥不能点，只有视觉用户能看到类似“表单没填完”的提示

那有没有更好的方式？答案是不让按钮真的“禁用”，而是在交互时做拦截并给出清晰反馈：

具体做法： #

1. 保留按钮的可交互状态：别加disabled属性，让键盘用户依然能聚焦到按钮
2. 视觉上提示“暂不可用”：用CSS调整按钮样式，比如降低透明度、改浅边框颜色，让视觉用户能看出来当前没法正常操作，但按钮还是能点
3. 点击时做逻辑拦截与反馈：
   • 点击按钮先校验操作条件（比如表单必填项是否填完）
   • 不满足条件时，用屏幕阅读器能识别的方式提示用户（比如在页面上显示错误文本，或者用aria-live区域播报提示）
   • 同时让按钮重新获得焦点，保持键盘导航的连贯性
   • 满足条件再执行正常操作

示例代码： #

const submitBtn = document.querySelector('button');
const errorTip = document.getElementById('error-tip');

submitBtn.addEventListener('click', (e) => {
  // 模拟表单验证逻辑
  const formIsValid = document.getElementById('email').value.trim() !== '';

  if (!formIsValid) {
    e.preventDefault();
    // 显示错误提示，确保屏幕阅读器能读取
    errorTip.textContent = '请填写有效的邮箱地址';
    errorTip.setAttribute('aria-hidden', 'false');
    // 让按钮重新聚焦，维持键盘导航体验
    submitBtn.focus();
  } else {
    // 执行提交逻辑
    console.log('表单提交中...');
  }
});

这种方法兼顾了所有用户的操作体验，既不会让键盘/屏幕阅读器用户失去访问路径，又能清晰告知操作不可用的原因，比直接用disabled属性要友好得多。

内容的提问来源于stack exchange，提问作者Mue