如何提升Back to Top返回顶部链接的可访问性？

除了添加aria-label，你还可以从以下几个方向优化这个返回顶部链接的可访问性：

• 添加屏幕阅读器专属文本标签：
  仅依赖aria-label可能在部分老旧辅助设备上兼容性不足，建议在SVG旁添加一个视觉隐藏的文本元素，比如：

  <a class="btn-primary" href="#top">
    <span class="btn-content link-content">
      <svg focusable="false" role="img">
        <use xlink:href="#arrow-upward"></use>
      </svg>
      <span class="sr-only">返回顶部</span>
    </span>
  </a>
  

  其中.sr-only的样式可以设置为：

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  

  视觉上看不到文本，但屏幕阅读器能正常读取，比单一的aria-label更可靠。

• 优化跳转后的焦点管理：
  默认点击链接跳转到#top时，页面滚动但焦点不会自动转移到顶部元素，这会让键盘用户困惑。你可以：

  1. 给页面顶部的目标元素（比如主标题<h1>或页面容器）添加tabindex="-1"，让它可被聚焦但不会被Tab键选中；
  2. 用JS在跳转完成后主动设置焦点：

  document.querySelector('.btn-primary').addEventListener('click', function(e) {
    e.preventDefault();
    const topElement = document.getElementById('top');
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    topElement.focus();
  });
  

  注意保留href="#top"作为降级方案，确保JS失效时依然能正常跳转。

• 控制按钮的显示时机：
  不要让按钮一直显示，当用户滚动到离顶部一定距离（比如超过视口高度的1/3）时再显示，回到顶部后隐藏。这样既不干扰初始页面内容，也避免键盘用户在不需要时Tab到该按钮。可以通过监听scroll事件实现：

  const backToTopBtn = document.querySelector('.btn-primary');
  window.addEventListener('scroll', function() {
    if (window.pageYOffset > window.innerHeight / 3) {
      backToTopBtn.classList.remove('hidden');
    } else {
      backToTopBtn.classList.add('hidden');
    }
  });
  

• 强化焦点可见性：
  确保按钮被键盘聚焦时，有清晰的焦点样式（不要随意移除默认outline，如果自定义样式，要保证焦点状态比普通状态更醒目），比如：

  .btn-primary:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
  

  这是键盘用户识别当前聚焦元素的核心依据。

• 完善SVG语义化：
  给SVG添加role="img"，明确告知辅助技术这是一个图像元素，配合之前的隐藏文本，让屏幕阅读器能准确理解按钮功能。当前的focusable="false"设置是正确的，避免SVG被意外聚焦。

内容的提问来源于stack exchange，提问作者Loki