全部文章
发布与验证

让 AI 做复制按钮:成功、拒绝与键盘焦点都要测

用状态消息反馈剪贴板结果,失败时保留手动复制。

资料核验2026.11.12 · W3C WAI · 网页可访问性

订阅按钮点下去,页面没变化。有人会再点一次,有人以为刚才已经成功。写入剪贴板是一个可能失败的动作,界面应根据结果反馈。

给 AI 的上下文与边界

提供一个固定订阅地址,让助手用原生按钮调用剪贴板 API,完成后再更新状态区域。给出权限拒绝时的产品动作:选中可复制文本并提示手动复制。

流程示意:点击复制;反馈实际结果;失败可手动复制

让结果跟着实际操作走

在点击处理里等待写入完成,再把「已复制」填进现有的状态区域。成功后焦点留在按钮。失败时显示可以手动复制的地址,并告诉用户下一步怎么做。

分别测试允许剪贴板和拒绝剪贴板两种情况。用键盘操作时,确认焦点位置清楚,状态反馈也能被辅助技术获得。

如果页面已经有可读的地址,复制只是快捷方式。它失败时,用户仍然能完成订阅。

可以直接照着做的演练

可用测试地址 https://example.test/rss.xml。许可场景中从浏览器读回剪贴板,拒绝场景中检查提示和选区。不要只用调用 mock 的次数判断,按钮原地保留的焦点也是成功路径的一部分。

检查生成结果

  • 允许权限时真实剪贴板内容与地址一致。
  • 拒绝时显示提示并能手动复制。
  • 键盘触发后成功路径仍保留原按钮焦点。

复查时追问一层

不要只看「已复制」文案是否出现,因为它可能在异步写入失败前就显示。测试中分别允许与拒绝权限,结合状态区域与真实结果核对。

浏览器可能因为环境或权限拒绝写入剪贴板。测试成功分支需要读回完整绝对地址,失败分支要确认选中的范围覆盖整个地址。只有复制按钮可见并不能说明用户复制的是当前站点的实际订阅链接。

status 对应页面上已有的状态区域,例如设置了 role="status" 的元素。

try {
  await navigator.clipboard.writeText(address.value);
  status.textContent = '已复制订阅地址。';
} catch {
  address.focus();
  address.select();
  status.textContent = '地址已选中,请手动复制。';
}

资料来源