초점 이동과 표시

무엇을 요구하나요?

두 가지를 함께 요구합니다.

1. 초점 이동 순서: Tab을 누를 때 초점이 화면의 의미 흐름(보통 위→아래, 왼쪽→오른쪽)대로 이동해야 합니다.
2. 초점 표시: 지금 어느 요소에 초점이 있는지 눈으로 알 수 있어야 합니다.

키보드 사용자에게 초점 표시는 마우스 포인터와 같습니다. 표시가 없으면 어디를 누르게 될지 알 수 없습니다.

자주 틀리는 예

1. 초점 테두리를 모두 없앰

가장 흔한 실수입니다. CSS 초기화 코드에 들어 있는 경우도 많습니다.

*:focus { outline: none; }
a:focus, button:focus { outline: 0; }

:focus-visible {
  outline: 3px solid #1b64da;
  outline-offset: 2px;
}

배경과 대비가 충분한 색으로, 테두리 두께는 2px 이상을 권장합니다. 테두리 대신 배경색·밑줄·그림자로 표시해도 되지만, 바뀐 모습이 분명히 보여야 합니다.

2. 양수 tabindex로 순서를 바꿈

tabindex="1" 이상을 쓰면 그 요소들이 문서 순서와 상관없이 맨 먼저 이동합니다. 페이지가 커질수록 순서가 꼬입니다.

<a href="/login" tabindex="1">로그인</a>

<a href="/login">로그인</a>

순서를 바꾸고 싶다면 HTML 순서 자체를 화면 흐름에 맞게 바꾸세요. CSS의 order, flex-direction: row-reverse, position으로 보이는 순서만 바꾸면 Tab 순서와 어긋납니다.

3. 모달을 열어도 초점이 뒤에 남음

모달이 열리면 초점을 모달 안(제목이나 첫 입력 칸)으로 옮기고, 닫으면 모달을 연 버튼으로 돌려주세요.

openBtn.addEventListener('click', () => {
  dialog.showModal(); // <dialog>는 초점 이동과 Esc 닫기를 기본으로 해 줍니다
});
dialog.addEventListener('close', () => openBtn.focus());

4. 숨긴 요소에 초점이 감

화면에서 숨긴 메뉴를 opacity: 0이나 화면 밖 위치로만 숨기면 Tab이 보이지 않는 곳으로 갑니다. 닫힌 메뉴는 display: none, hidden 속성, 또는 inert로 숨기세요.

확인하는 방법

1. 탭 포커스 점검이나 북마클릿으로 예상 Tab 순서를 번호로 보고, 양수 tabindex와 outline을 없앤 요소를 찾으세요.
2. 북마클릿의 “실제 이동 기록”으로 직접 Tab을 눌러 실제 순서를 기록하고 예상과 비교하세요.
3. 초점 표시는 :focus-visible 등 상황에 따라 달라 자동 확인이 틀릴 수 있습니다. 직접 Tab을 눌러 모든 요소에서 표시가 보이는지 확인하세요.

고정 헤더·쿠키 배너·채팅 버튼에 초점이 가려지는 문제는 국제 표준 WCAG 2.2의 “포커스 가림 방지” 항목입니다. scroll-padding-top으로 고정 영역만큼 여백을 주면 많이 줄일 수 있습니다.