aria-pressed="true"/"false"是aria中专为切换按钮设计的语义属性，必须显式声明、动态更新并与视觉状态同步，配合键盘事件（enter/space）及可访问名称，确保屏幕阅读器正确识别开关状态。
aria-pressed="true" 和 aria-pressed="false" 是 ARIA（Accessible Rich Internet Applications）中用于明确标识切换类按钮状态的语义化属性，专为屏幕阅读器等辅助技术设计，不是视觉样式控制手段，但必须与视觉状态严格同步。
开关按钮必须用 aria-pressed 而不是仅靠 class 或 CSS
- 仅添加
.active或data-active="true"对屏幕阅读器无效 -
aria-pressed是唯一被主流读屏软件（如 NVDA、VoiceOver）识别为“可按压切换”的标准属性 - 它告诉辅助技术：“这个按钮当前处于开启/关闭状态”，而非“它看起来像被按下”
正确初始化与更新方式
初始 HTML 中必须显式声明：
<button type="button" aria-pressed="false">显示密码</button>
不可省略，也不可用aria-pressed缺失或设为"undefined"代替-
状态变更时，必须用 JavaScript 动态设置：
button.setAttribute('aria-pressed', 'true'); // 或 button.setAttribute('aria-pressed', 'false'); 不能只依赖 CSS 类切换（如
.is-on），否则视障用户完全无法感知状态变化
必须配套的交互支持
-
绑定
click事件只是基础，还需监听键盘操作：-
keydown事件中响应Enter和Space键（空格键触发是 WCAG 强制要求） - 防止默认行为（如空格键滚动页面）
- 按下后立即更新
aria-pressed，再执行业务逻辑（如显示/隐藏密码）
-
按钮需有明确的可访问名称：
<button aria-label="显示密码"></button>
或内部含可见文本（如<span>显示密码</span>），确保屏幕阅读器能朗读当前意图
常见错误避免
- ❌ 把
aria-pressed加在容器或图标上，应始终加在触发按钮本身 - ❌ 在 checkbox 或 radio 上误用
aria-pressed（它们用aria-checked） - ❌ 切换后未同步更新
aria-label内容（例如从“显示密码”变为“隐藏密码”） - ❌ 使用
input[type="checkbox"] + label实现开关却没补aria-pressed（该组合天然用aria-checked，不适用aria-pressed）
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
