마우스 호버만으론 안 된다

KRDS CP-062 — 드롭다운은 클릭 또는 키보드 탐색을 통해 확장되게 구현되어 있다.

0. 들어가며 — 호버 메뉴의 함정

이번 182편은 드롭다운을 클릭 또는 키보드 탐색으로 확장되게 구현하는 규칙입니다.

많은 사이트가 드롭다운 메뉴를 ‘마우스를 올리면(hover) 펼쳐지는’ 방식으로만 만듭니다. 하지만 hover만으로는 — 키보드 사용자, 터치 기기 사용자가 메뉴를 펼칠 수 없죠. CP-062는 클릭 또는 키보드로 드롭다운을 확장할 수 있게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 클릭 또는 키보드 확장

CP-062 (컴포넌트 > 메인 메뉴) “드롭다운은 클릭 또는 키보드 탐색을 통해 확장되게 구현되어 있다.”

드롭다운 메뉴를 클릭이나 키보드 조작으로 펼칠 수 있게 구현하라는 뜻입니다.

정리: 드롭다운은 클릭 또는 키보드 탐색으로 확장되게 구현하라. 이게 CP-062입니다.

2. 왜 hover만으로는 안 되나

드롭다운 메뉴를 펼치는 방식에는 여러 가지가 있습니다 — 마우스 호버(hover), 클릭, 키보드 조작. 문제는 많은 사이트가 hover(마우스를 올리면 펼쳐짐)만 지원한다는 것입니다. hover 전용 메뉴는 세 부류의 사용자를 배제 합니다.

① 키보드 사용자 — 마우스 없이 Tab·화살표 키로 탐색하는 사용자입니다. hover는 마우스 동작이라, 키보드로는 ‘마우스를 올리는’ 행위를 할 수 없죠. hover 전용 메뉴면 키보드 사용자는 하위 메뉴를 펼칠 수 없어, 그 안의 링크에 접근 불가입니다. 심각한 접근성 장벽이죠.

② 터치 기기 사용자 — 스마트폰·태블릿은 마우스가 없어 hover 개념이 약합니다(탭은 클릭에 가까움). hover 전용 메뉴는 터치에서 제대로 작동하지 않거나, 첫 탭에 펼쳐지고 두 번째 탭에 이동하는 등 혼란스럽죠.

③ 운동 장애 사용자 — 정밀한 마우스 조작이 어려운 사용자는 hover로 메뉴를 정확히 유지하기 힘듭니다.

그래서 CP-062는 클릭 또는 키보드로 드롭다운을 확장할 수 있게 하라고 합니다.

클릭 — 메뉴 항목(버튼)을 클릭하면 드롭다운이 펼쳐지고, 다시 클릭하면 접힙니다. 마우스·터치 모두에서 명확하게 작동하죠.

키보드 — Tab으로 메뉴에 포커스하고 Enter/Space로 펼치며, 화살표 키로 하위 항목을 탐색합니다. 키보드 사용자가 메뉴를 완전히 조작할 수 있죠.

hover를 추가로 지원할 수는 있지만(마우스 사용자 편의), hover’만’으로는 안 되고 클릭·키보드가 반드시 가능 해야 합니다. 이때 펼침/접힘 상태를 aria-expanded로 스크린리더에 알리고, 메뉴 역할을 ARIA로 명시하는 등 접근성 구현도 필요하죠.

이는 ’모든 입력 수단(마우스·키보드·터치)으로 조작 가능해야 한다’는 접근성 기본 원칙입니다(WCAG 2.1.1 Keyboard). 다음 편들(CP-067 키보드 탐색, CP-068 초점 순서)에서 키보드 조작을 더 구체적으로 다룹니다.

3. 점검 / 개선

무엇을 점검하나

클릭 확장 — 클릭으로 드롭다운이 펼쳐지는가.

키보드 확장 — Enter/Space·화살표로 펼치고 탐색되는가.

hover 전용 아님 — hover만으로 작동하지 않는가.

상태 전달 — aria-expanded로 펼침 상태를 알리는가.

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

역할	책임
개발(프론트)	클릭·키보드 확장 + ARIA 구현
접근성 담당	키보드·터치 조작 검수

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

드롭다운 메뉴를 사용하는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 클릭으로 드롭다운이 펼쳐지나요?

□ 키보드(Enter/Space·화살표)로 펼치고 탐색되나요?

□ hover만으로 작동하지 않나요?

□ aria-expanded로 상태를 알리나요?

❓ FAQ

Q1. hover 메뉴가 더 빠르지 않나요? 마우스 사용자엔 편하지만, 키보드·터치 사용자를 배제합니다. hover는 추가로 지원하되, 클릭·키보드가 반드시 가능해야 합니다. Q2. 터치에서 왜 hover가 문제인가요? 터치는 hover 개념이 약해, hover 전용 메뉴가 제대로 작동하지 않습니다. 클릭(탭) 방식이 명확합니다. Q3. KRDS를 채택하면 자동인가요? 표준 드롭다운은 클릭·키보드 확장을 지원합니다.

6. 마무리

CP-062의 메시지:

마우스 호버만으론 안 된다 — 클릭·키보드로 펼쳐야 모든 사용자가 메뉴를 연다.

hover 전용 드롭다운은 키보드·터치·운동 장애 사용자를 배제합니다. 클릭과 키보드(Enter/Space·화살표)로 확장 가능하게 하고, aria-expanded로 상태를 알려야 모두가 메뉴를 쓰죠. ’모든 입력 수단으로 조작 가능’이라는 접근성 기본입니다.

다음 편은 모바일에서 1수준 메뉴 노출을 다룹니다. CP-063 — “화면 너비가 충분하면 1수준 메뉴 전체를 확인할 수 있게 표현한다.”

다음 편 예고 ▶ 「183. (CP-063) [모바일] 화면 너비가 충분한 경우에는 1수준 메뉴 전체를 확인할 수 있도록 표현하고 있다.」

ViewCheck는 드롭다운이 클릭·키보드로 확장 가능한지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.1.1 Keyboard

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

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