날짜 선택 대화상자 예제

다음 예제는 대화상자 설계 패턴을 구현하는 날짜 선택기를 여는 날짜 입력 필드와 버튼을 포함합니다. 대화상자는 사용자가 달력에서 날짜를 선택할 수 있는 버튼을 표시하기 위해 그리드 패턴을 사용하는 달력을 포함합니다. 달력에서 날짜를 선택하는 것은 대화상자를 닫고 날짜 입력 필드를 채웁니다. 대화상자가 열릴 때, 입력 필드가 비어있거나, 유효한 날짜를 포함하지 않는다면, 달력의 현재 날짜가 초점을 얻습니다. 그렇지 않으면, 날짜 입력 필드의 값과 일치하는 달력의 날짜가 초점을 얻습니다.

유사한 예는 다음과 같습니다:

알림(alert) 대화상자 예제: 알림 대화상자를 보여주는 확인 프롬프트.
모달 대화상자 예제: 적고 많은 양의 컨텐츠로 구성 된 여러 모달 대화상자를 보여주는 예제.
날짜 선택 콤보박스: 달력과 월 및 년도를 탐색하는 버튼을 포함하는 대화상자를 여는 편집 가능한 날짜 입력 콤보박스.

예제

날짜

(mm/dd/yyyy)

Su	Mo	Tu	We	Th	Fr	Sa
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

접근성 특성

날짜 형식에 대한 설명은 접근 가능한 설명으로 보조 기술에 사용 가능하게 만드는 aria-describedby를 통해 텍스트 입력과 연결됩니다.
날짜가 선택된 후, "날짜 선택" 버튼의 접근 가능한 이름이 "날짜 변경, DATE_STRING"으로 변경되고, DATE_STRING은 선택된 날짜 입니다. 따라서, 대화상자가 닫히고 초점이 버튼으로 돌아갈 때, 스크리리더 사용자는 선택된 날짜의 확인을 듣게 됩니다.
대화상자에서, 달력에 표시된 월과 연도를 변경하기 위한 추가 버튼에 단축키가 할당됩니다.
월과 연도를 표시하는 달력 제목은 월과 연도를 변경하는 버튼과 키보드 명령으로부터 피드백을 받기 위해 라이브 영역으로 마크업 됩니다.
키보드 도움말은 대화상자 바닥에 표시됩니다. 초점이 달력 그리드 내부로 이동 할 때 스크린리더 사용자에게 알리기 위해 라이브 영역이 사용됩니다.
달력의 간결한 시각적 디자인을 용이하게 하기 위해, 열 제목의 요일 이름은 두 글자로 축약됩니다. 하지만, 이것은 스크린리더 사용자가 요일 이름을 이해하기 어렵게 만듭니다. 따라서, 사용자가 그리드를 탐색 할 때 스크린리더가 전체 이름을 알리도록, 열 제목의 HTML abbr 어트리뷰트에서 전체 요일 이름이 보조기술에 제공됩니다.
대화상자에서 컨트롤의 초점 및 호버(hover) 스타일에 대한 고대비 지원은 CSS border 속성(property)을 사용합니다:
- 버튼이나 데이터 셀이 초점을 얻을 때 테두리가 추가됩니다.
- 버튼이나 데이터 셀에 포인팅 기기로 호버링할 때 테두리가 추가됩니다.
- 기본으로 버튼과 데이터 셀은 테두리를 가지지 않고, 패딩은 포커스와 호버 스타일링을 위한 추가 테두리에 대한 자리표시자로 사용됩니다.

키보드 지원

날짜 선택 버튼

키	기능
`Space`, `Enter`	날짜 선택 대화상자를 엽니다. 선택 된 날짜, 즉, 날짜 입력 텍스트필드에 표기된 날짜로 초점을 이동시킵니다. 선택 된 날짜가 없는 경우, 현재 날자로 초점을 위치시킵니다.

날짜 선택 대화상자

키	기능
`ESC`	대화상자를 닫고 초점을 "날짜 선택" 버튼으로 되돌려줍니다.
`Tab`	대화상자 `Tab` 시퀀스에 다음 엘리먼트로 초점을 이동시킵니다. 그리드 설계 패턴에 정의된 대로, 달력 그리드의 오직 한 개 버튼만 `Tab` 시퀀스에 존재하는 것에 주의하세요. 초점이 마지막 버튼(즉, "확인")에 있다면, 첫 번째 버튼(즉, "이전 해")로 초점을 이동시킵니다.
`Shift + Tab`	대화상자 `Tab` 시퀀스의 이전 엘리먼트로 초점을 이동시킵니다. 그리드 설계 패턴에 정의된 대로, 달력 그리드의 오직 한 개 버튼만 `Tab` 시퀀스에 존재하는 것에 주의하세요. 초점이 첫 번째 버튼(즉, "이전 해")에 있다면, 마지막 버튼(즉, "확인")으로 초점을 이동시킵니다.

