如何使用Tailwind CSS添加仅屏幕阅读器可见的Skip to main content链接

这个功能的核心是给屏幕阅读器用户提供快捷入口，让他们不用逐一遍览导航栏等前置内容，直接跳转到页面主内容区域，提升网页的可访问性。用Tailwind CSS实现起来很简单，步骤如下：

1. 编写HTML结构 #

在页面最顶部（导航栏之前）添加跳转链接，链接的href指向主内容区域的ID，同时搭配Tailwind样式类：

<a href="#main-content" class="sr-only focus:not-sr-only fixed top-4 left-4 bg-blue-600 text-white px-4 py-2 rounded-md z-50">
  跳转到主内容
</a>

<!-- 页面主内容区域，需设置对应ID -->
<main id="main-content" class="container mx-auto py-8">
  <!-- 主内容内容 -->
</main>

2. 核心样式类说明 #

• sr-only：Tailwind内置工具类，将元素视觉隐藏，仅对屏幕阅读器可见，不干扰普通用户的页面浏览。
• focus:not-sr-only：当链接通过键盘（如Tab键）被聚焦时，取消隐藏效果，让链接显示出来，方便键盘用户操作。
• fixed top-4 left-4：把链接固定在页面左上角，避免滚动时消失。
• bg-blue-600 text-white px-4 py-2 rounded-md：设置链接的视觉样式，确保聚焦时清晰可见。
• z-50：保证链接在其他元素上方，不会被遮挡。

3. 关键注意事项 #

• 主内容区域必须设置与跳转链接href匹配的ID，否则跳转功能无效。
• 必须保留focus:not-sr-only类，这是键盘用户（包括屏幕阅读器用户）触发跳转的关键入口。
• 视觉样式可根据网站设计调整，但sr-only和focus:not-sr-only的组合是实现功能的核心，不能省略。

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