aria-pressed 必须配合原生 button 元素使用，仅用于 div/span 无效；其值仅接受字符串 "true"/"false"/"mixed"，需同步更新 dom、aria-label 和 css，并确保状态源头唯一且与辅助技术一致。
aria-pressed 必须配合 button 元素使用
单独给 div 或 span 加 aria-pressed 没用——屏幕阅读器不会把它当可交互控件，键盘用户 Tab 也跳过它。真实场景中，这类写法会让约 15% 的残障用户完全无法操作。
必须用原生 button，且推荐显式声明 type="button"，避免在表单内意外触发表单提交。
-
aria-pressed只接受字符串"true"、"false"或"mixed"，不能是布尔值true/false - JS 中读取时要用
button.getAttribute('aria-pressed') === 'true'，别用dataset或直接比较布尔值 - 初始状态要写死在 HTML 里，比如
<button aria-pressed="false">关注</button>，别依赖 JS 首次渲染才设
状态切换时必须同步更新 DOM 和辅助技术感知
只改文案或图标，不改 aria-pressed，等于对屏幕阅读器“说谎”。用户听到“已关注”，但实际按钮仍报“未关注”，会造成严重认知冲突。
每次点击后，至少做三件事：
- 用
button.setAttribute('aria-pressed', 'true')或'false'更新属性 - 同步更新
aria-label，例如从"关注张三"改成"已关注张三，点击取消" - 如果按钮有视觉反馈（如背景色变化），确保该样式也通过
[aria-pressed="true"]CSS 选择器控制，而非仅靠 class
加载态下要禁用交互并明确告知辅助技术
用户连点两次，后端可能只处理一次请求，但 UI 若没锁住按钮，状态就会错乱：显示“已关注”→又变回“关注”→再点一次才生效。这不是 UI bug，是数据一致性风险。
点击瞬间就要：
- 设
button.disabled = true - 加
button.setAttribute('aria-busy', 'true') - 移除或隐藏旧的
aria-label，可选地在aria-live="polite"区域插入“正在处理…”提示 - 成功后，再恢复
disabled、清除aria-busy，最后更新aria-pressed和文案
别把状态塞进 class 名里
像 class="btn btn--following" 这种写法，JS 无法可靠判断当前状态，也绕过了无障碍标准。状态必须可被辅助技术直接读取，而不是靠开发者猜 class 含义。
正确做法是用容器级 data 属性管理逻辑状态，例如：
<div class="follow-wrapper" data-following="false"> <button type="button" aria-pressed="false">关注</button> </div>
JS 判断用 wrapper.dataset.following === 'true'，更新时同步改 button 的 aria-pressed 和 wrapper.dataset.following ——两者必须严格一致。
复杂点不在 JS 多难写，而在于状态源头只有一个，且所有出口（DOM 属性、CSS 选择器、辅助技术播报）都得指向它。漏掉任意一环，对残障用户就是不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