날짜 선택 대화상자: 월/연도 버튼

키	기능
`Space`, `Enter`	달력 그리드에 표시 된 월과(또는) 연도를 변경합니다.

날짜 선택 대화상자: 날짜 그리드

키	기능
`Space`, `Enter`	날짜를 선택하고, 대화상자를 닫고, 초점을 "날짜 선택" 버튼으로 이동시킵니다. "날짜" 입력의 값을 선택된 날짜로 업데이트 합니다. "날짜 선택" 버튼의 접근 가능한 이름을 선택 된 날짜를 포함하도록 업데이트 합니다.
`위 방향키`	이전 주의 동일한 요일로 초점을 이동시킵니다.
`아래 방향키`	다음 주의 동일한 요일로 초점을 이동시킵니다.
`오른쪽 방향키`	다음 요일로 초점을 이동시킵니다.
`왼쪽 방향키`	이전 요일로 초점을 이동시킵니다.
`Home`	현재 주의 첫 번째 요일(예를 들어, 일요일)로 초점을 이동시킵니다.
`End`	현재 주의 마지막 요일(예를 들어, 토요일)로 초점을 이동시킵니다.
`Page Up`	날짜 그리드를 이전 달로 변경합니다. 동일한 주의 동일한 요일로 초점을 설정합니다. 그 요일이 존재하지 않는다면, 이전 혹은 다음 주의 동일한 요일로 초점을 이동시킵니다.
`Shift + Page Up`	날짜 그리드를 이전 해로 변경합니다. 동일한 주의 동일한 요일로 초점을 설정합니다. 그 요일이 존재하지 않는다면, 이전 혹은 다음 주의 동일한 요일로 초점을 이동시킵니다.
`Page Down`	날짜 그리드를 다음 달로 변경합니다. 동일한 주의 동일한 요일로 초점을 설정합니다. 그 요일이 존재하지 않는다면, 이전 혹은 다음 주의 동일한 요일로 초점을 이동시킵니다.
`Shift + Page Down`	날짜 그리드를 다음 해로 변경합니다. 동일한 주의 동일한 요일로 초점을 설정합니다. 그 요일이 존재하지 않는다면, 이전 혹은 다음 주의 동일한 요일로 초점을 이동시킵니다.

날짜 선택 대화상자: 확인 및 취소 버튼

키	기능
`Space`, `Enter`	다음 버튼을 활성화하면: "취소": 대화상자를 닫고, "날짜 선택" 버튼으로 초점을 이동시키고, 날짜 input의 날짜는 업데이트 하지 않습니다. "확인": 대화상자를 닫고, "날짜 선택" 버튼으로 초점을 이동시키고, 날짜 input의 날짜를 업데이트 하고, "날짜 선택" 버튼의 접근 가능한 이름을 선택된 날짜를 포함하도록 업데이트 합니다.

키

기능

Space,
Enter

다음 버튼을 활성화하면:

"취소": 대화상자를 닫고, "날짜 선택" 버튼으로 초점을 이동시키고, 날짜 input의 날짜는 업데이트 하지 않습니다.
"확인": 대화상자를 닫고, "날짜 선택" 버튼으로 초점을 이동시키고, 날짜 input의 날짜를 업데이트 하고, "날짜 선택" 버튼의 접근 가능한 이름을 선택된 날짜를 포함하도록 업데이트 합니다.

Role, Property, State, Tabindex 어트리뷰트

텍스트상자

역할(role)	어트리뷰트	엘리먼트	사용법
	`aria-describedby="IDREF"`	`input`	보조기술이 날짜 형식 설명을 input과 연결할 수 있게 하여, 텍스트상자에 대한 접근 가능한 설명을 제공하는 엘리먼트를 식별시킵니다.

날짜 선택 버튼

역할(role)	어트리뷰트	엘리먼트	사용법
	`aria-label="String"`	`button`	접근 가능한 이름의 초기 값은 "날짜 선택"입니다. 사용자가 날짜를 선택하면, 접근 가능한 이름이 "날짜 선택, DATE_STRING"으로 변경됩니다. DATE_STRING은 선택된 날짜입니다.

날짜 선택 대화상자

