Focus trap, Skip link 상세

이미 Keyboard navigation에서 다룬 두 개념의 구현 상세입니다.

Focus trap 구현

모달이 열리면 포커스가 모달 안에서만 순환해야 합니다.

수동 구현:

const modal = document.querySelector('.modal');
const focusables = modal.querySelectorAll('button, input, a');
const first = focusables[0];
const last = focusables[focusables.length - 1];

last.addEventListener('keydown', (e) => {
  if (e.key === 'Tab' && !e.shiftKey) {
    e.preventDefault();
    first.focus();
  }
});

first.addEventListener('keydown', (e) => {
  if (e.key === 'Tab' && e.shiftKey) {
    e.preventDefault();
    last.focus();
  }
});

라이브러리: focus-trap, Radix UI, Headless UI.

Skip link 상세

좋은 skip link의 조건입니다.

페이지의 첫 번째 인터랙티브 요소, 평소엔 시각적으로 숨김, Tab으로 포커스되면 나타남, 충분한 색 대비.

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 12px;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;
}

검사 방법

본인 사이트에서 다음을 확인합니다. Tab을 누르고 첫 포커스가 어디에 가는지 확인합니다. 모달을 열고 Tab을 끝까지 눌러서 포커스가 모달 밖으로 안 나가는지 확인합니다.

이 두 가지가 키보드 접근성의 가장 흔한 결함입니다.

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

Headless UI나 Radix UI 같은 접근성 라이브러리를 쓰면 focus trap이 자동 처리됩니다. 직접 구현보다 안전합니다.

관련

Keyboard navigation, Modal, ARIA