aria-pressed仅是语义状态标记，不自动触发视觉变化或键盘响应；必须配合JS同步更新状态、监听click/keydown事件、用[aria-pressed="true"]控制CSS样式，并确保与DOM、焦点、屏幕阅读器播报严格一致。
aria-pressed 只是状态标记，不自动切换视觉或行为
aria-pressed 是纯语义属性，浏览器不会因它改变按钮外观，也不会自动绑定空格/回车响应。它只告诉屏幕阅读器“这个按钮当前是按下还是释放状态”。如果你只加了 aria-pressed="true" 却没同步更新 JS 状态、CSS 样式或键盘事件处理，辅助技术就会读到错误信息，而 sighted 用户完全看不出变化。
- 必须用 JS 手动切换
aria-pressed值（true/false），不能靠 CSS 类或数据属性代替 - 每次点击后要立刻更新该属性，避免 React/Vue 重渲染延迟导致中间态被读出
- 配合
aria-label提供明确可访问名，例如aria-label="开启深色模式"，否则屏幕阅读器可能只读“按钮，已按下”，缺乏上下文
为什么不能只靠 aria-pressed 实现开关逻辑
一个真正可用的开关按钮，需要同时满足三件事：状态可读（aria-pressed）、行为可触达（键盘支持）、视觉可感知（CSS 反馈）。缺一不可。常见错误是只改了 aria-pressed，但没监听 keydown 事件处理空格/回车，结果键盘用户按了没反应，还误以为功能失效。
- 必须监听
click和keydown（Enter和Space），并在两个事件里做相同的状态翻转 - CSS 需用
[aria-pressed="true"]选择器控制样式，不要只依赖.active类——否则语义和视觉脱钩 - 若按钮控制页面主题，记得同步修改
document.documentElement的 class 或 CSS 变量，aria-pressed本身不触发任何样式计算
aria-pressed 和原生表单控件的本质区别
用 <input type="checkbox"> 实现开关，浏览器自动管理 checked 状态、键盘交互、表单提交值和 ARIA 映射（如自动加 aria-checked）。而 <button> + aria-pressed 是手动模拟，你得自己保证所有链路一致。一旦漏掉焦点管理、禁用同步或初始值设置，就容易出现“读屏器说已按下，但实际没生效”这类错位。
- 初始状态必须显式设
aria-pressed="false"或aria-pressed="true"，不能留空（undefined表示不支持按压） - 禁用时要用
disabled属性，而不是只设aria-disabled="true"——后者不阻止交互，且部分读屏器忽略 - 如果开关有持久化需求（如用户偏好存 localStorage），状态恢复后必须同步更新
aria-pressed，否则首次 Tab 进入时语义就是错的
混合状态 mixed 很少用，别乱填
aria-pressed="mixed" 表示“部分按下”，典型场景是树形控件中父节点的半选状态。普通开关按钮永远不该用它。填了 mixed 但没配套实现多级状态逻辑，屏幕阅读器会读“混合按下”，用户完全无法理解当前到底开没开。
立即学习“前端免费学习笔记（深入）”；
- 绝大多数深色模式、通知开关、播放暂停都只用
true/false - React 中避免用
aria-pressed={isPressed ? 'true' : 'false'}这种字符串写法，应直接用布尔值（JSX 会自动转），防止传入空字符串或null导致属性丢失 - 测试时用 Chrome DevTools 的 Accessibility 面板检查
aria-pressed是否实时更新，别只靠眼睛看图标变没变
