03 · Components · 탐색
건너뛰기 링크Skip Navigation
스크린리더·키보드 사용자가 반복되는 내비게이션을 건너뛰고 본문으로 바로 이동하도록 돕는 숨겨진 링크. 포커스될 때만 시각적으로 나타납니다.
StableWCAG AA
기본 구현
tsx
<a
href="#main"
className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-[color:var(--color-text)] focus:px-4 focus:py-2 focus:text-[color:var(--color-surface)]"
>
본문으로 건너뛰기
</a>
...
<main id="main">...</main>미리보기
Tab 키를 눌러 페이지 최상단에 포커스를 주면 숨겨진 링크가 나타납 니다. 아래는 항상 보이는 예시입니다.
본문으로 건너뛰기건너뛰기 링크는 페이지의 첫 번째 포커스 가능 요소여야 합니다. 기본적으로 시각적으로 숨기되(sr-only), 키보드 포커스 시에만 나타나도록 합니다.