보이는 순서대로 닿아야

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

0. 들어가며 — 닿는 건 되는데 순서가 뒤죽박죽이면

이번 223편은 키보드 초점이 사이드 메뉴의 계층 순서대로 이동하게 하라는 규칙입니다.

CP-102에서 메뉴 링크에 키보드로 ‘닿을 수 있게’ 했습니다. 그런데 닿는 것만으론 부족하죠 — 닿는 순서가 중요합니다. Tab을 눌렀을 때 초점이 1수준 → 그 하위 2수준 → 다음 1수준 순으로, 즉 화면에 보이는 계층 순서 대로 움직여야 합니다. 순서가 뒤죽박죽이면 키보드 사용자는 길을 잃죠. CP-103은 초점 이동 순서를 규정합니다. 이번 편을 풀어냅니다.

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

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

키보드로 초점을 옮길 때(Tab 등), 초점이 사이드 메뉴의 계층 구조와 시각적 순서에 맞게(상위 → 그 하위 → 다음 상위 …) 이동하게 구현하라는 뜻입니다.

정리: 초점은 메뉴 계층·시각 순서대로 자연스럽게 이동해야 한다. 이게 CP-103입니다.

2. 왜 초점 순서가 계층을 따라야 하나

키보드 사용자는 화면을 보거나(저시력 포함) 스크린 리더로 들으며 Tab으로 요소를 하나씩 순회합니다. 이때 초점이 움직이는 순서 = 사용자가 콘텐츠를 인지하는 순서죠. 이 순서가 화면의 시각적·논리적 순서와 일치 해야, 사용자는 ‘예측 가능하게’ 메뉴를 훑습니다(WCAG SC 2.4.3 Focus Order). 순서가 어긋나면 혼란이 생깁니다.

사이드 메뉴는 계층(상위-하위)을 갖습니다. 자연스러운 초점 순서는 — 1수준 항목 A → A의 하위 a1, a2 → 다음 1수준 항목 B → B의 하위 b1, b2 … 처럼, 보이는 들여쓰기 순서 그대로 흐르는 것이죠. 사용자는 Tab을 누를 때마다 ‘대분류 A로 들어가서, 그 안의 소분류들을 거쳐, 다음 대분류 B로’ 라는 구조를 따라가며 메뉴를 머릿속에 그립니다.

문제가 되는 경우는 — DOM 순서나 tabindex 조작 때문에 초점이 시각 순서와 다르게 튀는 것입니다. 예를 들어:

CSS(order, float, 절대 위치 등)로 시각 배치를 바꿨는데 DOM 순서는 그대로여서, 보이는 순서와 초점 순서가 어긋남.

tabindex에 양수 값(tabindex="3" 등)을 남발해 초점 순서를 인위적으로 비틀어, 예측 불가능해짐.

하위 메뉴가 DOM상 엉뚱한 위치에 있어, 상위 A를 지나 갑자기 먼 곳의 하위로 점프함.

이러면 키보드 사용자는 “방금 A에 있었는데 왜 초점이 저기로 갔지?” 하며 구조 감각을 잃습니다. 특히 스크린 리더 사용자는 화면을 못 보니 초점 순서가 유일한 구조 단서라, 순서가 어긋나면 메뉴를 이해할 수 없죠.

그래서 CP-103은 초점이 계층·시각 순서대로 흐르게 하라고 합니다. 실무 원칙은 간단합니다 — DOM 순서를 시각·논리 순서와 일치시키고(CSS로 시각만 비틀지 않기), 양수 tabindex를 쓰지 않기(tabindex="0"/-1만 사용). 표준 마크업(<ul>/<li> 중첩, CP-099)을 DOM 순서대로 작성하면 초점은 자연히 그 순서를 따릅니다.

이 규칙은 CP-102(키보드로 닿음)와 짝입니다 — 닿을 수 있고(102), 닿는 순서가 계층을 따른다(103). 둘이 맞물려야 키보드 사용자가 메뉴를 온전히, 예측 가능하게 씁니다.

3. 점검 / 개선

무엇을 점검하나

시각=초점 순서 — Tab 초점이 화면에 보이는 계층 순서대로 이동하는가.

DOM 일치 — DOM 순서가 시각·논리 순서와 일치하는가.

tabindex — 양수 tabindex로 순서를 비틀지 않았는가(0/-1만).

개선 방향

마크업을 시각·논리 순서대로 작성(CSS로 시각 순서만 변경 지양).

양수 tabindex 제거. <ul>/<li> 중첩(CP-099)으로 자연 순서 확보.

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

역할	책임
퍼블리셔/개발	DOM·초점 순서를 계층·시각 순서와 일치
접근성 담당	Tab 순회로 초점 순서 검증

기관 유형	CP-103 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (사이드 메뉴 사용 시)

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ Tab 초점이 보이는 계층 순서대로 이동하나요?

□ DOM 순서가 시각·논리 순서와 일치하나요?

□ 양수 tabindex로 순서를 비틀지 않았나요(0/-1만)?

❓ FAQ

Q1. CSS로 배치를 바꿨는데 초점이 튀어요. 시각만 CSS로 바꾸고 DOM은 그대로면 순서가 어긋납니다. DOM 순서를 시각 순서와 맞추세요. Q2. tabindex="3" 같은 걸 쓰면 순서를 정할 수 있지 않나요? 양수 tabindex는 전체 초점 순서를 비틀어 오히려 예측 불가능해집니다. 0/-1만 쓰는 게 원칙입니다. Q3. <ul>/<li>만 잘 쓰면 자동인가요? 대체로 그렇습니다. DOM 순서대로 작성하면 초점이 자연히 계층 순서를 따릅니다.

6. 마무리

CP-103의 메시지:

보이는 순서대로 닿아야 — 초점은 메뉴의 계층 순서대로 이동한다.

초점이 움직이는 순서는 곧 사용자가 콘텐츠를 인지하는 순서입니다. 사이드 메뉴는 계층을 가지므로 초점도 상위 → 하위 → 다음 상위로, 보이는 들여쓰기 순서대로 흘러야 하죠. DOM을 시각 순서와 맞추고 양수 tabindex를 피하면 됩니다. CP-102와 함께 키보드 탐색을 완성합니다. 다음 편은 펼침 상태의 보조기술 전달입니다.

다음 편 예고 ▶ 「224. (CP-104) aria-expanded·title로 하위 메뉴 영역의 활성화 상태를 스크린 리더에 탐지 시킨다.」

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

📚 참고 출처

KRDS 컴포넌트 — 사이드 메뉴(Side navigation) 가이드 — https://www.krds.go.kr/html/site/component/component_08.html

WCAG 2.1 SC 2.4.3 Focus Order — https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

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

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