Keyboard navigation, Focus trap, Skip link, 키보드 접근성 3종

한 줄로

마우스 없이 키보드만으로 웹을 사용하는 사용자를 위한 핵심 패턴 3가지입니다.

Keyboard navigation

마우스 없이 Tab, 화살표, Enter, Space로 모든 동작이 가능해야 합니다. 접근성의 기본 요건입니다.

표준 키:

• Tab: 다음 요소.
• Shift + Tab: 이전 요소.
• Enter / Space: 선택·실행.
• Esc: 닫기·취소.
• 화살표: 메뉴·라디오 그룹 내 이동.

Focus trap

모달이 열려 있을 때 Tab이 모달 안에서만 순환합니다. 모달 뒤의 배경 요소로 못 가게 합니다.

예시: 결제 모달이 떠 있는데 Tab으로 배경의 헤더 메뉴로 가면 사용자가 헷갈립니다. focus trap이 이를 방지합니다.

라이브러리: focus-trap, Radix UI의 자동 처리.

Skip link

페이지 맨 위에 숨겨져 있다가 Tab하면 나타나는 링크입니다. "본문으로 건너뛰기"입니다.

스크린리더 사용자가 매번 네비게이션을 다 듣지 않고 본문으로 바로 갈 수 있게 합니다.

<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>
<header>...</header>
<main id="main-content">...</main>

CSS:

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 0;
}

바이브 메이커가 챙길 한 가지

본인 사이트를 마우스 없이 키보드만으로 한 번 사용해 봅시다. Tab 키만 누르면서 모든 동작이 가능한가요? 막히는 곳이 접근성 약점입니다.

관련

WCAG · Screen reader · Modal