보이는 순서대로 포커스도

KRDS CP-068 — 키보드의 초점은 메뉴의 계층 순서대로 이동하도록 구현되어 있다.

0. 들어가며 — 메뉴 그룹의 마무리

이번 188편은 메인 메뉴 그룹(CP-054~068)의 마지막, 키보드 초점이 메뉴 계층 순서대로 이동하는 규칙입니다.

CP-067에서 메뉴를 키보드로 탐색할 수 있게 했다면, CP-068은 그 탐색의 ’순서’를 규정합니다 — 초점이 메뉴의 계층 구조(상위→하위, 시각 순서)대로 논리적으로 이동해야 한다는 것이죠. 순서가 뒤죽박죽이면 키보드 사용자가 길을 잃습니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 계층 순서대로 이동

CP-068 (컴포넌트 > 메인 메뉴) “키보드의 초점은 메뉴의 계층 순서대로 이동하도록 구현되어 있다.”

키보드 초점(포커스)이 메뉴의 계층 구조·논리 순서대로 이동하게 구현하라는 뜻입니다.

정리: 키보드 초점은 메뉴의 계층 순서대로 이동하게 구현하라. 이게 CP-068, 메인 메뉴 그룹의 마지막 입니다.

2. 왜 초점이 계층 순서를 따라야 하나

키보드 사용자는 Tab·화살표로 메뉴를 탐색하며, 그때 초점(포커스)이 한 항목에서 다음 항목으로 이동합니다. 이 이동 순서가 논리적·예측 가능해야 사용자가 길을 잃지 않죠.

메뉴는 계층 구조를 가집니다 — 1수준(대분류) > 2수준(중분류) > 3수준(소분류). 그리고 같은 수준 안에서는 좌→우 (또는 위→아래) 순서가 있죠. 시각 사용자는 이 구조를 눈으로 보며 탐색합니다. 키보드 사용자의 초점도 이 계층·시각 순서와 일치하게 이동해야 합니다 — 예: 1수준 항목들을 순서대로 거치고, 한 항목의 하위 메뉴를 펼치면 그 하위 항목들을 순서대로 거친 뒤, 다시 다음 1수준으로 가는 식이죠.

문제는 초점 이동 순서가 DOM 순서나 구현에 따라 시각·계층 순서와 어긋날 때입니다. 예를 들어 — CSS로 시각 순서를 바꿨는데(order 속성) DOM 순서는 그대로라, Tab을 누르면 화면에서 보이는 순서와 다른 순서로 초점이 튀는 경우죠. 또는 드롭다운 하위 항목이 DOM상 엉뚱한 곳에 있어, 펼친 뒤 Tab하면 하위 항목이 아니라 엉뚱한 곳으로 초점이 가는 경우입니다. 이러면 키보드 사용자는 ‘내 포커스가 지금 어디로 갔지?’ 혼란스럽고, 메뉴 구조를 따라가지 못해 길을 잃습니다.

CP-068은 이를 막습니다 — 초점이 메뉴의 계층 순서(상위→하위)와 시각 순서를 그대로 따라 이동해야 합니다. ‘보이는 순서 = 초점 이동 순서 = DOM 순서’가 일치해야, 키보드 사용자가 시각 사용자와 같은 논리로 메뉴를 탐색 하죠. 이는 헤더 순서(CP-018)·푸터 순서(CP-042)에서 본 ’DOM 순서 = 시각 순서 = 초점 순서’ 원리의 메뉴 적용 이고, WCAG 2.4.3(Focus Order, 초점 순서)와 직결됩니다.

구현은 — ① DOM 순서를 계층·시각 순서와 일치시키고(order 남용 회피), ② 드롭다운 하위 항목을 DOM상 해당 상위 항목 안에 두며(중첩 구조, CP-065), ③ 화살표 키 인터랙션이 계층을 따라 동작하게(WAI-ARIA 메뉴 패턴) 하는 것입니다. 그러면 초점이 메뉴 구조를 자연스럽게 따라가죠.

