用 aria-disabled="true" 实现软禁用需同时设 tabindex="-1"、css 禁交互（如 pointer-events: none），并在 js 中手动拦截事件；禁用时避免与原生 disabled 混用，框架中动态绑定须防止渲染 aria-disabled="false"。
怎么让按钮在 HTML 里真正禁用又保留语义
直接写 disabled 属性最简单，但很多场景下它不适用——比如表单里某个步骤还没填完，按钮不能点，但又不想用 disabled（因为会清空焦点、跳过表单验证、屏幕阅读器直接忽略）。这时候得靠 aria-disabled="true" 配合 CSS 控制视觉状态。
关键点：HTML 原生 disabled 是硬禁用，aria-disabled 是软禁用——它只告诉辅助技术“这个控件当前不可用”，行为和样式得你手动管。
- 必须同时设置
aria-disabled="true"和tabindex="-1"，否则键盘用户仍能聚焦到它 - 必须用 CSS 显式禁用交互：
pointer-events: none+opacity: 0.5这类，否则鼠标还能点 - 别只写
aria-disabled="true"就完事，它本身不阻止点击事件，JS 里还得手动if (el.getAttribute('aria-disabled') === 'true') return
aria-disabled 和 disabled 混用会出什么问题
混用不是语法错误，但逻辑冲突。浏览器看到 disabled 就直接接管行为：禁焦点、禁事件、禁提交、绕过可访问性树；而 aria-disabled 只是提示，不干预 DOM 行为。
常见翻车现场：
- 写了
disabled又写aria-disabled="true"：冗余，且某些读屏器可能报矛盾警告 - 写了
disabled但想用 JS 监听点击——监听不到，原生disabled下 click 事件根本不会触发 - 只写
aria-disabled="true"却忘了加tabindex="-1"：键盘用户 tab 到它后按回车，照样触发 click
React/Vue 里动态控制 aria-disabled 的坑
框架里容易把 aria-disabled 当成普通 prop 写死，或者用布尔值直接绑定，结果渲染出 aria-disabled="false" ——这是无效值，WAI-ARIA 规范要求它只能是 "true" 或 "false" 字符串，但更关键的是：**没有 aria-disabled 属性，等价于 false；显式写 aria-disabled="false" 反而可能误导读屏器**。
- React 中推荐写法：
aria-disabled={isStepIncomplete ? "true" : undefined}，而不是{String(isStepIncomplete)} - Vue 中用
:attr="{ 'aria-disabled': isStepIncomplete ? 'true' : null }"，避免渲染false字符串 - 千万别用
v-bind:aria-disabled="isStepIncomplete"，Vue 2/3 都会把布尔false渲染成aria-disabled="false"
为什么 focus 状态在 aria-disabled 元素上还存在
因为 aria-disabled="true" 不影响 focusability，默认所有元素都能被聚焦（除非显式设了 tabindex="-1" 或父级 inert）。用户 tab 过来，焦点停在按钮上，但按钮又不能点——体验割裂，还可能被误判为 bug。
- 修复方法只有两个：要么加
tabindex="-1"（移出 tab 顺序），要么加inert（现代浏览器支持，会自动处理焦点+事件+可访问性） -
inert是更干净的方案，但 IE 完全不支持，Safari 15.4+ 才开始支持，需 fallback - 如果必须兼容老浏览器，就得手动在
focus事件里el.blur()，再配合tabindex="-1"防止循环聚焦
真正难的不是加属性，而是让禁用状态在键盘、鼠标、屏幕阅读器、JS 逻辑里表现一致——少一个环节，就有人卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
