날짜 선택기 콤보박스 예제
다음 날짜 선택기는 대화상자를 여는 콤보박스 설계 패턴의 구혠을 보여줍니다. 날짜 선택 대화상자는 날짜 선택 버튼을 활성화 하거나 키보드 초점을 콤보박스로 이동시키고 아래 방향키나 Alt + 아래 방향키를 눌러 열립니다. 대화상자는 달력을 표시하고 날짜를 선택할 수 있는 그리드 패턴의 구현을 포함합니다. 대화상자의 추가 버튼은 그리드에 표시된 월과 연도를 변경하는데 사용 가능합니다.
유사한 예는 다음과 같습니다:
- 날짜 선택 대화상자 예제: 날짜를 선택하기 위한 달력 그리드를 포함하는 대화상자를 보여줍니다.
- 선택 전용 콤보박스: HTML
select엘리먼트와 기능적으로 유사한 텍스트 입력이 없는 선택 전용 콤보박스. - 목록과 인라인 자동완성이 있는 편집 가능한 콤보박스: "인라인 자동완성 목록"으로 알려진 자동완성 동작을 보여주는 편집 가능한 콤보박스.
- 목록 자동완성이 있는 편집 가능한 콤보박스: "수동 선택 목록"으로 알려진 자동완성 동작을 보여주는 편집 가능한 콤보박스.
- 자동완성이 없는 편집 가능한 콤보박스:
aria-autocomplete=none과 관련된 동작을 보여주는 편집 가능한 콤보박스. - 그리드 팝업이 있는 편집 가능한 콤보박스: 사용자가 각 제안에 대한 설명 정보를 탐색할 수 있게 하는, 그리드에 제안이 표현되는 편집 가능한 콤보박스.
예제
(날짜 형식: mm/dd/yyyy)
December 2020
| 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를 통해 콤보박스와 연결됩니다. -
아래 화살표 아이콘은
combobox설계 패턴에 지정된 Tab 시퀀스에서 제외 되지만, 날짜 선택 버튼으로 보조 기술에 접근할 수 있습니다. 이는 키보드가 없을 수 있는 보조 기술 사용자가, 예를 들어, 터치 기반의 스크린리더를 사용 중인 사람, 날짜 선택 대화상자를 열 수 있게 합니다. - 대화상자에, 달력에 표시 된 월과 연도를 변경하기 위한 추가 버튼에 단축키가 할당됩니다.
- 키보드 도움말은 대화 상자 하단에 표시됩니다. 라이브 영역은 초점이 그리드 안으로 이동할 때 스크린리더 사용자에게 알리는데 사용됩니다.
- 월과 연도를 표기하는 달력 제목은 스크린리더 사용자가 월과 연도를 변경하는 버튼과 키보드 명령으로부터 피드백을 얻기 때문에 라이브 영역으로 마크업 됩니다.
-
달력의 간결한 시각적 디자인을 용이하게 하기 위해, 열 제목의 요일 이름이 두 글자로 축약됩니다.
하지만, 이것은 요일 스크린리더 사용자가 요일 이름을 이애하기 어렵게 만듭니다.
따라서, 사용자가 그리드를 탐색 할 때 스크린리더가 전체 이름을 낭독 할 수 있도록, 전체 요일 이름이 열 제목의 HTML
abbr어트리뷰트로 보조기술에 제공됩니다. - 컨트롤의 초점과 호버 스타일은 CSS border 속성을 통해 운영체제 고대비 설정을 지원합니다:
- 버튼이나 날짜 셀이 초점을 받을 때 테두리가 추가됩니다.
- 포인팅 기기를 버튼이나 날짜 셀 위로 호버하면 테두리가 추가됩니다.
- 기본적으로, 버튼과 날짜 셀은 테두리가 없습니다; padding이 초점과 호버 스타일을 위한 자리표시자 공간을 제공합니다.
키보드 지원
Combobox
| 키 | 기능 |
|---|---|
| 아래 방향키, ALT + 아래 방향키 |
|
날짜 선택 대화상자
| 키 | 기능 |
|---|---|
| ESC | 대화상자를 닫고 콤보박스로 초점을 이동시킵니다. |
| TAB |
|
| Shift + TAB |
|
날짜 선택 대화상자: 달력 버튼
| 키 | 기능 |
|---|---|
| Space, Enter |
달력 그리드에 표시 된 월 과/또는 연도를 변경합니다. |
날짜 선택 대화상자: 날짜 그리드
| 키 | 기능 |
|---|---|
| Space |
|
| Enter |
|
| 위 방향키 | 이전 주의 동일한 요일로 초점을 이동시킵니다. |
| 아래 방향키 | 다음 주의 동일한 요일로 초점을 이동시킵니다. |
| 오른쪽 방향키 | 다음 요일로 초점을 이동시킵니다. |
| 왼쪽 방향키 | 이전 요일로 초점을 이동시킵니다. |
| Home | 현재 주의 첫 번째 요일(예를 들어 일요일)로 초점을 이동시킵니다. |
| End | 현재 주의 마지막 요일(예를 들어 토요일)로 초점을 이동시킵니다. |
| PageUp |
|
| Shift+ PageUp |
|
| PageDown |
|
| Shift+ PageDown |
|
날짜 선택 대화상자: 확인 및 취소 버튼
| 키 | 기능 |
|---|---|
| Space, Enter |
버튼을 활성화 하면:
|
Role, Property, State, Tabindex 어트리뷰트
Combobox
| 역할(role) | 어트리뷰트 | 엘리먼트 | 사용법 |
|---|---|---|---|
combobox |
input |
input 엘리먼트를 콤보박스를 식별시킵니다.
|
|
aria-haspopup="dialog" |
input |
콤보박스가 대화상자를 엶을 나타냅니다. | |
aria-expanded="false" |
input |
콤보박스가 접혀있음 즉, "날짜 선택" 대화상자가 노출되어 있지 않음을 나타냅니다. | |
aria-expanded="true" |
input |
콤보박스가 확장 되어 있음 즉, "날짜 선택" 대화상자가 열려있음을 나타냅니다. | |
aria-autocomplete="none" |
input |
콤보박스가 자동완성을 지원하지 않음을 나타냅니다. | |
aria-controls="IDREF" |
input |
콤보박스에 의해 제어되는 엘리먼트를 식별시킵니다. | |
aria-describedby="IDREF" |
input |
보조기술이 날짜 형식 설명과 input을 연결할 수 있도록, 콤보박스에 대한 접근 가능한 설명을 제공하는 엘리먼트를 식별시킵니다. |
날짜 선택 버튼
| 역할(role) | 어트리뷰트 | 엘리먼트 | 사용법 |
|---|---|---|---|
tabindex="-1" |
button |
콤보박스 설계 패턴에 지정된 Tab 시퀀스에서 버튼 즉, 아래 화살표 아이콘을 제외시킵니다. | |
aria-label="string" |
button |
접근 가능한 이름을 버튼을 활성화하여 열린 대화상자의 제목과 일치하는 "날짜 선택"으로 정의합니다. |
날짜 선택 대화상자
| 역할(role) | 어트리뷰트 | 엘리먼트 | 사용법 |
|---|---|---|---|
dialog |
div
|
엘리먼트를 대화상자로 식별시킵니다. | |
aria-modal="true" |
div |
대화상자가 모달임을 나타냅니다. | |
aria-label="날짜 선택" |
div |
대화상자에 대한 접근 가능한 이름을 정의합니다. | |
aria-live="polite" |
h2 |
|
|
aria-live="polite" |
div |
|
날짜 선택 대화상자: 달력 탐색 버튼
| 역할(role) | 어트리뷰트 | 엘리먼트 | 사용법 |
|---|---|---|---|
aria-label="String" |
button |
버튼의 접근 가능한 이름을 정의합니다. (예. "다음 해"). |
날자 선택 대화상자: 날짜 그리드
| 역할(role) | 어트리뷰트 | 엘리먼트 | 사용법 |
|---|---|---|---|
grid |
table
|
|
|
aria-labelledby="IDREF" |
table |
그리드에 표시된 날짜의 월과 연도를 나타내는 h2인 grid에 대한 접근 가능한 이름을 제공하는 엘리먼트를 식별시킵니다.
|
|
tabindex="0"
|
td
|
|
|
tabindex="-1"
|
td
|
|
|
aria-selected="true" |
td |
|
참고: 열 제목의 요일 이름이 두 글자로 축약되어 있으므로, 스크린리더에 의해 낭독 될 때 이해하기 어려울 수 있습니다.
th 엘리먼트의 abbr 어트리뷰트를 적용하여 스크린리더에 대체 열 제목 이름이 제공될 수 있습니다.
따라서, 각 th 엘리먼트는 그 열에 대한 요일 이름의 전체 철자를 포함하는 abbr 어트리뷰트가 포함됩니다.
Javascript와 CSS 소스 코드
- CSS: combobox-datepicker.css
- Javascript: combobox-datepicker.js
HTML Source Code