SkipLink

키보드 및 스크린 리더 사용자가 반복적인 콘텐츠를 건너뛰고 주요 콘텐츠로 바로 이동할 수 있도록 돕는 접근성 필수 컴포넌트입니다.

개요

SkipLink(건너뛰기 링크)는 키보드 사용자와 스크린 리더 사용자가 헤더, 네비게이션 등 반복적인 콘텐츠를 건너뛰고 페이지의 주요 콘텐츠로 바로 이동할 수 있도록 돕는 컴포넌트입니다. WCAG 2.1 / KWCAG 2.2 Level A 기준 "Bypass Blocks (2.4.1)"을 충족하기 위해 반드시 구현해야 합니다.

설치

사용법

SkipLink는 페이지의 가장 첫 번째 요소로 배치해야 합니다 (쿠키 배너/모달 제외).

예제

숨김 (기본)

기본적으로 숨겨진 상태이며, Tab 키를 눌러 포커스를 받으면 화면에 나타납니다.

Tab 키를 눌러 포커스를 확인하세요

단일 링크

대부분의 경우 본문 바로가기 링크 하나만 제공하면 충분합니다.

구현 팁

  • 페이지 최상단 배치: body 요소의 첫 번째 자식 요소로 배치하세요 (쿠키 배너/모달 제외)
  • 단순하게 유지: 링크는 최대 3개까지만 권장합니다. 대부분의 경우 "본문 바로가기" 하나면 충분합니다
  • 명확한 라벨: "본문 바로가기", "주 메뉴 바로가기" 등 명확한 한글 라벨을 사용하세요
  • 대상 요소 설정: 대상 요소(main, nav 등)에 id와 tabIndex={-1}을 설정하세요
  • KRDS ID 자동 적용: 컴포넌트는 자동으로 id="krds-skip-link"를 가집니다

접근성

WCAG 2.1 / KWCAG 2.2 AA 레벨을 준수합니다.

  • Bypass Blocks (2.4.1): Level A 필수 기준으로, 반복되는 콘텐츠 블록을 건너뛸 수 있는 메커니즘 제공
  • 키보드 접근성: Tab 키로 포커스, Enter 키로 이동
  • 포커스 관리: 링크 클릭 시 대상 요소로 자동 스크롤 및 포커스 이동
  • 시각적 피드백: 포커스 시 명확한 포커스 링 표시
  • Semantic HTML: <nav> 요소와 aria-label 속성으로 스크린 리더 지원