Squarespace站点跳过主内容按钮聚焦问题解决方案咨询

问题根源 #

Squarespace自动生成的跳过链接依赖原生锚点跳转，但原生行为不会自动将焦点绑定到目标元素；同时平台自带的JS逻辑可能干扰自定义事件绑定，移动端还存在交互逻辑覆盖的问题，导致点击后需多次Tab才能聚焦、移动端完全失效。

修复步骤 #

1. 调整主内容目标元素的语义与可聚焦性 #

不要用<a>标签作为主内容锚点（易与常规链接混淆），改用语义化的<main>标签，设置tabindex="-1"（允许JS聚焦但不被Tab键默认选中）：

<main id="page" tabindex="-1" role="main" aria-label="Main content">
  <!-- 你的主内容区域 -->
</main>

如果必须保留现有<a>标签，修改其tabindex为-1，避免干扰正常Tab导航顺序：

<a href="/contact" id="page" aria-label="Get in touch, redirects to contact page" tabindex="-1" class="first">Get In Touch</a>

2. 绑定完整的事件处理逻辑（覆盖点击与键盘操作） #

确保代码在DOM完全加载后执行，阻止原生锚点跳转，手动控制焦点与滚动：

document.addEventListener('DOMContentLoaded', function() {
  const skipLink = document.querySelector('.header-skip-link.sqs-button-element--primary');
  const mainContent = document.getElementById('page');

  if (!skipLink || !mainContent) return;

  // 确保辅助属性正确（兼容Squarespace动态生成逻辑）
  skipLink.setAttribute('id', 'skiptomaincontent');
  skipLink.setAttribute('aria-label', 'Skip to Main content');

  // 处理点击事件
  skipLink.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止原生锚点跳转，避免焦点丢失
    mainContent.focus(); // 强制聚焦主内容元素
    mainContent.scrollIntoView({ behavior: 'smooth', block: 'start' }); // 可选：平滑滚动到目标区域
  });

  // 处理键盘操作（支持回车/空格触发跳过）
  skipLink.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      mainContent.focus();
      mainContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
});

3. 移动端适配CSS #

解决移动端可能出现的元素隐藏或交互拦截问题，确保目标元素聚焦时可见：

#page {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#page:focus {
  position: static;
  width: auto;
  height: auto;
  outline: 2px solid #000; /* 可选：添加聚焦轮廓，提升可访问性 */
}

验证标准 #

• 点击跳过链接后，焦点直接落在主内容元素上，按一次Tab即可选中下一个可交互元素
• 移动端点击或用键盘触发跳过链接，焦点正常跳转
• 屏幕阅读器可正确识别跳过链接与主内容区域的语义

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