마우스 없이도 다 되어야

KRDS CP-067 — 메뉴 링크는 키보드로 탐색할 수 있도록 구현되어 있다.

0. 들어가며 — 키보드만으로 메뉴 쓰기

이번 187편은 메뉴 링크를 키보드로 탐색할 수 있게 하는 규칙입니다.

메뉴는 사이트 내비게이션의 핵심이라, 마우스 없이 키보드만으로도 완전히 사용할 수 있어야 합니다. 키보드 사용자(지체장애·시각장애 등)가 메뉴를 못 쓰면, 사이트 전체를 탐색할 수 없죠. CP-067은 메뉴의 키보드 탐색을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 키보드 탐색

CP-067 (컴포넌트 > 메인 메뉴) “메뉴 링크는 키보드로 탐색할 수 있도록 구현되어 있다.”

메뉴의 모든 링크를 키보드만으로 탐색·실행할 수 있게 구현하라는 뜻입니다.

정리: 메뉴 링크는 키보드로 탐색할 수 있게 구현하라. 이게 CP-067입니다.

2. 왜 키보드 탐색이 필수인가

웹 접근성의 가장 기본 원칙 하나가 ‘키보드만으로 모든 기능을 사용할 수 있어야 한다’(WCAG 2.1.1 Keyboard) 입니다. 마우스를 못 쓰는 사용자가 많기 때문이죠 — 지체장애로 마우스 조작이 어려운 사용자, 시각장애로 스크린 리더 + 키보드를 쓰는 사용자, 운동 장애 사용자 등입니다. 이들은 Tab·화살표·Enter 같은 키보드만으로 웹을 사용합니다.

메뉴는 사이트 내비게이션의 중심이라, 키보드 접근이 특히 중요합니다. 메뉴를 키보드로 못 쓰면 — 사용자는 사이트 의 다른 페이지로 이동할 길이 막혀, 사실상 사이트 전체를 쓸 수 없게 되죠. 메뉴의 키보드 접근성은 사이트 사용의 관문입니다.

CP-067이 요구하는 키보드 탐색은 구체적으로:

Tab — 메뉴 항목(링크)으로 포커스 이동. 모든 메뉴 링크가 Tab으로 도달 가능해야 합니다.

Enter — 포커스된 링크 실행(이동). 드롭다운 토글이면 펼침/접힘.

화살표 키 — 메뉴 항목 간 이동, 하위 메뉴 탐색(메뉴 패턴에 따라). 특히 드롭다운/메가메뉴에서 위아래· 좌우 화살표로 항목을 오가죠.

Esc — 펼쳐진 드롭다운 닫기.

핵심은 — 마우스로 할 수 있는 모든 메뉴 조작(탐색·펼침·실행·닫기)을 키보드로도 할 수 있어야 한다는 것입니다. CP-062(클릭·키보드 확장)에서 드롭다운 펼침의 키보드 조작을 다뤘고, CP-067은 메뉴 전체의 키보드 탐색을, 다음 편 CP-068은 초점이 계층 순서대로 이동하는 것을 규정합니다. 이 세 규칙이 메뉴의 키보드 접근성을 완성하죠.

구현 시 주의 — ① 모든 메뉴 링크가 키보드 포커스를 받을 수 있어야 하고(<a>·<button> 등 포커스 가능 요소 사용, <div onclick> 같은 안티패턴 금지), ② 포커스가 보여야 하며(focus 표시, CP-052의 원리), ③ 화살표 키 등 메뉴 키보드 인터랙션이 WAI-ARIA 메뉴 패턴을 따르는 것이 좋습니다. KWCAG ‘키보드 사용 보장’ 항목과 직결됩니다.

3. 점검 / 개선

무엇을 점검하나

Tab 도달 — 모든 메뉴 링크가 Tab으로 도달되는가.

키보드 실행 — Enter로 링크 실행, 드롭다운 조작이 되는가.

마우스 동등 — 마우스로 되는 모든 메뉴 조작이 키보드로도 되는가.

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

역할	책임
개발(프론트)	메뉴 키보드 탐색·조작 구현(포커스 가능 요소)
접근성 담당	키보드만으로 메뉴 전체 사용 검수

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

행정·공공기관 디지털 정부서비스 = 전부 해당. (KWCAG 키보드 사용 보장 직결.)

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 메뉴 링크가 Tab으로 도달되나요?

□ Enter로 링크 실행·드롭다운 조작이 되나요?

□ 마우스로 되는 메뉴 조작이 키보드로도 되나요?

❓ FAQ

Q1. 왜 키보드 탐색이 필수인가요? 마우스를 못 쓰는 사용자가 많고(지체·시각장애 등), 메뉴를 못 쓰면 사이트 전체를 못 씁니다. WCAG 2.1.1의 기본 원칙입니다. Q2. div로 메뉴를 만들면요? <div onclick>은 키보드 포커스를 못 받습니다. <a>·<button> 등 포커스 가능 요소를 써야 합니다. Q3. KRDS를 채택하면 자동인가요? 표준 메뉴는 키보드 탐색을 지원합니다.

6. 마무리

CP-067의 메시지:

마우스 없이도 다 되어야 — 메뉴를 키보드로 못 쓰면 사이트 전체를 못 쓴다.

메뉴는 내비게이션의 중심이라, Tab·화살표·Enter·Esc 등 키보드만으로 완전히 탐색·조작할 수 있어야 합니다. 키보드 접근이 막히면 사이트 사용 자체가 막히죠. WCAG 2.1.1 키보드 원칙의 핵심이고, CP-062·068과 함께 메뉴 키보드 접근성을 완성합니다.

다음 편은 메뉴 그룹의 마지막, 초점의 계층 순서 이동을 다룹니다. CP-068 — “키보드 초점은 메뉴의 계층 순서 대로 이동하게 구현한다.”

다음 편 예고 ▶ 「188. (CP-068) 키보드의 초점은 메뉴의 계층 순서대로 이동하도록 구현되어 있다.」 — 메인 메뉴 그룹 마지막

ViewCheck는 메뉴 링크가 키보드로 탐색 가능한지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.1.1 Keyboard / KWCAG 키보드 사용 보장

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

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