Date Picker
캘린더 UI로 날짜를 선택하는 입력 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
공통 베이스라인
모든 디자인 시스템에 적용입력 필드에 날짜 형식 안내 연결
날짜 입력 필드에 aria-describedby로 날짜 형식(예: YYYY-MM-DD)을 연결해야 합니다.
캘린더 다이얼로그에 role="dialog"
캘린더 팝업은 role="dialog"와 aria-modal="true", aria-label을 설정해야 합니다.
캘린더 그리드 ARIA
캘린더는 role="grid"를 사용하고 각 날짜 셀에 aria-label로 전체 날짜를 제공해야 합니다.
키보드로 날짜 탐색
Arrow 키로 날짜 이동, Enter/Space로 선택, Page Up/Down으로 월 이동, Escape로 닫기를 지원해야 합니다.
현재 월/연도를 라이브 영역으로
월 이동 버튼 클릭 시 현재 표시 월/연도가 aria-live로 스크린리더에 안내되어야 합니다.
직접 텍스트 입력 허용
캘린더 UI 없이 날짜를 직접 텍스트로 입력할 수 있는 옵션을 제공하세요.
선택 후 트리거에 날짜 반영
날짜 선택 후 트리거 버튼의 accessible name에 선택된 날짜를 포함하세요.
비활성 날짜 aria-disabled
선택 불가능한 날짜에 aria-disabled="true"와 시각적 표시를 함께 제공하세요.
캘린더 UI만 제공
캘린더 팝업으로만 날짜를 선택할 수 있다면 스크린리더 사용자에게 복잡한 그리드 탐색을 강요합니다.
날짜 셀에 숫자만 제공
"15"만 있는 날짜 셀은 맥락 없이 읽힙니다. aria-label="2024년 3월 15일"처럼 전체 날짜를 제공하세요.
추가 체크포인트
@mui/x-date-pickers 사용 권장
MUI Date Picker는 @mui/x-date-pickers 패키지에 있습니다. 기본 TextField보다 접근성이 잘 구현되어 있습니다.
코드 샘플
구현 노트
- –LocalizationProvider의 adapterLocale을 ko로 설정하면 캘린더 UI가 한국어로 표시됩니다.
- –@mui/x-date-pickers는 키보드 내비게이션과 스크린리더를 위한 ARIA를 자동으로 처리합니다.
- –slotProps.textField로 입력 필드의 접근성 속성을 커스텀할 수 있습니다.