aria-pressed是ARIA中标识切换按钮“按下/释放”语义状态的属性，仅适用于role="button"等控件；而disabled表示控件不可交互，二者语义不同、不可互换。
aria-pressed 是什么，它和 button 的 disabled 有什么区别
aria-pressed 是 ARIA（Accessible Rich Internet Applications）中用于指示**切换按钮（toggle button）当前是否处于“按下”状态**的布尔属性。它不是 HTML 原生 button 的固有属性，也不能替代 disabled —— 后者表示控件不可交互，而 aria-pressed 表示用户主动触发的“开/关”语义状态。
常见错误是把它当成 CSS 类开关或 JS 状态变量的简单映射：比如只在点击时 toggle 属性，却忘了同步更新可访问性树中的状态，导致屏幕阅读器读不出变化。
关键点：
-
aria-pressed必须显式设为"true"、"false"或"mixed"（不常用），不能只写aria-pressed（即无值） - 它不改变视觉样式，需配合 CSS（如
[aria-pressed="true"]）或 JS class 控制外观 - 原生
<button type="button">不自带 toggle 行为，必须由 JS 手动管理状态和属性
如何用 JavaScript 正确设置和切换 aria-pressed
核心逻辑是：每次点击，翻转按钮的视觉状态 + 可访问性状态 + 底层业务状态（比如控制某个面板是否展开）。
立即学习“前端免费学习笔记（深入）”；
示例代码片段（不依赖框架）：
const toggleBtn = document.querySelector('[data-toggle="theme"]');
let isDarkMode = false;
toggleBtn.addEventListener('click', () => {
isDarkMode = !isDarkMode;
// 必须显式写字符串值
toggleBtn.setAttribute('aria-pressed', isDarkMode.toString());
// 同步更新 UI（例如切换 class）
document.body.classList.toggle('dark', isDarkMode);
});
注意几个易错点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要用
toggleBtn.ariaPressed = true—— 这个属性是只读的，实际设置必须用setAttribute - 初始状态必须明确设置
aria-pressed="false"（或"true"），否则屏幕阅读器可能默认读作“未按下”，与真实状态不符 - 如果按钮支持键盘操作（如空格键触发），也要在
keydown中处理并同步aria-pressed
aria-pressed 在不同角色（role）下的兼容性表现
aria-pressed **仅对具有 role="button" 或 role="switch" 的元素有意义**。若用在普通 <div> 上但没声明 role，辅助技术很可能忽略该属性。
推荐组合方式：
- 语义化切换按钮：
<button type="button" role="button" aria-pressed="false">深色模式</button>（role="button"可省略，因为button默认有该 role） - 更明确的开关语义（尤其适用于开/关二元状态）：
<button type="button" role="switch" aria-checked="false">—— 注意这里应优先用aria-checked而非aria-pressed，因为role="switch"规范要求使用aria-checked - 绝对不要混用：
role="checkbox"+aria-pressed是无效组合，应改用aria-checked
浏览器+读屏器实测中，NVDA + Firefox 和 VoiceOver + Safari 对 aria-pressed 支持稳定；JAWS 在旧版本中可能读作“pressed”而非“on/off”，所以搭配 aria-label 更稳妥（例如 aria-label="深色模式开启" 动态更新）。
为什么有时候设置了 aria-pressed 却没被读出来
最常见原因是可访问性树未刷新，或元素未被正确识别为交互控件。
排查步骤：
- 用浏览器开发者工具的“Accessibility”面板（Chrome / Edge）检查该元素是否出现在可访问性树中，且
pressed属性值是否实时更新 - 确认元素有明确的
role（哪怕只是role="button"），且没有被aria-hidden="true"或display: none隐藏 - 避免在
aria-pressed变化后立刻销毁或重渲染整个节点（如 React 中 key 变了）—— 这会导致辅助技术丢失焦点和状态上下文 - 某些 CSS 框架（如 Bootstrap）的 toggle 按钮组件默认不设
aria-pressed，需手动补全
真正难的不是加这个属性，而是让它的值始终与用户心智模型一致：按下去了，就得读“已按下”；松开了，就得读“已释放”。中间任何一次 JS 错误、异步延迟、状态不同步，都会让残障用户困惑。
