HTML5中禁用按钮应优先使用disabled属性，配合:disabled伪类自定义样式、JavaScript动态控制，并在必要时用aria-disabled替代，同时须通过可访问性工具验证是否符合WCAG标准。
当您需要在网页中展示一个不可交互的按钮时，HTML5 提供了 disabled 属性 来实现禁用状态。该属性会阻止用户点击、聚焦及提交行为，并影响可访问性与视觉反馈。以下是几种可行的实现方式与对应样式控制方法：
一、原生 disabled 属性配合默认浏览器样式
使用 HTML5 原生 disabled 属性是最直接的方式，浏览器会自动应用基础禁用样式（如灰化、指针禁用），并屏蔽所有交互事件。
1、在 <button> 标签中添加 disabled 属性，无需赋值或赋空字符串均可生效。
2、确保不同时设置 tabindex="-1"，因 disabled 已隐式移除焦点能力。
立即学习“前端免费学习笔记（深入）”；
3、验证屏幕阅读器是否将该按钮识别为 disabled 状态，通常读作“按钮，已禁用”。
二、CSS 伪类 :disabled 配合自定义样式
通过 :disabled 伪类可覆盖浏览器默认禁用样式，统一设计语言，例如调整透明度、背景色与文字颜色。
1、为按钮定义基础样式，如 background-color: #007bff 和 color: white。
2、添加 button:disabled 规则，设置 opacity: 0.5 或 background-color: #ccc。
3、显式声明 cursor: not-allowed，确保鼠标悬停时显示禁止符号。
三、JavaScript 动态控制 disabled 状态
通过脚本操作 disabled 属性可响应用户输入或数据校验结果，实现条件性启用/禁用。
1、获取按钮 DOM 元素，例如 const btn = document.getElementById("submitBtn")。
2、根据逻辑判断设置 btn.disabled = true 或 btn.disabled = false。
3、避免仅靠样式模拟禁用（如仅加 class），必须同步操作 disabled 属性以保障表单提交拦截与可访问性。
四、禁用状态下保持语义结构的 aria-disabled 替代方案
在某些复杂组件（如自定义下拉按钮）中，若无法使用原生 disabled（例如父容器限制），可采用 aria-disabled="true" 并配合 JavaScript 阻断事件。
1、为元素添加 aria-disabled="true" 属性，并设置 tabindex="-1" 移除焦点。
2、绑定 click 和 keydown 事件监听器，检测到 aria-disabled="true" 时调用 event.preventDefault()。
3、通过 CSS 规则 [aria-disabled="true"] 应用视觉禁用样式，确保与原生 disabled 表现一致。
五、禁用按钮的可访问性验证要点
禁用按钮需满足 WCAG 2.1 标准，确保辅助技术能准确传达其不可用状态，避免误导用户。
1、检查按钮是否具有 role="button"（若非原生 button 元素），并确认 aria-disabled="true" 存在且值正确。
2、使用键盘 Tab 键导航，验证禁用按钮不会被聚焦；若被聚焦，说明 disabled 属性缺失或 tabindex 设置错误。
3、运行 axe 或 WAVE 工具扫描，确认无 "button has no accessible name" 或 "disabled element is focusable" 类型错误。
