aria-pressed必须同步更新以准确反映按钮激活状态，键盘需支持Enter/Space键，aria-label须动态设置为“显示/隐藏密码”，切换type前须保存并恢复光标位置。
aria-pressed 必须同步更新，不能只改图标
屏幕阅读器依赖 aria-pressed 判断按钮当前是否处于“激活”状态。如果只切换图标或文字，但没更新这个属性，视障用户会始终听到“显示密码”，哪怕实际已切换为明文——因为状态没变。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
aria-pressed初始值设为"false"，对应type="password"状态 - 每次点击后，根据当前
input.type值设置：toggleBtn.setAttribute("aria-pressed", input.type === "text") - 别用字符串比较（如
=== "true"），直接用布尔值更安全
键盘操作必须支持 Enter 和 Space 键
仅绑定 click 事件，会导致键盘用户无法触发切换：Tab 进入按钮后按空格或回车无响应，违反 WCAG 2.1 的键盘可操作性要求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
keydown事件，而非只靠click - 在事件处理中判断
e.key === "Enter" || e.key === " "（注意空格键是字符串空格） - 调用
e.preventDefault()防止表单提交或页面滚动 - 确保按钮的
type="button"，否则回车可能意外提交表单
aria-label 要动态重写，不能只靠 innerText
屏幕阅读器读取的是 aria-label，不是按钮里的文字或图标。如果只改 textContent 或 SVG，而没更新 aria-label，用户听到的永远是初始提示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 切换前先读当前状态：
const isText = inputEl.type === "text" - 然后统一更新：
toggleBtn.setAttribute("aria-label", isText ? "隐藏密码" : "显示密码") - 中文场景下避免用“查看/关闭”这类模糊动词，明确用“显示/隐藏”更符合无障碍习惯
focus 后必须恢复光标位置，否则输入中断
type 切换会重置 selectionStart 和 selectionEnd，导致用户在中间编辑时，光标跳到开头或末尾——尤其在 Safari 和 Chrome 中非常明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 切换前保存：
const start = inputEl.selectionStart; const end = inputEl.selectionEnd - 切换并
focus()后立即执行：inputEl.setSelectionRange(start, end) - 不要省略
focus()，否则 Tab 导航会跳过该输入框，破坏可访问性流 - 若用户未聚焦该输入框（比如鼠标点击按钮），则无需恢复光标位置，避免干扰
