체크상자 (혼합 상태)
이 예제는 삼중 상태 혹은 혼합 상태 체크 상자를 만들기 위해 Checkbox 설계 패턴을 사용하는 것을 뵤여줍니다. 이 구현에서, 혼합 상태 체크상자는 표준 HTML 체크상자 세트의 상태를 나타냅니다. 세트 내 어떤 체크상자도 체크되어 있지 않다면, 혼합 상태 체크상자는 체크되지 않고, 세트의 모든 멤버가 체크 되어 있다면, 혼합 상태 체크 상자가 체크 됩니다. 세트가 일부는 체크 된 체크상자와 일부는 체크되지 않은 체크 상자가 모두를 포함한다면, 혼합 상태 체크상자는 부분적으로 체크됩니다. 삼중 상태 체크 상자를 활성화 하는 것은 세트 내 체크상자들의 상태를 변경합니다.
유사한 예는 다음과 같습니다:
- 체크상자 (이중 상태): 간단한 이중 상태 체크상자.
예제
접근성 특성
- 보조 기술 사용자가 체크상자들이
샌드위치 재료
라는 관련 체크상자 그룹 전체임을 알 수 있도록, 체크상자들은legend엘리먼트에 의해 레이블이 지정된fieldset엘리먼트로 감싸집니다. - 레이블이나 체크상자를 클릭하면 체크상자가 활성화 될 것을 쉽게 인지할 수 있도록, 체크상자나 레이블 위로 포인터를 호버하면, 배경색이 변경되고 테두리가 나타나고 커서가 포인터로 변경됩니다.
- 운영체제 고대비 설정이 활성화 된 경우 일부 시스템에서 투명 테두리가 눈에 보여지기 때문에, 투명도는 포커스를 얻은 요소와 다른 요소들 사이의 시각적 차이를 만드는데 사용될 수 없습니다. 투명도를 사용하는 대신, 포커스를 얻은 요소가 얇은 테두리와 더 적은 안쪽 여백을 가집니다. 엘리먼트가 포커스를 얻을 때, 테두리가 0에서 2px로 변경되고 안쪽 여백이 2px로 감소합니다. 엘리먼트가 포커스를 잃을 때, 테두리가 2px에서 0으로 변경되고 안쪽 여백이 2px 증가됩니다.
-
고대비 설정이 색상을 반전시킬 때 인라인 SVG 그래픽의 테두리가 배경과 충분한 대비를 가지도록, 테듀리 색상을 텍스트 콘텐츠의 색상과 동기화됩니다.
예를 들어, 체크상자 테두리 색상은 체크상자를 그리는데 사용된
rect와polyline엘리먼트의stroke속성에 대한 CSScurrentcolor값을 지정하여 고대비 모드 텍스트의 전경색과 일치하도록 설정합니다. 체크상자 그래픽의 배경색을 고대비 배경색과 일치시키기 위해,rect엘리먼트의fill-opacity어트리뷰트를 0으로 설정합니다.stroke와fill속성(property)을 지정하는데 특정 색상이 대신 사용되었다면, 그 색상은 고대비 모드에서 동일하게 유지되어, 이 색상은 체크상자와 배경색 사이의 대비가 불충분하게 되거나 색상이 고대비 모드 배경색과 일치하는 경우 체크상자를 보이지 않게 만들게 됩니다.
참고: SVG 엘리먼트가 고대비 모드에서 업데이트 되려면currentcolor에 대한auto으로 설정된 CSSforced-color-adjust속성을 가져야 합니다. 일부 브라우저가 기본 값으로auto를 사용하지 않습니다.
키보드 지원
| 키 | 기능 |
|---|---|
| Tab | 키보드 초점을 체크박스들로 이동시킵니다. |
| Space |
|
Role, Property, State, Tabindex 어트리뷰트
| 역할(role) | 어트리뷰트 | 엘리먼트 | 사용법 |
|---|---|---|---|
checkbox |
div |
|
|
tabindex="0" |
div |
페이지 탭 시퀀스에 체크상자를 포함시킵니다. | |
aria-controls="[IDREFS]" |
div |
혼합 체크상자에 의해 제어되는 체크상자들의 세트를 식별시킵니다. | |
aria-checked="false" |
div |
|
|
aria-checked="true" |
div |
|
|
aria-checked="mixed" |
div |
|
Javascript와 CSS 소스 코드
- CSS: checkbox-mixed.css
- Javascript: checkbox-mixed.js
HTML Source Code