aria-pressed

使用场景

适用于充当切换开关的按钮——静音／取消静音、关注／取消关注、文本编辑器中的粗体／非粗体、侧边栏展开／收起。该按钮改变状态但不触发导航；标签保持不变，仅通过按下状态传达变化。

有效值共三个：

• aria-pressed="false" — 切换关闭。
• aria-pressed="true" — 切换开启。
• aria-pressed="mixed" — 当该切换控制多个子项且子项状态不一致（部分开启、部分关闭）时使用。实践中较为罕见；多数作者会改用独立控件。

若按钮不具备切换功能——仅用于提交表单或打开对话框——请勿使用 aria-pressed。对于展开／折叠控件，应使用 aria-expanded；对于普通动作按钮，则无需添加任何状态属性。

保持同步

aria-pressed 是一个状态，会随用户交互而变化。更新按钮视觉外观的点击处理程序，必须同步更新该属性。两者不得出现不一致——若图标显示为静音，aria-pressed 的值也应为 "true"。

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Mute
</button>

常见错误

• 将 aria-pressed 添加到非按钮元素（<div> 或 <a>）。请使用 role="button"，或更优先地，改用 <button>。
• 仅用 CSS 切换视觉状态，却从未更新 aria-pressed。屏幕阅读器用户将始终听到相同的状态。
• 在不具备切换功能的按钮（如”提交”按钮）上使用 aria-pressed="true"——这会误导辅助技术播报一个无关的状态。
• 将 aria-pressed 与 aria-selected（用于标签页、选项等单选组件中的选中项）或 aria-checked（用于复选框和单选按钮）混淆。三者语义不同，应根据组件模式选用正确的属性。