Skip Link

키보드 사용자가 반복 탐색을 건너뛰고 본문으로 이동할 수 있게 하는 접근성 컴포넌트입니다.

이 예제 영역 안에서 Tab 키를 누르면 건너뛰기 링크가 표시됩니다.

examples/krds/skip-link-demo.tsx

import { SkipLink } from "@/components/ui/skip-link"

export default function SkipLinkDemo() {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/skip-link.json

import { SkipLink } from "@/components/ui/skip-link"

<SkipLink href="#main" label="본문 바로가기" />
<main id="main">...</main>

SkipLink는 반복 탐색을 건너뛰는 접근성 primitive입니다. 일반 navigation block이 아니라 문서/앱 최상단에 배치하는 키보드 focus 계약을 문서화합니다.

다음 조합으로 SkipLink를 사용할 수 있습니다.

SkipLink

키보드 사용자가 반복 탐색을 건너뛰고 본문으로 이동할 수 있게 하는 접근성 컴포넌트입니다.

이 예제 영역 안에서 Tab 키를 누르면 건너뛰기 링크가 표시됩니다.

examples/krds/skip-link-demo.tsx

import { SkipLink } from "@/components/ui/skip-link"

export default function SkipLinkDemo() {