Skip Nav

Skip Nav (스킵 내비게이션)

Skip Nav Link는 키보드 사용자가 페이지의 메인 콘텐츠로 바로 건너뛸 수 있게 해주는 접근성 컴포넌트예요. 화면 읽기 프로그램과 키보드 사용자를 위한 링크와 대상 컨테이너를 제공해요.

출처: 문서

본문

사용법 (Usage)

Skip Navigation 링크와 대상 컨테이너는 화면 읽기 프로그램과 키보드 사용자를 위한 것이에요.

WebAIM.org의 WCAG 2.4.1 (Bypass Blocks - Level A)에 따르면, 메인 콘텐츠가 페이지에서 사용자가 처음 만나는 섹션이 아닌 경우가 많기 때문에, 여러 페이지에 걸쳐 존재하는 콘텐츠를 건너뛸 수 있도록 스킵 링크를 포함하는 것이 강력히 권장돼요. 내비게이션 링크가 가장 흔히 건너뛰는 대상이에요.

화면 읽기 프로그램이나 특수 소프트웨어를 쓰는 사용자는 제목이나 main 영역을 통해 콘텐츠를 건너뛸 수 있지만, 주로 키보드를 쓰는 시각 사용자에게는 이것만으로 충분하지 않아요.

import { SkipNavContent, SkipNavLink } from "@chakra-ui/react"

<SkipNavLink>Skip to content</SkipNavLink>
<SkipNavContent />

예시 (Examples)

기본 사용법 (Basic Usage)

SkipNavLink 컴포넌트는 이상적으로 페이지가 로드된 후 사용자가 탐색을 시작할 때 가장 먼저 만나는 항목 중 하나여야 해요. 따라서 가능한 한 앱의 상단에 배치하는 것을 권장해요.

이 컴포넌트는 a 태그를 렌더링하며, SkipNavContent를 가리키는 href 속성을 가진 링크를 자동으로 만들어줘요.

SkipNavContent 컴포넌트는 링크의 대상으로 사용되어 첫 번째 메인 콘텐츠에 키보드 포커스를 놓아줘요. div를 렌더링하며, 자기 닫힘 컴포넌트로 쓰거나 메인 콘텐츠를 감쌀 수 있어요.

커스텀 ID (Custom ID)

id prop을 사용해 커스텀 id 값을 지정할 수 있지만, 이 prop과 값을 두 컴포넌트 모두에 사용해야 해요. 그렇지 않으면 서로 매칭되지 않아요.

메인 콘텐츠와 함께 (With Main Content)

SkipNavContent 컴포넌트는 메인 콘텐츠 영역을 감싸 올바른 포커스 관리를 보장할 수 있어요.

직접 사용해보기 (In Action)

이 컴포넌트들이 동작하는 모습을 이 페이지에서 직접 볼 수 있어요!

  1. 브라우저 주소창에 커서를 놓으세요.
  2. URL에서 id 쿼리를 제거하세요. (예: /skip-nav#usage)
  3. Enter를 눌러 페이지를 다시 로드한 뒤 Tab을 누르세요. Skip Nav 링크가 왼쪽 위에 나타날 거예요.
  4. 링크에서 Enter를 누르면 문서 콘텐츠의 맨 위로 이동할 거예요.

더 알아보기 (Learn more)