체크상자 예제 (이중 상태)

이 예제는 div 엘리먼트를 사용하는 이중 상태 체크상자에 대한 체크상자에 설계 패턴 구현합니다.

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

체크상자 (혼합 상태): HTML fieldset에 포함된 이중 상태 HTML 체크 상자 그룹 내의 체크 상태를 반영하고 제어하기 위한 aria-checked에 대한 혼합 값을 사용하는 체크상자를 보여줍니다.

예제

샌드위치 재료

상추
토마토
머스타드
새싹채소

접근성 특성

보조 기술 사용자가 각 체크상자가 샌드위치 재료라는 관련 체크상자 그룹의 일부임을 이해하는데 도움이 되도록, 체크상자들은 h3 헤딩 엘리먼트로 레이블이 지정된 group 안에 감싸집니다.
보조 기술 사용자가 체크상자들을 4개의 목록 항목으로 인지할 수 있도록, 체크상자로 제공 된 각 div는 ul 엘리먼트에 포함 된 li 엘리먼트 안에 포함됩니다.
레이블이나 체크상자를 클릭하면 체크상자가 활성화 될 것을 쉽게 인지할 수 있도록, 체크상자나 레이블 위로 포인터를 호버하면, 배경색이 변경되고 테두리가 나타나고 커서가 포인터로 변경됩니다.
운영체게 고대비 설정이 활성화 된 경우 일부 시스템에서 투명 테두리가 눈에 보여지기 때문에, 투명도는 포커스를 얻은 요소와 다른 요소들 사이의 시각적 차이를 만드는데 사용될 수 없습니다. 투명도를 사용하는 대신, 포커스를 얻은 요소가 얇은 테두리와 더 적은 안쪽 여백을 가집니다. 엘리먼트가 포커스를 얻을 때, 테두리가 0에서 2px로 변경되고 안쪽 여백이 2px로 감소합니다. 엘리먼트가 포커스를 잃을 때, 테두리가 2px에서 0으로 변경되고 안쪽 여백이 2px 증가됩니다.
고대비 설정이 색상을 반전시킬 때 인라인 SVG 그래픽의 테두리가 배경과 충분한 대비를 가지도록, 테듀리 색상을 텍스트 콘텐츠의 색상과 동기화됩니다. 예를 들어, 체크상자 테두리 색상은 체크상자를 그리는데 사용된 rect와 polyline 엘리먼트의 stroke 속성에 대한 CSS currentcolor 값을 지정하여 고대비 모드 텍스트의 전경색과 일치하도록 설정합니다. 체크상자 그래픽의 배경색을 고대비 배경색과 일치시키기 위해, rect 엘리먼트의 fill-opacity 어트리뷰트를 0으로 설정합니다. stroke와 fill 속성(property)을 지정하는데 특정 색상이 대신 사용되었다면, 그 색상은 고대비 모드에서 동일하게 유지되어, 이 색상은 체크상자와 배경색 사이의 대비가 불충분하게 되거나 색상이 고대비 모드 배경색과 일치하는 경우 체크상자를 보이지 않게 만들게 됩니다.
참고: SVG 엘리먼트가 고대비 모드에서 업데이트 되려면 currentcolor에 대한 auto으로 설정된 CSS forced-color-adjust 속성을 가져야 합니다. 일부 브라우저가 기본 값으로 auto를 사용하지 않습니다.

키보드 지원

Key	Function
`Tab`	`checkbox`로 키보드 초점을 이동시킵니다.
`Space`	체크상자를 체크 된 상태와 체크 되지 않은 상태로 전환시킵니다.

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

역할(role)	어트리뷰트	엘리먼트	사용법
		`h3`	체크상자의 크룹에 대한 그룹핑 레이블을 제공합니다.
`group`		`div`	`div` 엘리먼트를 체크상자들에 대한 `group` 컨테이너로서 식별시킵니다.
	`aria-labelledby`	`div`	체크상자들의 그룹에 대한 접근 가능한 이름을 정의하도록 `aria-labelledby` 어트리뷰트가 `h3` 엘리먼트의 `id` 어트리뷰트를 참조합니다.
`checkbox`		`div`	`div` 엘리먼트를 `checkbox`로 식별시킵니다. 이 `div`의 자식 텍스트 콘텐츠가 체크상자의 접근 가능한 이름을 제공합니다.
	`tabindex="0"`	`div`	페이지 탭 시퀀스에 체크상자를 포함시킵니다.
	`aria-checked="false"`	`div`	`checkbox`가 체크되지 않음을 나타냅니다. CSS 어트리뷰트 선택자가 (e.g. `[aria-checked="false"]`) `aria-checked` 어트리뷰트의 값으로 시각적 상태를 동기화하는데 사용됩니다. 운영체제와 브라우저 고대비 설정을 지원하기 위해, CSS `::before` 가상 엘리먼트와 `content` 속성(property)이 체크상자 상태의 시각적 표시자를 생성하는데 사용됩니다.
	`aria-checked="true"`	`div`	`checkbox`가 체크 됨을 나타냅니다. CSS 어트리뷰트 선택자가 (e.g. `[aria-checked="true"]`) `aria-checked` 어트리뷰트의 값으로 시각적 상태를 동기화 하는데 사용됩니다. 운영체제와 브라우저 고대비 설정을 지원하기 위해, CSS `::before` 가상 엘리먼트와 `content` 속성(property)이 체크상자 상태의 시각적 표시자를 생성하는데 사용됩니다.

Javascript와 CSS 소스 코드

CSS: checkbox.css
Javascript: checkbox.js

체크상자 예제 (이중 상태)

예제

샌드위치 재료

접근성 특성

키보드 지원

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

Javascript와 CSS 소스 코드

HTML 소스 코드

간단한 이중 상태 체크박스 예제