@chakra-ui/skip-nav

为屏幕阅读器和键盘用户跳过导航链接. 因为主 内容通常不是文档中的第一件事,对 为键盘和屏幕阅读器用户跳过内容提供快捷键.

如果用户不使用键盘导航,他们不会看到链接.

安装

npm i @chakra-ui/skip-nav
# or
yarn add @chakra-ui/skip-nav

导入

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

使用量

ReactDOM.render(
  <>
    {/* 👇🏻 put the link at the top of your app */}
    <SkipNavLink>Skip to content</SkipNavLink>
    <div>
      <Navbar />
      {/* 👇🏻 and the content next to your main content */}
      <SkipNavContent>
        <App />
      </SkipNavContent>
    </div>
  </>,
  rootNode,
)