이 규칙이 메인 메뉴 그룹의 마지막을 장식하는 것은 적절합니다 — CP-062(확장)·067(키보드 탐색)·068(초점 순서) 이 메뉴의 키보드 접근성을 단계적으로 완성하니까요. 펼칠 수 있고(062), 탐색할 수 있고(067), 그 탐색이 논리적 순서를 따른다(068)는 삼박자가 갖춰져야 키보드 사용자가 메뉴를 온전히 씁니다.

3. 점검 / 개선

무엇을 점검하나

계층 순서 이동 — 초점이 메뉴 계층(상위→하위) 순서대로 이동하는가.

시각=초점 순서 — 화면에 보이는 순서와 초점 이동 순서가 일치하는가.

드롭다운 초점 — 하위 메뉴를 펼치면 초점이 그 하위 항목으로 논리적으로 이동하는가.

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

역할	책임
개발(프론트)	DOM=계층·시각 순서 일치, 초점 이동 구현
접근성 담당	키보드 초점 순서 검수

기관 유형	CP-068 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

행정·공공기관 디지털 정부서비스 = 전부 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 초점이 메뉴 계층 순서대로 이동하나요?

□ 화면에 보이는 순서와 초점 이동 순서가 일치하나요?

□ 하위 메뉴를 펼치면 초점이 그 하위 항목으로 논리적으로 이동하나요?

❓ FAQ

Q1. 왜 초점 순서가 어긋나나요? CSS order로 시각 순서만 바꾸거나, 드롭다운 하위 항목이 DOM상 엉뚱한 곳에 있으면 초점이 튑니다. DOM=시각 순서면 안전합니다. Q2. CP-067과 다른가요? 067은 ‘키보드로 탐색 가능’, 068은 ’그 탐색이 계층 순서를 따름’입니다. 함께 완성 됩니다. Q3. KRDS를 채택하면 자동인가요? 표준 메뉴는 초점이 계층 순서대로 이동합니다.

6. 마무리 — 메인 메뉴 그룹을 마치며

CP-068의 메시지:

보이는 순서대로 포커스도 — 초점이 메뉴 계층을 논리적으로 따라가야 길을 잃지 않는다.

키보드 초점이 메뉴의 계층·시각 순서대로 이동해야, 키보드 사용자가 시각 사용자와 같은 논리로 메뉴를 탐색합니다. ‘DOM=시각=초점 순서’ 일치가 핵심이죠. CP-062·067·068이 메뉴의 키보드 접근성을 완성합니다.

이로써 메인 메뉴(Main menu) 그룹 15개 규칙(CP-054~068)을 마쳤습니다. 정렬(054)·높이(055)·상태(056)·제목 (057)·개수(058)·구조(059)·용어(060)·순서(061)·확장(062)·반응형(063)·랜드마크(064)·계층(065)·활성전달(066)· 키보드(067·068) — 사이트 내비게이션의 핵심을 촘촘히 규정한 15개였습니다.

지금까지 공식배너(6)+식별자(8)+헤더(17)+푸터(13)+건너뛰기링크(9)+메인메뉴(15) = CP 68개를 마쳤습니다. 다음 편부터는 브레드크럼(Breadcrumb) 그룹 20개(CP-069~088)로 넘어갑니다. 현재 위치 경로를 보여주는 내비게이션 컴포넌트입니다.

다음 편 예고 ▶ 「189. (CP-069) 브레드크럼 그룹의 첫 규칙」 — 브레드크럼(Breadcrumb) 20개 규칙 시작

ViewCheck는 키보드 초점이 메뉴 계층 순서대로 이동하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 메인 메뉴(Main menu) 가이드 — https://www.krds.go.kr/html/site/component/component_06.html

WCAG 2.1 SC 2.4.3 Focus Order

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

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