Skip Link (건너뛰기 링크) — 퍼블릭아이디 디자인시스템

Components · 내비게이션

키보드 사용자가 반복되는 헤더·내비게이션을 건너뛰고 본문으로 바로 이동하도록, 평소 숨어 있다가 포커스 시 나타나는 링크. 이 디자인시스템 사이트도 최상단에 하나 둔다.

정의

문서 첫머리에 숨어 있다가 포커스되면 나타나 본문으로 바로 이동시키는 내비게이션 링크 컴포넌트다.

Anatomy

부위	토큰
① 링크(숨김)	평소 화면 밖(off-screen), 탭 순서에는 존재 — 문서상 첫 포커스 요소
② 노출 상태	bg `--skiplink-bg`(네이비) · fg `--skiplink-fg` · 패딩 `--skiplink-pad-y`/`--skiplink-pad-x` · 포커스 링 `--focus-ring` · 겹침 순서 `--z-sticky`
③ 이동 대상	`<main id="main">` 등 본문 컨테이너(`href="#main"`)

변형

변형	용도
본문 바로가기(기본)	"본문 바로가기" 1개 — 대부분의 페이지에 충분
다중 건너뛰기	본문·내비게이션·검색 등 2~3개 — 복잡한 레이아웃에서만(최대 3개)

상태

상태	값
Idle(숨김)	화면 밖 — 시각적으로 안 보이나 DOM·탭 순서에는 존재
Focus(노출)	화면 상단에 나타남 — bg `--skiplink-bg` · fg `--skiplink-fg` + `box-shadow: var(--focus-ring)`
Active	클릭·`Enter` 시 `#main`으로 포커스·스크롤 이동

Do / Don't

문서에서 가장 먼저 포커스되는 요소로 둔다(여는 <body> 직후, 헤더보다 앞).
이동 대상(<main id="main">)에 tabindex="-1"을 주어 실제로 포커스가 옮겨지게 한다.
평소엔 숨기되 화면 밖으로 밀어 탭 순서에 남긴다.

Don't

display:none·visibility:hidden으로 감추지 말 것 — 키보드 포커스를 받지 못한다.
포커스 시에도 보이지 않게 하지 말 것(포커스 스타일 제거 금지).
사이드바·유틸 버튼 등 부차 요소를 건너뛰기 대상으로 삼지 말 것.

콘텐츠 규칙

라벨은 목적지를 밝히는 명사구 "본문 바로가기"(KRDS 관용 표현). 다중이면 "내비게이션 바로가기"처럼 대상을 명시한다.
2~4어절, 한 줄. "여기를 누르세요" 같은 맥락 없는 표현 금지.

키보드 인터랙션

키	동작
`Tab`(페이지 진입 첫 타)	숨어 있던 건너뛰기 링크가 화면에 나타나며 포커스
`Enter`	본문(`#main`)으로 포커스·스크롤 이동
`Tab`(한 번 더)	링크를 지나 다음 요소(헤더)로 이동

접근성

문서상 첫 번째 포커스 가능 요소 — 반복 요소를 건너뛰게 하는 WCAG 2.4.1(Bypass Blocks) 충족 수단.
off-screen 기법으로 숨기되 탭 순서에 남긴다(display:none 금지).
이동 대상에 tabindex="-1"을 주어 링크 활성화 시 초점이 본문으로 실제 이동하게 한다.
웹접근성 인증이 목표인 사이트에는 필수(KRDS 규격). 기준: ../guidelines/accessibility.md.

코드

본문 바로가기

헤더 · 내비게이션 (Tab으로 건너뛸 수 있음)

본문 시작

건너뛰기 링크로 반복 요소를 지나 여기까지 바로 이동했습니다.

html

<a class="pi-skiplink" href="#main">본문 바로가기</a>
<header class="pi-skiplink-demo__bar">헤더 · 내비게이션 (Tab으로 건너뛸 수 있음)</header>
<main id="main" tabindex="-1" class="pi-skiplink-demo__main">
  <h2>본문 시작</h2>
  <p>건너뛰기 링크로 반복 요소를 지나 여기까지 바로 이동했습니다.</p>
</main>

css

.pi-skiplink {
  position: absolute; top: var(--space-2); left: var(--space-2); z-index: var(--z-sticky);
  transform: translateY(calc(-100% - var(--space-6)));
  padding: var(--skiplink-pad-y) var(--skiplink-pad-x);
  border-radius: var(--radius-md);
  background: var(--skiplink-bg);
  color: var(--skiplink-fg);
  font: var(--text-label); letter-spacing: var(--text-label-letter-spacing);
  text-decoration: none; word-break: keep-all;
  transition: transform var(--duration-base) var(--easing-out);
}
.pi-skiplink:focus { transform: translateY(0); outline: none; box-shadow: var(--focus-ring); }

/* 데모 보조 */
.pi-skiplink-demo__bar {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm);
  background: var(--color-bg-subtle); color: var(--color-text-muted);
  font: var(--text-body-sm);
}
.pi-skiplink-demo__main { padding: var(--space-5) 0 0; }
.pi-skiplink-demo__main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) { .pi-skiplink { transition: none; } }

Changelog

날짜	변경
2026-07-15	문서 계약(10섹션) 적용 — KRDS 벤치마킹 규격(2026-07-15) 승계, off-screen→포커스 노출 코드·Anatomy 도해·키보드/접근성 신설