가두지 말고 자유롭게

KRDS BP-081 — 사용자가 입력 필드의 초점을 자유롭게 이동시킬 수 있도록 제공하고 있다.

0. 들어가며 — 한 칸에 갇혀 못 빠져나오면

이번 647편은 사용자가 입력 필드의 초점을 자유롭게 이동시킬 수 있도록 제공하라는 규칙입니다.

키보드로 폼을 쓸 때 — Tab으로 다음 필드로, Shift+Tab으로 이전으로 자유롭게 오가야 하죠. 그런데 — 한 필드에 초점이 갇혀 못 빠져나오면(키보드 트랩) 폼을 못 씁니다. BP-081은 초점 자유 이동을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 초점 자유 이동

BP-081 (기본 패턴 > 입력 폼) “사용자가 입력 필드의 초점을 자유롭게 이동시킬 수 있도록 제공하고 있다.”

사용자가 입력 필드 간 초점을 자유롭게 이동할 수 있게 하라는 뜻입니다.

정리: 입력 필드 초점을 자유롭게 이동할 수 있게 하라. 이게 BP-081입니다.

2. 왜 초점 자유 이동인가

폼을 키보드로 쓰는 사용자(마우스를 못 쓰거나 안 쓰는)는, Tab 키로 필드를 오갑니다. Tab으로 다음 필드로, Shift+Tab으로 이전 필드로요. 이 초점 이동이 자유로워야 폼을 쓸 수 있죠. BP-081은 초점 자유 이동을 보장하라고 합니다.

초점이 자유롭지 못할 때의 문제:

키보드 트랩 한 필드(또는 위젯)에 초점이 갇혀, Tab을 눌러도 다음으로 못 가는 경우가 있습니다(키보드 트랩). 그러면 키보드 사용자는, 그 필드에 갇혀 폼을 진행도 못 하고, 빠져나오지도 못하죠. 최악의 접근성 장애 입니다(WCAG 2.1.2 키보드 트랩 없음 위반).

자동 이동 강제 어떤 폼은 한 칸 입력하면, 자동으로 다음 칸으로 초점을 강제 이동시킵니다(예: 인증번호 6칸). 이게 사용자 의도와 다르게 작동하면, 수정하려 이전 칸으로 가기 어렵거나 혼란스럽죠.

비논리적 순서 Tab 순서가 화면의 논리적 순서와 다르면(DOM 순서 엉킴), 초점이 엉뚱한 데로 튀어 혼란스럽 습니다(BP-068·WCAG 2.4.3).

그래서 BP-081은 — 자유로운 초점 이동을 보장합니다:

키보드 트랩 없음 어떤 필드·위젯도 초점을 가두지 않습니다. Tab/Shift+Tab으로 언제든 다음·이전으로 나갈 수 있게요(WCAG 2.1.2). 모달 등 의도적 초점 가둠(focus trap)도, ESC나 닫기로 빠져나올 수단을 주죠.

자유로운 이동 사용자가 원하는 필드로 자유롭게 갑니다. 자동 이동을 강제하더라도 사용자가 이전 칸으로 돌아가 수정할 수 있게요. 의도를 존중합니다.

논리적 Tab 순서 Tab 순서를 화면의 논리적·시각적 순서와 일치시킵니다(DOM 순서 = 읽기·초점 순서, WCAG 2.4.3). 초점이 자연스럽게 흐르게요. tabindex를 함부로 양수로 쓰지 않죠(순서 꼬임 방지).

왜 중요한가. 키보드 접근성은 지체 장애·시각 장애(스크린 리더) 사용자에게 필수입니다. 초점이 자유롭게 안 움직이면, 이들은 폼을 아예 못 씁니다. 신청·민원이 불가능해지죠. 초점 자유 이동은 폼의 키보드 접근성 기본입니다.

관련 규칙. 키보드 조작(BP-059 플레이어, BP-065 오류 초점), 논리적 순서(BP-068) 등과 — 함께 키보드 접근성을 이룹니다. BP-081은 — 입력 폼에서의 초점 자유 이동을 명시하죠.

이 규칙은 입력 폼의 ’초점 이동 자유’를 담당합니다 — 초점을 자유롭게 이동하게 해(081), 키보드 사용자가 갇히지 않고 폼을 끝까지 쓰게 하죠.

정리하면 — 초점이 한 필드에 갇히거나(키보드 트랩) 자유롭지 못하면 키보드 사용자가 폼을 못 쓰므로, 키보드 트랩을 없애고 Tab/Shift+Tab으로 자유롭게, 논리적 순서로 초점을 이동할 수 있게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

키보드 트랩 없음 — 어떤 필드·위젯도 초점을 가두지 않는가(WCAG 2.1.2).

자유 이동 — Tab/Shift+Tab으로 다음·이전 필드로 자유롭게 가는가.

논리적 순서 — Tab 순서가 화면의 논리적·시각적 순서와 일치하는가.

개선 방향

키보드 트랩 제거(모달은 ESC·닫기로 탈출). 자동 이동 시 수정 가능.

DOM 순서 = Tab 순서(WCAG 2.4.3). tabindex 양수 남용 금지.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
개발	초점 관리·Tab 순서 구현
QA/접근성	키보드 트랩·순서 검증

기관 유형	BP-081 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상이며 입력 폼이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 어떤 필드·위젯도 초점을 가두지 않나요(WCAG 2.1.2)?

□ Tab/Shift+Tab으로 다음·이전 필드로 자유롭게 가나요?

□ Tab 순서가 화면의 논리적·시각적 순서와 일치하나요?

❓ FAQ

Q1. 키보드 트랩이 뭔가요? 한 필드·위젯에 초점이 갇혀 Tab으로 빠져나오지 못하는 상태입니다. 키보드 사용자가 폼에 갇혀 못 쓰는 최악의 장애죠(WCAG 2.1.2 위반). Q2. 인증번호 자동 이동은 안 되나요? 자동 이동을 하더라도 사용자가 이전 칸으로 돌아가 수정할 수 있어야 합니다. 의도를 존중하고 가두지 않으면 되죠. Q3. Tab 순서가 왜 화면 순서와 같아야 하나요? 초점이 엉뚱한 데로 튀면 혼란스럽습니다. DOM 순서=Tab 순서로 자연 스럽게 흐르게요(WCAG 2.4.3). tabindex 양수를 남용하면 순서가 꼬이죠.

6. 마무리

BP-081의 메시지:

가두지 말고 자유롭게 — 입력 필드 초점을 자유롭게 이동할 수 있게 하라.

초점이 갇히거나 자유롭지 못하면 키보드 사용자가 폼을 못 씁니다. 키보드 트랩을 없애고 Tab으로 자유롭게, 논리적 순서로 이동하게 하는 게 핵심이죠. 다음 편은 필수 항목 보조기술 인지입니다.

다음 편 예고 ▶ 「648. (BP-082) 필수 입력 항목 정보는 보조 기술이 확인할 수 있는 형태로 제공하고 있다.」

ViewCheck는 입력 필드 초점이 자유롭게 이동되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 입력 폼 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_08.html

WCAG 2.1 SC 2.1.2 No Keyboard Trap / 2.4.3 Focus Order — https://www.w3.org/WAI/WCAG21/Understanding/

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준