키보드 내비게이션

키보드 내비게이션은 접근성의 보조 기능이 아니라
UI 기본 동작 기준입니다.
마우스 없이도 UI 흐름이 자연스럽게 이어져야 합니다.

접근성을 UI 품질로 다루는 관점은 접근성 철학을 참고하세요.

키보드 내비게이션의 기본 원칙

키보드 내비게이션은 다음 원칙을 따릅니다.

모든 인터랙션 요소는 키보드로 접근 가능해야 합니다.
포커스 이동 순서는 시각적 흐름과 일치해야 합니다.
포커스 위치는 항상 시각적으로 확인 가능해야 합니다.

키보드 사용자는
UI의 예외 케이스가 아닙니다.

포커스 흐름 설계 기준

포커스 흐름은 구조를 기준으로 설계합니다.

DOM 순서가 곧 포커스 순서입니다.
구조적 순서를 CSS로 뒤집지 않습니다.
임의의 tabindex 사용을 지양합니다.

양수 tabindex는 DOM 순서를 무시하고 포커스 순서를 뒤섞으므로 사용하지 않습니다. 비표준 요소에 포커스가 필요할 때만 tabindex="0"으로 자연스러운 흐름에 편입시킵니다.

<!-- ❌ 나쁜 예: 양수 tabindex로 순서를 인위적으로 조작 -->
<button class="btn m_primary" type="button" tabindex="3">저장</button>
<a class="i_link" href="/help" tabindex="1">도움말</a>

<!-- ✅ 좋은 예: DOM 순서를 그대로 따르고, 비표준 요소만 0으로 편입 -->
<button class="btn m_primary" type="button">저장</button>
<a class="i_link" href="/help">도움말</a>
<div class="accordion" data-state="close"><button class="i_trigger" type="button">더 보기</button></div>

포커스 순서는 DOM 구조를 그대로 따릅니다.

포커스 가능한 요소 기준

다음 요소는 기본적으로 키보드 접근이 가능해야 합니다.

버튼, 링크
입력 요소
토글, 드롭다운 등 인터랙션 UI

비표준 요소를 사용하는 경우에도
키보드 접근성을 반드시 보장해야 합니다.

포커스 스타일 규칙

포커스 스타일은 제거하지 않습니다.

기본 포커스 스타일을 유지하거나
명확한 대체 스타일을 제공합니다.

마우스 클릭에는 표시하지 않고 키보드 포커스에만 표시하려면 :focus-visible을 사용합니다.

.btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; border-radius: 4px; }
.i_trigger:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

포커스가 보이지 않는 UI는
키보드 사용자에게 사용 불가능한 UI입니다.

키보드 인터랙션 기준

키보드 인터랙션은 다음 기준을 따릅니다.

Enter, Space 키 동작은 명확히 정의합니다.
Escape 키는 닫기/취소 역할을 수행해야 합니다.
방향키 사용 시 일관된 이동 규칙을 유지합니다.

이벤트는 JS에서 등록하고, 키 입력에 따라 data-state만 토글합니다. 스타일은 CSS가 담당합니다.

const modal = document.querySelector(".modal_login");
const trigger = document.querySelector(".accordion .i_trigger");

// Esc: 열린 요소 닫기
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && modal.dataset.state === "open") modal.dataset.state = "close";
});

// Enter/Space: 활성화(토글)
trigger.addEventListener("keydown", (e) => {
  if (e.key !== "Enter" && e.key !== " ") return;
  e.preventDefault();
  const accordion = trigger.closest(".accordion");
  accordion.dataset.state = accordion.dataset.state === "open" ? "close" : "open";
});

키보드 동작은
사용자가 예측 가능한 방식으로 동작해야 합니다.

키보드 내비게이션 점검 기준

키보드 내비게이션을 점검할 때는 다음을 확인합니다.

마우스를 사용하지 않고 모든 기능을 수행할 수 있는가
포커스가 사라지거나 갇히지 않는가
상태 변경 시 포커스가 적절히 이동하는가
시각적 포커스 표시가 충분히 명확한가

이 네 가지는 키보드 사용자의 최소 사용 조건입니다.

키보드 내비게이션의 목적

키보드 내비게이션 기준은
모든 사용자가 UI를 동일한 흐름으로 사용할 수 있도록 하기 위한 조건입니다.

접근성을 UI 품질로 다루는 배경은 접근성 철학에서 다룹니다.