모든 기능을 마우스 없이도

KRDS CP-148 — 제공되는 모든 기능을 키보드로 실행할 수 있도록 구현하고 있다.

0. 들어가며 — 목록의 모든 버튼이 키보드로 닿아야

이번 268편은 구조화 목록의 제공되는 모든 기능을 키보드로 실행할 수 있게 하라는 규칙입니다.

구조화 목록에는 많은 기능이 있습니다 — 도구 막대의 정렬·필터·검색(CP-144), 항목의 CTA·행동 버튼(CP-145·146), 페이지네이션(CP-114~) 등이죠. 이 모든 기능이 마우스로만 작동하면, 키보드 사용자는 목록을 제대로 못 씁니다. CP-148은 목록의 모든 기능을 키보드만으로 실행 가능하게 하라고 규정합니다. 사이드 메뉴 CP-102, 콘텐츠 내 탐색 CP-111과 같은 키보드 접근성 원칙이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 모든 기능 키보드 실행

CP-148 (컴포넌트 > 구조화 목록) “제공되는 모든 기능을 키보드로 실행할 수 있도록 구현하고 있다.”

구조화 목록이 제공하는 모든 기능(도구 막대·행동 버튼·정렬·필터 등)을, 키보드만으로 초점 이동하고 실행할 수 있게 구현하라는 뜻입니다.

정리: 목록의 모든 기능을 키보드만으로 실행 가능하게 하라. 이게 CP-148입니다.

2. 왜 모든 기능이 키보드로 실행돼야 하나

키보드 접근성은 웹 접근성의 가장 기본 토대입니다(KWCAG ‘키보드 사용 보장’, WCAG SC 2.1.1). 마우스를 못 쓰는 사용자 — 운동 장애, 스크린 리더 사용자(키보드 중심 조작), 보조 스위치 사용자 — 는 키보드(또는 키보드를 모방하는 기기)로 웹을 씁니다. 이들에게 키보드로 닿지 않는 기능은 존재하지 않는 것과 같죠.

구조화 목록은 다른 컴포넌트보다 기능이 많아 이 규칙이 특히 중요합니다. 목록 하나에 정렬 드롭다운, 필터 체크박스, 검색 입력, 보기 전환 버튼, 각 항목의 여러 행동 버튼, 페이지네이션까지 — 수십 개의 인터랙티브 요소가 모여 있죠. 이 중 하나라도 키보드로 안 되면 키보드 사용자는 그 기능을 못 씁니다. 예를 들어 정렬은 키보드로 되는데 필터는 마우스로만 되면 — 키보드 사용자는 목록을 필터링할 수 없죠.

키보드로 실행되려면 각 기능이:

① 표준 인터랙티브 요소여야 합니다. 버튼은 <button>, 링크는 <a href>, 드롭다운은 <select> 또는 적절한 ARIA 위젯, 체크박스는 <input type="checkbox"> 등으로요. 이런 표준 요소는 기본적으로 키보드 포커스를 받고 Enter/Space로 실행됩니다. 문제는 <div onclick> 같은 비표준 구현 — 포커스를 못 받아 Tab으로 닿지 않고 Enter로 실행도 안 되죠. 목록의 행동 버튼을 <div>로 만드는 실수가 흔합니다.

② 적절한 키 조작을 지원해야 합니다. 단순 버튼은 Enter/Space로 충분하지만, 복합 위젯(드롭다운 메뉴, 커스텀 셀렉트 등)은 화살표 키 탐색·Escape 닫기 등 ARIA 패턴에 맞는 키 조작을 구현해야 하죠. 정렬 드롭다운을 커스텀 으로 만들었다면, 키보드로 열고(Enter), 옵션을 화살표로 이동하고, 선택(Enter)하고, 닫을(Escape) 수 있어야 합니다.

③ 동적 기능도 포함합니다. 필터 적용 후 목록이 갱신되거나, ’더보기’로 항목이 추가되면(CP-133 맥락) — 그 동적 변화 후에도 키보드 초점이 자연스럽게 이어져야 하죠. 정적 버튼뿐 아니라 동적 상호작용 전체가 키보드로 완결돼야 합니다.

그래서 CP-148은 목록의 모든 기능을 키보드로 점검·보장하라고 합니다. ’대부분 되는데 하나 안 됨’도 그 하나를 쓰는 사용자에겐 치명적이죠. 그리고 키보드로 닿는 것만으론 부족합니다 그 초점이 보여야 하고 (CP-149), 기능이 예측 가능하게 작동해야(CP-150) 합니다. CP-148~150은 키보드 접근성의 세 조각 실행 가능 (148), 초점 가시(149), 예측 작동(150) 으로, 함께 구조화 목록을 키보드 사용자에게 온전히 엽니다.

3. 점검 / 개선

무엇을 점검하나

전 기능 키보드 실행 — 도구 막대·행동 버튼·정렬·필터·검색·페이지네이션 모두 키보드로 되는가.

표준 요소 — 기능이 <button>/<a>/<select> 등 표준·ARIA 위젯인가(<div onclick> 아님).

복합 위젯 키 조작 — 커스텀 드롭다운 등이 화살표·Enter·Escape를 지원하는가.

개선 방향

모든 기능을 표준 인터랙티브 요소·ARIA 위젯으로 구현.

커스텀 위젯에 ARIA 키보드 패턴 적용. 동적 갱신 후 초점 관리.

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

역할	책임
퍼블리셔/개발	전 기능 키보드 실행·ARIA 위젯 구현
접근성 담당	키보드만으로 전 기능 사용 검증

기관 유형	CP-148 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (구조화 목록 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 도구 막대·행동 버튼·정렬·필터·검색이 모두 키보드로 되나요?

□ 기능이 <button>/<a>/<select> 등 표준 요소인가요(<div onclick> 아님)?

□ 커스텀 드롭다운 등이 화살표·Enter·Escape를 지원하나요?

❓ FAQ

Q1. 대부분 키보드로 되면 충분하지 않나요? 하나라도 안 되면 그 기능을 쓰는 키보드 사용자는 막힙니다. ‘모든’ 기능이 돼야 합니다. Q2. <button>이면 자동으로 되나요? 표준 버튼·링크·셀렉트는 기본적으로 키보드 실행이 됩니다. <div onclick>이 문제입니다. Q3. 커스텀 드롭다운은요? ARIA 패턴에 맞게 화살표 탐색·Enter 선택·Escape 닫기를 직접 구현해야 합니다.

6. 마무리

CP-148의 메시지:

모든 기능을 마우스 없이도 — 목록의 전 기능을 키보드로 실행 가능하게.

구조화 목록은 기능이 많아 키보드 접근성이 특히 중요합니다. 하나라도 마우스 전용이면 키보드 사용자가 그 기능을 못 쓰죠. 모든 기능을 표준 요소·ARIA 위젯으로 만들어 키보드로 실행되게 해야 합니다. 다음 편은 그 키보드 초점의 가시성입니다.

다음 편 예고 ▶ 「269. (CP-149) 제공되는 모든 기능에 키보드 초점이 명확하게 표시되도록 하고 있다.」

ViewCheck는 구조화 목록의 모든 기능이 키보드로 실행 가능한지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 구조화 목록(Structured list) 가이드 — https://www.krds.go.kr/html/site/component/component_12.html

WCAG 2.1 SC 2.1.1 Keyboard — https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

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

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