날짜도 키보드로 고르게

KRDS CP-167 — 달력에서 제공되는 모든 기능을 키보드로 실행할 수 있도록 하고 있다.

0. 들어가며 — 마우스 없이 날짜 고르기

이번 287편은 달력의 모든 기능을 키보드로 실행할 수 있게 하라는 규칙입니다.

달력은 날짜 선택, 월 이동(이전/다음 달), 연도 변경 등 여러 기능을 가진 인터랙티브 위젯입니다. 이 모든 게 마우스 클릭으로만 되면, 키보드 사용자는 날짜를 고를 수 없죠. CP-167은 날짜 선택을 포함한 달력의 전 기능을 키보드로 조작 가능하게 하라고 규정합니다. 구조화 목록 CP-148과 같은 키보드 접근성 원칙이지만, 달력은 그리드 탐색이라 더 까다롭죠. 이번 편을 풀어냅니다.

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

CP-167 (컴포넌트 > 달력) “달력에서 제공되는 모든 기능을 키보드로 실행할 수 있도록 하고 있다.”

달력의 모든 기능(날짜 선택, 월/연 이동, 이벤트 확인 등)을 키보드만으로 초점 이동·조작·실행할 수 있게 구현 하라는 뜻입니다.

정리: 달력의 전 기능을 키보드로 조작 가능하게 하라. 이게 CP-167입니다.

2. 왜 달력의 키보드 조작이 중요한가

키보드 접근성은 기본 토대입니다(WCAG SC 2.1.1) — 마우스를 못 쓰는 사용자(운동 장애·스크린 리더·스위치)는 키보드로 조작하죠. 달력이 마우스 전용이면 이들은 날짜를 못 고릅니다. 그런데 날짜 선택은 예약·신청·검색 등 핵심 작업의 관문인 경우가 많아 — 달력이 막히면 그 서비스 자체를 못 쓰게 되죠. 그래서 달력의 키보드 조작은 특히 중요합니다.

달력은 다른 컴포넌트보다 키보드 구현이 까다롭습니다(난이도 ★★★★). 단순 버튼들의 나열이 아니라 2차원 그리드 안에서 날짜 사이를 이동해야 하기 때문이죠. WAI-ARIA의 날짜 선택(Date Picker) 그리드 패턴이 표준 키 조작을 정의합니다:

① 그리드 내 날짜 이동 — 화살표 키. Tab으로 모든 31개 날짜를 일일이 거치게 하면 너무 비효율적이죠. 대신 화살표 키로 날짜를 이동합니다 — 좌/우 화살표는 하루 전/후, 위/아래 화살표는 일주일 전/후로요. Tab은 달력을 빠져나가거나 주요 컨트롤 간 이동에 쓰죠. 이렇게 하면 키보드 사용자가 마우스처럼 직관적으로 날짜를 넘나듭니다.

② 핵심 단축키.

Home/End — 그 주의 첫날/마지막 날로.

PageUp/PageDown — 이전/다음 달로.

Shift+PageUp/Down — 이전/다음 해로(흔한 패턴).

Enter/Space — 현재 초점 날짜 선택.

Escape — (팝업 달력이면) 달력 닫기.

③ 월/연 이동 버튼. ‘이전 달’·‘다음 달’ 버튼, 연/월 드롭다운 등도 키보드로 접근·실행돼야 합니다. 이들은 표준 <button>·<select>나 적절한 ARIA 위젯으로요.

④ 이벤트·상세 확인. 날짜에 이벤트가 있으면(CP-163), 키보드로 그 날을 열어 상세를 확인할 수 있어야 하죠 — Enter로 상세 팝오버를 열고, 그 안을 키보드로 탐색하고, Escape로 닫는 식으로요.

이 키보드 조작은 초점 관리와 긴밀합니다 — 화살표로 날짜를 이동하면 초점(과 시각 표시 CP-168)이 따라가야 하고, 월을 바꾸면 적절한 날짜에 초점이 유지/이동돼야 하죠. 보통 그리드 안에서는 ‘로빙 탭인덱스(roving tabindex)’ 기법으로 현재 초점 날짜만 tabindex="0", 나머지는 -1로 관리합니다.

그리고 CP-166(스크린 리더 정보)과 결합해야 완전하죠 — 키보드로 날짜를 이동하면(167), 스크린 리더가 그 날짜의 요일·상태를 읽어줘야(166) 비시각 사용자가 어디로 갔는지 압니다. 또 이동한 초점이 시각적으로 보여야(CP-168) 키보드 사용자가 위치를 알죠. CP-166·167·168이 함께 달력을 키보드·스크린 리더 사용자에게 온전히 엽니다.

정리하면 — 달력은 날짜 선택이라는 핵심 관문이므로, 화살표·단축키 기반의 그리드 키보드 조작으로 전 기능을 키보드 사용자에게 보장해야 합니다.

3. 점검 / 개선

무엇을 점검하나

날짜 이동 — 화살표 키로 날짜를 이동하고 Enter/Space로 선택할 수 있는가.

월/연 이동 — 이전/다음 달, 연 변경이 키보드로 되는가(PageUp/Down 등).

이벤트 확인 — 키보드로 날짜를 열어 이벤트 상세를 확인할 수 있는가.

초점 관리 — roving tabindex로 그리드 초점이 적절히 관리되는가.

개선 방향

WAI-ARIA 날짜 선택 그리드 패턴 적용(화살표·Home/End·PageUp/Down·Enter·Escape).

roving tabindex로 초점 관리. 월/연 컨트롤·이벤트 상세도 키보드 지원.

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

역할	책임
퍼블리셔/개발	그리드 키보드 조작·초점 관리 구현
접근성 담당	키보드만으로 날짜 선택·이동 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 화살표 키로 날짜를 이동하고 Enter/Space로 선택할 수 있나요?

□ 이전/다음 달, 연 변경이 키보드로 되나요?

□ 키보드로 날짜를 열어 이벤트 상세를 확인할 수 있나요?

□ roving tabindex로 그리드 초점이 관리되나요?

❓ FAQ

Q1. Tab으로 모든 날짜를 거치면 안 되나요? 31개를 다 Tab하면 비효율적입니다. 화살표 키로 날짜를 이동하고 Tab은 달력 출입에 쓰는 게 표준입니다. Q2. 표준 키 조작이 정해져 있나요? WAI-ARIA 날짜 선택 패턴이 화살표·Home/End·PageUp/Down·Enter·Escape를 정의합니다. Q3. 왜 난이도가 높나요? 2차원 그리드 탐색, roving tabindex, 월 이동 시 초점 관리 등 구현이 복잡합니다.

6. 마무리

CP-167의 메시지:

날짜도 키보드로 고르게 — 달력의 전 기능을 키보드로 조작 가능하게.

달력은 예약·신청의 핵심 관문이라 키보드 조작이 중요합니다. 화살표로 날짜 이동, PageUp/Down으로 월 이동, Enter로 선택 등 WAI-ARIA 그리드 패턴으로 전 기능을 키보드에 엽니다. CP-166(낭독)·CP-168(초점 표시)과 함께 완성되죠. 다음 편은 달력 그룹의 마지막 — 키보드 초점 표시입니다.

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

ViewCheck는 달력의 모든 기능이 키보드로 실행 가능한지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 달력(Calendar) 가이드 — https://www.krds.go.kr/html/site/component/component_14.html

WAI-ARIA APG — Date Picker Grid Keyboard — https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/

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

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