컴포넌트 갤러리
스킵 링크
쉬움
•접근성Preview
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")
프롬프트
프롬프트 팁
- •sr-only와 focus:not-sr-only로 숨김/표시
- •-translate-y-full로 화면 밖에 숨김
- •대상에 tabIndex={-1}로 포커스 가능하게
- •페이지 첫 번째 포커스 요소로 배치
Tags
#accessibility
#skip
#navigation
#a11y
#keyboard