返回顶部按钮必须用语义化<button>元素实现，确保可聚焦、可键盘触发、有焦点反馈，并在跳转后将焦点移至顶部锚点。
返回顶部按钮必须能被键盘用户 Tab 到、Enter/Space 触发、有清晰焦点反馈，且跳转后焦点不能丢失——只加 scrollIntoView 或 scrollTo 不够，缺了这三点，对屏幕阅读器和键盘用户就是不可用的。
button 元素默认可聚焦，别画蛇添足加 tabindex="0"
用 <button> 写返回顶部按钮，天然就在 Tab 流中。加 tabindex="0" 不但多余，还可能在 SSR/hydration 场景下导致首次 Tab 焦点错位。常见错误是写成：
<div role="button" tabindex="0" onclick="scrollToTop()">回到顶部</div>
这会绕过原生语义，让屏幕阅读器读作“按钮”，但缺失焦点管理逻辑（比如按 Space 不触发）。正确做法就一行：
<button id="backToTop" onclick="scrollToTop()">回到顶部</button>
- 确保它在 DOM 中位置合理——建议放在主内容区末尾，符合自然 Tab 顺序
- 避免用
<a href="#">：会污染 history 栈，且默认滚动生硬；href="#top"虽语义更准，但需确保<div id="top">存在且可聚焦（见下条） - 若必须用
<a>，得加tabindex="0"（它默认不进 Tab 流），并监听keydown处理 Enter/Space
跳转后焦点必须落到顶部锚点，否则键盘用户“失联”
点击返回顶部后，焦点仍停在按钮上，用户再按一次 Tab 就跳到下一个元素，而不是“回到页面开头”。这违反 WCAG 2.1 要求。解决方法不是靠浏览器自动跳转，而是 JS 主动聚焦目标锚点：
立即学习“前端免费学习笔记（深入）”；
- 给页面最顶端加一个可聚焦锚点：
<div id="top" tabindex="-1"></div>（tabindex="-1"让它支持.focus()，但不参与 Tab 流） - 在滚动完成回调里调用：
document.getElementById("top").focus() - 用
scrollIntoView({ behavior: "smooth", block: "start" })后，监听scrollend事件（Chrome/Firefox 支持）；Safari 不支持，得用setTimeout延迟聚焦，或监听requestAnimationFrame循环检测滚动是否停止
别用 document.body.focus() 或 document.documentElement.focus()：它们不可聚焦，调用静默失败。
移除 outline 后必须提供 :focus-visible 替代样式
很多项目全局写了 * { outline: none }，结果键盘用户按 Tab 完全看不到焦点在哪。按钮获得焦点时，必须有足够对比度的视觉反馈：
- 禁用默认轮廓要分浏览器处理：
button:focus { outline: none; }+button:-moz-focus-inner { border: 0; } - 但紧接着必须补上替代样式：
button:focus-visible { box-shadow: 0 0 0 2px #007bff; } - 别只依赖
:focus：它会在鼠标点击时也触发，干扰视觉；:focus-visible是专为键盘焦点设计的标准伪类，现代浏览器已广泛支持 - 测试时务必关闭系统“减少动画”或“高对比度模式”，某些 OS 下
:focus-visible行为会变化
滚动监听显示/隐藏按钮时，别让它脱离焦点流
用 window.addEventListener("scroll", ...) 控制按钮显隐很常见，但容易踩坑：
- 按钮设
display: none时，它会彻底退出 Tab 流；下次显示出来，Tab 顺序会跳过它——必须用visibility: hidden+opacity: 0+pointer-events: none组合隐藏，保持其在 Tab 流中 - 如果用
aria-hidden="true"隐藏按钮，记得同步移除tabindex（哪怕没写），否则屏幕阅读器会忽略它，但键盘用户仍能 Tab 进去，造成不一致 - 按钮从隐藏变显示瞬间，不要主动
.focus()：用户没操作就抢焦点，属于干扰；焦点应始终由用户手势（Tab/Click）驱动
最易被忽略的一点：按钮跳转后，若顶部锚点没有 tabindex="-1"，.focus() 会失败且无提示——它不会报错，只是静默不生效。调试时打开 DevTools 的 Accessibility 面板，确认目标元素的 Focusable: true 和 Focused: true 是否同时成立。
