마우스 없이도 날짜를

KRDS CP-390 — 키보드를 이용하여 조회 날짜를 선택하거나 입력할 수 있도록 제공하고 있다.

0. 들어가며 — 달력을 마우스로만 고를 수 있으면

이번 510편은 키보드를 이용하여 조회 날짜를 선택하거나 입력할 수 있도록 제공하라는 규칙입니다.

날짜 선택기(달력 UI)를 — 마우스로만 날짜를 클릭하게 만들면, 키보드 사용자는 날짜를 못 고르죠. CP-390은 키보드 로도 날짜를 선택·입력할 수 있게 하라고 규정합니다. 달력 키보드 탐색(CP-163 정신), 라디오·체크박스 키보드 규칙의 날짜 입력 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 키보드로 날짜 선택·입력

CP-390 (컴포넌트 > 날짜 입력 필드) “키보드를 이용하여 조회 날짜를 선택하거나 입력할 수 있도록 제공하고 있다.”

날짜 선택기·입력 필드를 키보드만으로 날짜를 선택하거나 직접 입력할 수 있게 제공하라는 뜻입니다.

정리: 키보드로 날짜를 선택·입력할 수 있게 하라. 이게 CP-390입니다.

2. 왜 키보드 선택·입력인가

웹 접근성의 가장 기본 원칙 — 모든 기능은 키보드로 사용 가능해야 한다(KWCAG 2.1.1)입니다. 날짜 입력도 예외 없죠. 날짜를 입력받는 방식은 두 가지가 있는데, 둘 다 키보드로 가능해야 합니다:

직접 입력 — 텍스트 필드에 날짜를 타이핑(2024-01-05).

날짜 선택기 — 달력 UI에서 날짜를 클릭해 선택.

키보드로 안 될 때의 문제:

날짜 선택기 마우스 전용 — 달력 UI가 — 마우스 클릭으로만 날짜를 고를 수 있으면, 키보드 사용자(지체장애· 스크린 리더 사용자)는 날짜를 못 고릅니다. 날짜 입력이 막히죠.

입력 필드 비활성 — 날짜 선택기를 쓰면서 — 텍스트 직접 입력을 막아버리면(읽기 전용), 키보드로 타이핑해 넣을 길도 없어집니다.

그래서 CP-390은 — 키보드로 날짜를 선택하거나 입력할 수 있게 하라고 합니다:

직접 입력 허용 날짜 입력 필드에 키보드로 직접 타이핑해 날짜를 넣을 수 있게 합니다. 형식 안내(CP-386)와 함께요. 날짜 선택기가 있어도 직접 입력을 막지 않죠. 키보드 사용자가 빠르게 타이핑할 수 있게요.

날짜 선택기 키보드 탐색 — 달력 UI(날짜 선택기)를 쓰면 — 키보드로 탐색·선택할 수 있게 합니다(달력 CP-163 정신):

화살표 키로 날짜 간 이동(←→ 하루, ↑↓ 일주일), PageUp/Down으로 월 이동.

Enter/Space로 날짜 선택.

Tab으로 달력 컨트롤(이전/다음 월 버튼) 접근.

Esc로 달력 닫기.

표준 WAI-ARIA 날짜 선택기 패턴(grid role 등)을 따르면 키보드·스크린 리더 접근성이 확보되죠.

두 방식 모두 제공. 이상적으로는 직접 입력과 날짜 선택기를 둘 다 키보드로 쓸 수 있게 합니다. 사용자가 정확한 날짜를 알면 타이핑(빠름), 탐색하며 고르려면 달력(편함)을 키보드로 선택하죠. 둘 다 키보드로 가능하면 모든 사용자가 편한 방식을 고릅니다.

초점 표시·관리. 키보드 조작에는 — 초점 표시(focus indicator)가 또렷해야 하고(달력에서 현재 초점 날짜 강조), 날짜 선택기를 열고 닫을 때 초점이 논리적으로 이동해야 하죠(모달/팝오버 초점 관리 정신).

스크린 리더 연계. 키보드 접근에 더해 — 스크린 리더가 날짜를 읽어야 합니다(달력 그리드의 날짜·요일·선택 상태, 입력 필드의 레이블·형식). 키보드(390)와 스크린 리더 안내가 함께 가죠.

이 규칙은 날짜 입력의 ‘키보드 운용성’을 담당합니다 — 키보드로 날짜를 직접 입력하거나 달력에서 선택하게 해(390), 마우스 없는 사용자도 날짜를 입력하게 하죠. ’조회 날짜’(검색·조회 기간 등)를 포함한 모든 날짜 입력에 적용됩니다.

정리하면 — 날짜 선택기를 마우스 전용으로 만들면 키보드 사용자가 날짜를 못 고르므로, 직접 입력과 달력 키보드 탐색을 모두 지원해 키보드만으로 날짜를 선택·입력하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

직접 입력 — 날짜 필드에 키보드로 직접 타이핑할 수 있는가(읽기 전용 아님).

달력 키보드 탐색 — 날짜 선택기를 화살표·Enter 등 키보드로 탐색·선택할 수 있는가.

초점·스크린 리더 — 초점 표시가 또렷하고 스크린 리더가 날짜를 읽는가.

개선 방향

직접 입력 허용(형식 안내 CP-386). 날짜 선택기에 WAI-ARIA 패턴(grid·화살표·Enter·Esc).

초점 표시·열고 닫기 초점 관리. 스크린 리더 날짜 안내.

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

역할	책임
퍼블리셔/개발	직접 입력·달력 키보드 탐색 구현
QA/접근성	키보드 단독 날짜 선택 검증

기관 유형	CP-390 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (날짜 입력·선택기 사용 시)

웹접근성 의무 대상이며 날짜 입력을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 날짜 필드에 키보드로 직접 타이핑할 수 있나요(읽기 전용 아님)?

□ 날짜 선택기를 화살표·Enter 등 키보드로 탐색·선택할 수 있나요?

□ 초점 표시가 또렷하고 스크린 리더가 날짜를 읽나요?

❓ FAQ

Q1. 날짜 선택기(달력)만 있으면 안 되나요? 달력을 키보드로 탐색·선택할 수 있어야 합니다. 마우스 전용이면 키보드 사용자가 날짜를 못 고르죠. 직접 입력도 함께 허용하면 좋고요. Q2. 달력 키보드 조작은 어떻게 하나요? 화살표로 날짜 이동, PageUp/Down으로 월 이동, Enter/Space로 선택, Esc로 닫기입니다. WAI-ARIA 패턴을 따르죠. Q3. 직접 입력을 막고 달력만 쓰게 하면요? 키보드로 빠르게 타이핑하려는 사용자가 불편합니다. 직접 입력도 키보드로 가능하게 하는 게 좋죠.

6. 마무리

CP-390의 메시지:

마우스 없이도 날짜를 — 키보드로 날짜를 선택·입력할 수 있게 하라.

날짜 선택기를 마우스 전용으로 만들면 키보드 사용자가 날짜를 못 고릅니다. 직접 입력과 달력 키보드 탐색을 모두 지원해 키보드만으로 날짜를 입력하게 하는 게 핵심이죠. 다음 편은 레이블 명확 지정입니다.

다음 편 예고 ▶ 「511. (CP-391) 입력 필드에 레이블을 명확하게 지정하고 있다.」

ViewCheck는 키보드로 날짜를 선택·입력할 수 있는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 날짜 입력 필드(Date input) 가이드 — https://www.krds.go.kr/html/site/component/component_38.html

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

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

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