置灰按钮必须同步实现视觉、交互和辅助技术三重禁用：原生按钮优先用disabled属性，自定义按钮则必须同时设aria-disabled="true"、tabindex="-1"并显式灰显，禁用状态需可逆且通过aria-live等机制即时反馈。
置灰按钮为什么不能只靠 CSS 灰显
仅用 opacity: 0.5 或 color: #999 让按钮“看起来不可用”，对屏幕阅读器完全无效。它仍可聚焦、仍响应点击、仍被朗读为“可用按钮”，用户会误操作或困惑于“为什么点不动”。真正的禁用状态必须同步传达给辅助技术。
disabled 属性才是第一选择，不是 ARIA
原生 <button> 和 <input type="button"> 必须优先用 disabled 属性：<button disabled>提交</button>
它自动完成三件事：视觉灰显、移除焦点能力、向辅助技术宣告“不可用”。
此时**不要加** aria-disabled="true"——这是冗余，且在部分旧读屏器中可能覆盖默认行为。
自定义按钮置灰时，aria-disabled 是刚需
当你用 <div> 或 <span> 模拟按钮（比如为了样式自由），又需要置灰逻辑时，aria-disabled="true" 不是可选，是必须：
- 必须同时设
tabindex="-1"（移出 Tab 流），否则键盘用户仍能聚焦到它 - 必须用 CSS 显式灰显（
opacity+pointer-events: none），aria-disabled不影响样式 - 必须监听键盘事件并忽略 Enter/Space，否则即使 aria-disabled=true，空格键仍可能触发
- 避免写成
<div role="button" aria-disabled="true">却漏掉tabindex="-1"——这会让键盘用户卡在不可用元素上
别用 aria-hidden="true" 替代禁用逻辑
给置灰按钮加 aria-hidden="true" 是典型误用：
立即学习“前端免费学习笔记（深入）”；
- 它告诉屏幕阅读器“彻底忽略这个元素”，包括它的存在和语义，用户根本不知道这里有按钮
- 它不阻止键盘聚焦（除非你额外设
tabindex="-1"），但焦点一进来就“消失”，体验断裂 - 如果按钮在表单里，
aria-hidden="true"会导致其值无法被表单逻辑识别或校验 - 正确做法永远是：保持 DOM 存在 + 显式声明禁用状态（
disabled或aria-disabled="true"）+ 同步视觉与交互
最常被忽略的点：禁用状态必须可逆且可感知。JavaScript 切换按钮启用/禁用时，不仅要改属性，还要确保视觉反馈即时、焦点管理不中断、屏幕阅读器能捕获状态变化——尤其是用 aria-live 主动播报“已启用”或“已禁用”时，得配 role="status" 而非 role="alert"，避免打断用户当前操作。
