WordPress中Skip Link失效：实现WCAG 2.0合规的跳转链接

问题根源分析 #

你当前的代码有两个关键问题导致链接无法正常工作：

• 错误地将tabindex="0"添加到了包裹链接的<div>上，而不是链接本身。<a>标签只要带有href属性，默认就是可通过Tab键聚焦的，额外给父div加tabindex反而会让焦点落在div上，无法触发链接的聚焦状态。
• CSS中只定义了链接默认隐藏的样式，但没有设置聚焦时的显示规则，所以即使焦点能到链接上，用户也看不到它。

修正后的代码实现 #

1. 调整HTML结构

移除父div的tabindex="0"，确保焦点直接落在跳过链接上：

<body <?php body_class(); ?>>
  <div class="top-bar">
    <a href="#content" class="skip">Skip to content</a>
  </div>
  <!-- 页面内容，确保有id为content的元素 -->
  <main id="content">
    <!-- 你的主要内容 -->
  </main>

注意：一定要确保页面中存在id="content"的目标元素（通常是主内容区），否则跳转功能会失效。

2. 完善CSS样式

添加:focus伪类的样式，让链接在被聚焦时显示在视口内，同时保证它不会被其他元素遮挡：

/* Skip link 默认隐藏 */
.skip {
  position: absolute;
  top: -40px; /* 用较小的负值，避免聚焦时过度位移 */
  left: 0;
  background: #000; /* 高对比度背景，符合WCAG要求 */
  color: #fff;
  padding: 8px 16px;
  z-index: 9999; /* 确保在最上层，不被其他元素覆盖 */
  transition: top 0.2s ease; /* 可选：添加平滑过渡效果 */
}

/* 聚焦时显示链接 */
.skip:focus {
  top: 0; /* 移到视口内可见位置 */
}

这里把默认的top: -1000px改成top: -40px是为了让聚焦时的位移更自然，同时依然保证默认状态下完全隐藏在视口外。另外，设置高对比度的背景色和文字色，也是WCAG合规的必要要求。

额外的WCAG优化建议 #

• 可以给链接添加aria-label="Skip to main content"，进一步提升屏幕阅读器的可访问性：

  <a href="#content" class="skip" aria-label="Skip to main content">Skip to content</a>
  

• 测试时请务必用Tab键导航，而不是鼠标点击，确保聚焦时链接能正常显示并跳转。

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