置灰按钮必须同步实现视觉、交互和辅助技术三重禁用：原生按钮优先用disabled属性，自定义按钮则必须同时设aria-disabled="true"、tabindex="-1"并显式灰显，禁用状态需可逆且通过aria-live等机制即时反馈。

置灰按钮为什么不能只靠 CSS 灰显

仅用 opacity: 0.5 或 color: #999 让按钮“看起来不可用”，对屏幕阅读器完全无效。它仍可聚焦、仍响应点击、仍被朗读为“可用按钮”，用户会误操作或困惑于“为什么点不动”。真正的禁用状态必须同步传达给辅助技术。

disabled 属性才是第一选择，不是 ARIA

原生 <button></button> 和 <input type="button"> 必须优先用 disabled 属性：
<button disabled>提交</button>
它自动完成三件事：视觉灰显、移除焦点能力、向辅助技术宣告“不可用”。
此时**不要加** aria-disabled="true"——这是冗余，且在部分旧读屏器中可能覆盖默认行为。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

自定义按钮置灰时，aria-disabled 是刚需

当你用 <div> 或 <code><span></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"> 却漏掉 <code>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"，避免打断用户当前操作。