SkipLink
초점을 받으면 나타나는 “본문으로 건너뛰기”.
- 출시 화면에서 사용
개요
미리보기
예시
상태
숨김(Tab을 눌러 보기)
초점
쓰임 예
가장 긴 문구 (es)
이렇게 · 이렇게 하지 않기
- 이렇게 모든 화면의 첫 초점 대상이다. 초점을 받으면 반드시 보이고 대상은 main 영역이다.
- 이렇게 문구는 모든 화면에서 같다.
- 이렇게 하지 않기 display:none으로 숨기지 않는다. 초점을 받을 수 없게 된다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
href? | string | #main | 페이지 안 대상. <main id="main">이어야 한다. |
children? | ReactNode | | 라벨. 비우면 UI 언어의 “본문으로 건너뛰기”. 모든 화면에서 같은 문구. |
focused? | boolean | false | 카탈로그·검토 전용: 초점 받은 모양을 강제로 보인다. |
ref | — | — | ref는 <a>로 전달된다. |
| 그 밖의 속성 | — | — | id, onClick, aria-* 등 네이티브 a 속성은 그대로 전달된다. className·style은 받지 않는다. |
접근성
키보드: 첫 Tab에 보이고 Enter로 main(tabindex=-1)에 초점.
- 대상에 tabindex가 없으면 -1을 붙이고 초점을 옮긴다. 다음 Tab은 본문에서 이어진다.
- 숨김은 clip-path 방식이라 보조기기에서 읽힌다.