跳过导航

“跳过导航链接”允许键盘用户跳转到页面的主要内容。

Navigation

This represents a navigation area that users might want to skip over.

Main Content

This is the main content area. When users press Tab and then Enter on the "Skip to Content" link, focus will jump directly here, bypassing the navigation.

import { Box, SkipNavContent, SkipNavLink, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Box>
      <SkipNavLink>Skip to Content</SkipNavLink>

      {/* Simulated navigation */}
      <Box p="4" bg="gray.100" borderRadius="md" mb="4">
        <Text fontWeight="medium" mb="2">
          Navigation
        </Text>
        <Text fontSize="sm" color="gray.600">
          This represents a navigation area that users might want to skip over.
        </Text>
      </Box>

      {/* Main content area */}
      <SkipNavContent>
        <Box p="4" bg="blue.50" borderRadius="md">
          <Text fontWeight="medium" mb="2">
            Main Content
          </Text>
          <Text fontSize="sm">
            This is the main content area. When users press Tab and then Enter
            on the "Skip to Content" link, focus will jump directly here,
            bypassing the navigation.
          </Text>
        </Box>
      </SkipNavContent>
    </Box>
  )
}

用法

¥Usage

屏幕阅读器和键盘用户跳过导航链接和目标容器。

¥Skip Navigation link and destination container for screen readers and keyboard users.

根据 WebAIM.org 基于 WCAG 2.4.1（绕过块 - A 级）组件，由于主要内容并非总是用户在页面上遇到的第一个部分，因此强烈建议包含一个跳过链接，以便用户能够跳过存在于多个页面上的内容。导航链接是最常被跳过的。

¥Per WebAIM.org on WCAG 2.4.1 (Bypass Blocks - Level A), because the main content is not always the first section that the user encounters on a page, it is strongly recommended to include a skip link for users to be able to bypass content that is present on multiple pages. Navigation links are the most common skipped.

使用屏幕阅读器或专用软件的用户可以通过标题或 main 区域跳过内容，但对于主要使用键盘的视力正常用户来说，这还不够。

import { SkipNavContent, SkipNavLink } from "@chakra-ui/react"

<SkipNavLink>Skip to content</SkipNavLink>
<SkipNavContent />

示例

¥Examples

基本用法

¥Basic Usage

理想情况下，SkipNavLink 组件应该是用户在页面加载后开始导航时遇到的首批项目之一。因此，建议将其放置在应用尽可能高的位置。

¥The SkipNavLink component ideally needs to be one of the first items a user encounters when they begin navigating a page after load. Therefore, it is recommended to place it as high as possible in the app.

它会渲染一个 a 标签，并自动创建一个带有 href 属性的链接，该链接将指向 SkipNavContent。

¥It renders an a tag and automatically creates a link with an href attribute that will point to SkipNavContent.

SkipNavContent 组件用作链接的目标，以将键盘焦点置于第一个主要内容上。它会渲染一个 div，既可以作为自闭合组件，也可以封装主要内容。

¥The SkipNavContent component is used as a target for the link to place keyboard focus on the first piece of main content. It renders a div and can either be a self-closing component, or wrap the main content.

Navigation

This represents a navigation area that users might want to skip over.

Main Content

This is the main content area. When users press Tab and then Enter on the "Skip to Content" link, focus will jump directly here, bypassing the navigation.

import { Box, SkipNavContent, SkipNavLink, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Box>
      <SkipNavLink>Skip to Content</SkipNavLink>

      {/* Simulated navigation */}
      <Box p="4" bg="gray.100" borderRadius="md" mb="4">
        <Text fontWeight="medium" mb="2">
          Navigation
        </Text>
        <Text fontSize="sm" color="gray.600">
          This represents a navigation area that users might want to skip over.
        </Text>
      </Box>

      {/* Main content area */}
      <SkipNavContent>
        <Box p="4" bg="blue.50" borderRadius="md">
          <Text fontWeight="medium" mb="2">
            Main Content
          </Text>
          <Text fontSize="sm">
            This is the main content area. When users press Tab and then Enter
            on the "Skip to Content" link, focus will jump directly here,
            bypassing the navigation.
          </Text>
        </Box>
      </SkipNavContent>
    </Box>
  )
}

