为何谷歌的无href属性SkipTo链接可以正常运行？

谷歌的这类无href跳转链接，本质是通过ARIA属性增强 + 自定义事件监听的组合方案实现功能，完全脱离了浏览器原生<a>标签的href跳转机制，核心逻辑如下：

核心实现步骤 #

• 基础可交互属性补充：虽然删除了href属性，但会给<a>标签添加tabindex="0"让元素可以被键盘Tab键聚焦，添加role="link"告知辅助设备这是链接元素，同时通过自定义data属性存储跳转目标，比如data-skip-target="main-content"
• 双事件绑定：给所有这类SkipTo元素绑定两类事件回调：
  • 点击事件：触发时读取元素存储的目标ID，获取对应DOM元素后调用scrollIntoView()实现页面滚动，同时手动将键盘焦点转移到目标元素，符合无障碍规范
  • 键盘事件：监听回车、空格按键的触发事件，执行和点击完全一致的跳转逻辑，符合可交互元素的通用键盘操作要求
• 无默认行为干扰：因为没有href属性，不会触发浏览器原生的锚点跳转、地址栏加#后缀等行为，所有交互逻辑完全由JS控制，灵活性更高

自主实现失效的常见原因 #

• 缺失可访问性属性：仅添加了点击事件，未添加tabindex和role属性，键盘用户无法触发交互，会被判定为功能失效
• 未处理焦点转移：仅实现了页面滚动，没有手动把焦点移到目标区域，不符合SkipTo功能的无障碍要求，部分测试场景会判定功能不生效
• 事件绑定时机错误：事件绑定逻辑执行在DOM元素渲染完成之前，导致事件没有绑定到对应元素上，点击无反应

最简可复用实现示例 #

<!-- SkipTo跳转入口 -->
<a role="link" tabindex="0" class="skip-to" data-target="main-area">跳过导航到主内容</a>

<!-- 页面其他内容 -->
<nav>导航栏内容</nav>

<!-- 跳转目标区域，tabindex=-1允许程序主动聚焦 -->
<main id="main-area" tabindex="-1">
  主内容区域
</main>

<script>
document.querySelectorAll('.skip-to').forEach(el => {
  // 处理点击跳转
  el.addEventListener('click', () => {
    const targetEl = document.getElementById(el.dataset.target)
    if (!targetEl) return
    targetEl.scrollIntoView({ behavior: 'smooth' })
    targetEl.focus()
  })

  // 处理键盘操作
  el.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      el.click()
    }
  })
})
</script>

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