Component Gallery
Skip Link
Easy
•AccessibilityPreview
Skip Link Examples
Skip to main
Demo Site
Main Content Area
이 영역이 메인 콘텐츠입니다. Skip Link를 사용하면 반복되는 네비게이션을 건너뛰고 바로 이 영역으로 이동할 수 있습니다.
Multiple Skip Links Pattern
복잡한 페이지에서는 여러 개의 Skip Link를 제공할 수 있습니다.
구현 팁
- • Skip Link는 페이지의 첫 번째 포커스 가능한 요소여야 합니다
- • 기본적으로 숨겨져 있다가 Tab 키로 포커스 시 표시되어야 합니다
- • 대상 요소에 tabIndex={-1}를 추가하면 포커스를 받을 수 있습니다
- • 명확한 레이블을 사용하세요 (예: "Skip to main content")
Prompt
Prompt Tips
- •Hide/show with sr-only and focus:not-sr-only
- •Hide off-screen with -translate-y-full
- •Make target focusable with tabIndex={-1}
- •Place as first focusable element on page
Tags
#accessibility
#skip
#navigation
#a11y
#keyboard