自定义 ID

¥Custom ID

你可以使用 id props 提供自定义 id 值，但你必须在两个组件中都使用此 props 和值，否则它们将不匹配。

¥You can supply a custom id value using the id prop but you will have to use this prop and value in both components, or they will not match.

Header & Navigation

This example uses a custom ID "main-content" for both components to ensure they match.

Main Content (Custom ID)

Both the SkipNavLink and SkipNavContent use the same custom ID "main-content" to ensure proper linking and focus management.

import { Box, SkipNavContent, SkipNavLink, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Box>
      <SkipNavLink id="main-content">Skip to Main Content</SkipNavLink>

      {/* Simulated header and navigation */}
      <Box p="4" bg="gray.100" borderRadius="md" mb="4">
        <Text fontWeight="medium" mb="2">
          Header & Navigation
        </Text>
        <Text fontSize="sm" color="gray.600">
          This example uses a custom ID "main-content" for both components to
          ensure they match.
        </Text>
      </Box>

      {/* Main content area with custom ID */}
      <SkipNavContent id="main-content">
        <Box p="4" bg="green.50" borderRadius="md">
          <Text fontWeight="medium" mb="2">
            Main Content (Custom ID)
          </Text>
          <Text fontSize="sm">
            Both the SkipNavLink and SkipNavContent use the same custom ID
            "main-content" to ensure proper linking and focus management.
          </Text>
        </Box>
      </SkipNavContent>
    </Box>
  )
}

包含主要内容

¥With Main Content

SkipNavContent 组件可以封装你的主要内容区域，以确保正确的焦点管理。

¥The SkipNavContent component can wrap your main content area to ensure proper focus management.

Site Header

• Home

• About

• Services

• Contact

Welcome to Our Site

This is the main content area. The SkipNavContent component wraps this entire section, making it the target for the skip navigation link.

When keyboard users press Tab to focus the "Skip to Content" link and then press Enter, focus will jump directly to this content area, bypassing all the navigation items above.

This is especially helpful for users with screen readers or those who navigate primarily with keyboards.

import {
  Box,
  Heading,
  SkipNavContent,
  SkipNavLink,
  Text,
  VStack,
} from "@chakra-ui/react"

const Demo = () => {
  return (
    <Box>
      <SkipNavLink>Skip to Content</SkipNavLink>

      {/* Simulated header with multiple navigation items */}
      <Box p="4" bg="gray.100" borderRadius="md" mb="4">
        <Text fontWeight="medium" mb="2">
          Site Header
        </Text>
        <VStack align="start" gap="1">
          <Text fontSize="sm" color="gray.600">
            • Home
          </Text>
          <Text fontSize="sm" color="gray.600">
            • About
          </Text>
          <Text fontSize="sm" color="gray.600">
            • Services
          </Text>
          <Text fontSize="sm" color="gray.600">
            • Contact
          </Text>
        </VStack>
      </Box>

      {/* SkipNavContent wrapping main content */}
      <SkipNavContent>
        <Box p="6" bg="purple.50" borderRadius="md">
          <Heading size="lg" mb="4">
            Welcome to Our Site
          </Heading>

          <VStack align="start" gap="4">
            <Text>
              This is the main content area. The SkipNavContent component wraps
              this entire section, making it the target for the skip navigation
              link.
            </Text>

            <Text>
              When keyboard users press Tab to focus the "Skip to Content" link
              and then press Enter, focus will jump directly to this content
              area, bypassing all the navigation items above.
            </Text>

            <Text fontSize="sm" color="purple.600">
              This is especially helpful for users with screen readers or those
              who navigate primarily with keyboards.
            </Text>
          </VStack>
        </Box>
      </SkipNavContent>
    </Box>
  )
}

实际操作中

¥In Action

你可以在此页面上查看这些组件的实际效果！

¥You can see these components in action on this page!

将光标放在浏览器的地址栏中。
从 URL 中移除所有 ID 查询。（即 /skip-nav#usage）
点击 Enter 重新加载页面，然后点击 Tab。“跳过导航”链接将显示在左上角。
点击链接上的 Enter 将带你到文档内容的顶部。

展示

视觉隐藏