역할(role)	어트리뷰트	엘리먼트	사용법
`dialog`		`div`	엘리먼트를 대화상자로 식별시킵니다.
	`aria-modal="true"`	`div`	대화상자가 modal임을 식별시킵니다.
	`aria-label="string"`	`div`	대화상자에 대한 접근 가능한 이름을 정의합니다.
	`aria-live="polite"`	`h2`	월과(또는) 연도가 변경될 때 `h1` 엘리먼트의 내용이 업데이트 됩니다. `h2`가 스크린리더에 의해 자동으로 낭독되어야 함을 나타탭니다.
	`aria-live="polite"`	`div`	그리드 탐색을 위한 키보드 명령에 대한 정보를 표시하는 엘리먼트가 스크린리더에 의해 자동으로 낭독되어야 함을 나타냅니다. 스크립트는 정보의 표시를 약간 지연시키기 때문에, 스크린리더는 초점 변경과 관련된 정보 후에 그것을 읽을 가능성이 높습니다.

날짜 선택 대화상자: 달력 탐색 버튼

역할(role)	어트리뷰트	엘리먼트	사용법
	`aria-label="String"`	`button`	버튼의 접근 가능한 이름을 정의합니다 (예를 들어 "다음 해")

날짜 선택 대화상자: 날짜 그리드

역할(role)	어트리뷰트	엘리먼트	사용법
`grid`		`table`	`table` 엘리먼트를 `grid` 위젯으로 식별시킵니다. `grid` 역할(role)이 `table` 엘리먼트에 적용되므로, `row`, `columnheader`, `gridcell` 역할은 `tr`, `th`, `td` 태그에 의해 암묵적이기 때문에 지정될 필요가 없습니다.
	`aria-labelledby="IDREF"`	`table`	`grid`에 대한 접근 가능한 이름을 제공하는 엘리먼트를 식별시킵니다.
	`tabindex="0"`	`td`	셀을 초점을 얻을 수 있게(focusable) 만들고 대화상자 `Tab` 시퀀스에 포함시킵니다. 엘리먼트가 대화상자 `Tab` 시퀀스에 포함될 때 자바스크립트에 의해 동적으로 설정됩니다. 언제든지, 그리드 내의 오직 한 개 `gridcell`만 `Tab` 시퀀스에 존재합니다. 초점을 관리하는 이 접근 방식은 이동(roving) tabindex 섹션에 기술되어 있습니다.
	`tabindex="-1"`	`td`	셀을 초점을 얻을 수 있게(focusable) 만들고 대화상자 `Tab` 시퀀스에서 제외시킵니다. 셀이 대화상자 `Tab` 시퀀스에 포함될 때 자바스크립트에 의해 동적으로 `0`으로 변경됩니다. 그리드셀이 대화상자 `Tab` 시퀀스에 포함될 때 자바스크립트에 의해 동적으로 `0`으로 변경됩니다. 언제든지, 그리드 내의 오직 한 개 `gridcell`만 `Tab` 시퀀스에 존재합니다. 초점을 관리하는 이 접근 방식은 이동(roving) tabindex 섹션에 기술되어 있습니다.
	`aria-selected="true"`	`td`	현재 선택된 날짜 즉, 날짜 input에 있는 날짜 값을 포함하는 셀을 식별시킵니다. 현재 선택된 날짜를 포함하는 셀에만 설정하세요; 다른 셀은 `aria-selected`가 지정되지 않습니다.

참고: 열 제목의 요일 이름이 두 글자로 축약되어 있으므로, 스크린리더에 의해 낭독 될 때 이해하기 어려울 수 있습니다. th 엘리먼트의 abbr 어트리뷰트를 적용하여 스크린리더에 대체 열 제목 이름이 제공될 수 있습니다. 따라서, 각 th 엘리먼트는 그 열에 대한 요일 이름의 전체 철자를 포함하는 abbr 어트리뷰트가 포함됩니다.

Javascript와 CSS 소스 코드

CSS: datepicker-dialog.css
Javascript: datepicker-dialog.js

날짜 선택 대화상자 예제

예제

February 2020

접근성 특성

키보드 지원

날짜 선택 버튼

날짜 선택 대화상자

날짜 선택 대화상자: 월/연도 버튼

날짜 선택 대화상자: 날짜 그리드

날짜 선택 대화상자: 확인 및 취소 버튼

Role, Property, State, Tabindex 어트리뷰트

텍스트상자

날짜 선택 버튼

날짜 선택 대화상자

날짜 선택 대화상자: 달력 탐색 버튼

날짜 선택 대화상자: 날짜 그리드

Javascript와 CSS 소스 코드

HTML Source Code