1. 基础写法：HTML 原生按钮的禁用状态
1.1 使用 disabled 属性的基础
在最简单的实现中，禁用状态通过给按钮元素添加 disabled 属性来实现。原生按钮一旦处于禁用状态，它将不可聚焦，也不能被用户触发点击事件。
使用场景通常是表单校验未通过、流程不允许继续时，禁用按钮可以直观表达当前交互的不可用性。此时浏览器的默认行为会确保 提交行为与点击事件不会被触发，提升用户体验的一致性。
<!-- 基础示例：原生按钮禁用 -->
<button type="submit" disabled>提交</button>
需要注意的是，禁用的按钮通常不会参与表单提交，提交按钮在禁用时不能发起提交。如果你只是想让按钮不可点击，同时保留提交能力，应考虑使用其他方式实现逻辑禁用，而非仅靠 CSS。
此外，禁用属性也会影响屏幕阅读器对控件的描述，确保在必要时通过无障碍文本传达当前状态。
1.2 禁用状态的可访问性与风格约束
在实现中，除了功能性禁用外，视觉呈现也应与状态一致。通过 CSS为禁用按钮设定对比度更高的样式，确保视觉上明显传达为“不可用”。
但请记住，视觉禁用不能替代实际禁用，只有将按钮实际设置为 disabled，才会触发浏览器的原生行为与无障碍语义。
<style>
button[disabled] {opacity: 0.5;cursor: not-allowed;/* 其他视觉样式 */
}
</style>
对于表单中的按钮，若你需要通过脚本在某些条件下才启用按钮，可以通过移除 disabled 属性来实现 动态启用，并同时更新相关的无障碍文本。
2. ARIA 属性与自定义控件的禁用状态
2.1 aria-disabled 的正确用法
当按钮是自定义控件（如 div、span）并非原生的 button 元素时，浏览器不会自动提供禁用行为或无障碍语义。这时应使用 aria-disabled="true" 来标记当前状态，同时结合 role="button" 与可聚焦的属性（如 tabindex="0"）实现可访问性。
需要强调的是，aria-disabled 本身只是一个状态指示，真正的交互禁用还需要你在事件处理上进行阻止，例如禁用点击、键盘触发等。
<div role="button" tabindex="0" aria-disabled="true">自定义按钮</div>
在此场景下，屏幕阅读器会读取 aria-disabled="true"，帮助用户理解控件当前不可用，并且你应结合 键盘事件处理 以确保状态一致性。
2.2 自定义控件中的无障碍实现
对于自定义控件，除了设置 aria-disabled，还应确保 聚焦顺序、键盘交互、以及状态变化时的提示都得到妥善处理。若控件允许激活，应实现对 Enter 与 Space 键的响应；若当前处于禁用状态，应避免触发任何激活逻辑。
const btn = document.querySelector('#customBtn');
btn.addEventListener('keydown', (e) => {if ((e.key === 'Enter' || e.key === ' ') && btn.getAttribute('aria-disabled') !== 'true') {e.preventDefault();// 触发激活逻辑}
});
此外，aria-disabled 与 aria-label、aria-pressed 等属性的组合使用，可以更清晰地表达控件的当前状态和作用。
3. 无障碍实践：键盘、焦点与屏幕阅读器的考量
3.1 键盘交互与焦点管理
在无障碍实践中，键盘可用性与焦点管理是核心。原生按钮已具备 Enter/Space 触发 的默认行为，而自定义控件需要显式实现，以确保 可聚焦、可激活，并在禁用时明确阻止激活。
为了实现一致的行为，建议在自定义控件上同时使用 role="button"、tabindex="0" 与 aria-disabled，并在键盘事件中尊重当前禁用状态。
<div id="customBtn" role="button" tabindex="0" aria-disabled="false">自定义按钮</div>当禁用时，应确保 tabindex=-1 或其他不可聚焦状态，以避免用户陷入无法操作的控件。
function setDisabled(el, isDisabled) {el.setAttribute('aria-disabled', String(isDisabled));el.tabIndex = isDisabled ? -1 : 0;
}
3.2 屏幕阅读器与状态传达
屏幕阅读器在读取按钮状态时，禁用属性与 aria-disabled会被报道，从而帮助用户理解当前的交互能力。对于原生按钮，disabled 已足够表达状态，但在自定义控件中需要通过 aria-disabled 与相关标签来传达。
此外，若状态变化需要通知用户，考虑引入一个轻量的、可更新的状态提示区域，使用 aria-live 来传达信息，确保用户不会错过重要变化。
<div id="status" aria-live="polite" role="status">按钮已禁用</div>在进行无障碍实践时，务必维持状态的一致性：禁用时不可激活、禁用时会被屏幕阅读器读出、以及视觉上清晰表现为不可交互的状态。
