aria-disabled仅是语义标记，不阻止交互、焦点或样式变化；必须配合tabindex、CSS和JavaScript事件拦截才能实现完整禁用效果。
aria-disabled 不是 HTML 原生禁用机制，它只是语义标记——屏幕阅读器会读“已禁用”，但浏览器**不会阻止用户交互、不阻止焦点进入、也不改变样式**。真要禁用，优先用 disabled 属性（<button></button>、<input> 等原生可禁用元素）或 tabindex="-1" + CSS pointer-events: none + 手动拦截事件。
什么时候必须用 aria-disabled
仅当元素本身不支持 disabled 属性，但逻辑上需要表达“当前不可用”语义时才用。典型场景：
- 自定义组件：如
<div role="button">、<code><span role="tab"></span> - 第三方 UI 库中封装过的按钮/开关，底层不是原生
<button></button> - 需要保持视觉样式（比如灰色但不加
disabled那种强制灰度），又得让读屏器感知状态 - 屏幕阅读器（NVDA/JAWS/VoiceOver）会播报“已禁用”或附加 disabled 状态
- 浏览器**完全忽略它对交互的控制**：点击、空格/回车触发、Tab 键仍能聚焦
- 没有默认样式变化，需手动加 CSS（例如
[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }） - 不能替代 JavaScript 里的事件拦截：
if (el.hasAttribute('aria-disabled')) return;得自己写
aria-disabled="true" 的实际效果和限制
它只影响 ARIA 语义层：
正确组合：语义 + 行为 + 样式缺一不可
一个真正可用的禁用按钮（非原生）至少要三者齐备：
立即学习“前端免费学习笔记（深入）”；
<div
role="button"
aria-disabled="true"
tabindex="0"
style="opacity: 0.5; cursor: not-allowed;"
onclick="if (this.getAttribute('aria-disabled') === 'true') return;"
>删除</div>
-
role="button"告诉读屏器这是按钮 -
aria-disabled="true"告诉读屏器当前不可用 -
tabindex="0"让它能被键盘聚焦（否则禁用后反而无法聚焦，违反可访问性原则）；若不想被聚焦，改用tabindex="-1"并确保有其他导航路径 - 内联或外部 CSS 控制视觉反馈
- 所有交互事件（
onclick、onkeydown）里手动检查aria-disabled并return
最常被忽略的是事件拦截和 tabindex 处理——光加 aria-disabled 就以为完事了，结果键盘用户一按空格就误操作，或者鼠标点一下照样触发。语义只是起点，行为控制才是关键。
