날짜 상태를 귀로도

KRDS CP-166 — 날짜 및 관련 정보의 의미를 스크린 리더에서 확인할 수 있도록 하고 있다.

0. 들어가며 — 화면을 못 보는 사용자의 달력

이번 286편은 날짜 및 관련 정보의 의미를 스크린 리더에서 확인할 수 있게 하라는 규칙입니다.

CP-165가 ’색맹(화면은 봄)을 위한 색 무관 시각 구분’이었다면, CP-166은 한 걸음 더 나아가 화면을 아예 못 보는 스크린 리더 사용자를 위한 것입니다. 날짜의 상태·의미(오늘·선택·공휴일·마감·행사 등)가 시각 표시(색· 형태)로만 돼 있으면 비시각 사용자는 알 수 없죠. ARIA·텍스트로 이 의미를 스크린 리더에 전달해야 합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 스크린 리더 정보 확인

CP-166 (컴포넌트 > 달력) “날짜 및 관련 정보의 의미를 스크린 리더에서 확인할 수 있도록 하고 있다.”

달력 날짜의 상태·의미(오늘·선택·가능·마감·공휴일·이벤트 등)를 시각 표시뿐 아니라 텍스트·ARIA로 제공해, 스크린 리더 사용자도 각 날짜의 의미를 확인하게 하라는 뜻입니다.

정리: 날짜 상태·의미를 스크린 리더가 읽을 수 있게 전달하라. 이게 CP-166입니다.

2. 왜 스크린 리더에 정보를 전달하나

달력의 정보는 대부분 시각적으로 전달됩니다 — 색(공휴일 빨강), 위치(요일 열), 형태(선택 배경, 마감 취소선), 아이콘(행사 점). 시각 사용자는 이를 한눈에 읽지만, 스크린 리더 사용자는 화면을 못 보니 이 시각 정보가 통째로 전달되지 않죠. 날짜 셀이 그냥 “15”라고만 읽히면 — 그게 오늘인지, 선택됐는지, 공휴일인지, 예약 가능한지 전혀 알 수 없습니다. 달력의 핵심 정보(상태·의미)가 비시각 사용자에게 사라지는 것이죠.

그래서 CP-166은 시각 표시에 대응하는 텍스트·ARIA 정보를 제공해, 스크린 리더가 각 날짜를 읽을 때 의미를 함께 전달하게 합니다. 주요 기법:

① 요일·날짜의 완전한 낭독. 날짜 셀이 “15”만이 아니라 “2026년 6월 15일 월요일”처럼 읽히게 합니다 — <table> 구조 + <th scope="col"> 요일 헤더(CP-164)로 요일이 연결되거나, aria-label로 전체 날짜를 제공 하죠. 그래야 사용자가 ’15일이 무슨 요일’인지 압니다.

② 상태 정보 전달. 각 상태를 ARIA·텍스트로:

오늘 — aria-current="date"로 ’오늘’임을 전달.

선택된 날 — aria-selected="true"(그리드/위젯 패턴) 또는 적절한 상태 표시.

마감/비활성 — aria-disabled="true" 또는 disabled로 ’선택 불가’임을 전달.

공휴일·행사 — 시각 색·점만이 아니라, aria-label이나 셀 내 텍스트로 “신정”, “행사 있음” 같은 의미를 보충. 예: aria-label="6월 6일 토요일, 현충일, 공휴일".

③ 복합 정보. 한 날짜에 여러 의미가 있으면(공휴일 + 행사 + 선택), 그것들을 aria-label에 종합해 “○월 ○일, 공휴일, 행사 2건, 선택됨”처럼 전달하죠. 시각 사용자가 여러 표시를 한눈에 보듯, 비시각 사용자도 한 번에 듣게요.

④ 적절한 위젯 패턴. 날짜 선택 달력은 WAI-ARIA의 그리드(grid) 패턴이나 적절한 구조로 만들어, 스크린 리더가 ’달력’임을 인지하고 날짜 간 이동(화살표)을 안내하게 합니다. 이는 키보드 조작(CP-167)과도 맞물리죠.

이 규칙의 난이도가 높은(★★★★) 이유는 — 단순 마크업으로 안 되고, 달력의 동적 상태(선택 변경, 월 이동)에 맞춰 ARIA 속성을 갱신하고, 복합 정보를 적절히 종합해야 하기 때문입니다. 달력은 접근성 구현이 까다로운 컴포넌트로 꼽히죠.

CP-165(색맹)와 CP-166(전맹)은 함께 — 색을 못 보는 사용자, 화면을 못 보는 사용자 모두에게 날짜 의미를 전달 합니다. 시각 표시(색·형태) + 색 무관 단서(텍스트·형태) + 스크린 리더 정보(ARIA·텍스트)의 3중 전달로, 모든 사용자가 달력을 쓰게 하죠.

3. 점검 / 개선

무엇을 점검하나

날짜·요일 낭독 — 스크린 리더가 날짜를 요일과 함께 완전히 읽는가.

상태 전달 — 오늘·선택·마감·공휴일·행사 등이 ARIA·텍스트로 전달되는가.

복합·동적 — 여러 의미가 종합 전달되고, 상태 변경 시 갱신되는가.

개선 방향

날짜 셀에 aria-label로 전체 날짜+상태 제공(예: “6월 6일 토요일, 현충일, 공휴일”).

aria-current="date"/aria-selected/aria-disabled로 상태 전달. 그리드 패턴 적용.

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

역할	책임
퍼블리셔/개발	ARIA·텍스트 상태 전달·그리드 패턴 구현
접근성 담당	날짜·상태 낭독 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 스크린 리더가 날짜를 요일과 함께 완전히 읽나요?

□ 오늘·선택·마감·공휴일·행사 등이 ARIA·텍스트로 전달되나요?

□ 여러 의미가 종합 전달되고, 상태 변경 시 갱신되나요?

❓ FAQ

Q1. 색·형태로 구분(CP-165)했으면 충분하지 않나요? 색맹은 형태로 보지만, 전맹은 화면을 못 봅니다. ARIA· 텍스트로 별도 전달해야 합니다. Q2. 어떻게 상태를 전달하나요? aria-current="date"(오늘), aria-selected(선택), aria-disabled(마감), aria-label(공휴일명·행사) 등을 씁니다. Q3. 왜 난이도가 높나요? 동적 상태(선택·월 이동)에 ARIA를 갱신하고 복합 정보를 종합해야 해서, 달력은 접근성 구현이 까다롭습니다.

6. 마무리

CP-166의 메시지:

날짜 상태를 귀로도 — 날짜 의미를 스크린 리더가 확인할 수 있게 전달하라.

달력 정보는 대부분 시각적이라, 스크린 리더 사용자에겐 그냥 숫자로만 읽힙니다. aria-label·aria-current· aria-selected 등으로 날짜·요일·상태를 전달해야 비시각 사용자도 달력을 쓰죠. CP-165(색맹)와 함께 모든 사용자 에게 의미를 보장합니다. 다음 편은 달력 기능의 키보드 실행입니다.

다음 편 예고 ▶ 「287. (CP-167) 달력에서 제공되는 모든 기능을 키보드로 실행할 수 있도록 하고 있다.」

ViewCheck는 달력의 날짜 의미가 스크린 리더에 전달되는지를 진단합니다.

📚 참고 출처

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

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

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

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