항목을 선택하거나 해제할 수 있는 체크박스 패턴
관련 WCAG 기준 — 클릭하여 상세 보기
checkbox 역할
네이티브 <input type="checkbox"> 또는 role="checkbox"를 사용해야 합니다.
aria-checked로 상태 반영
체크됨: aria-checked="true", 미체크: aria-checked="false", 중간 상태: aria-checked="mixed"여야 합니다.
접근 가능한 레이블
<label>, aria-labelledby, 또는 aria-label로 레이블을 제공해야 합니다.
Space 키로 토글
포커스 시 Space 키로 체크 상태를 토글할 수 있어야 합니다.
그룹에 group 역할
관련 체크박스는 role="group"과 aria-labelledby로 그룹 레이블을 연결하세요.
포커스 표시
커스텀 체크박스에 명확한 포커스 링을 제공하세요.
오류 메시지 연결
유효성 오류 메시지를 aria-describedby로 체크박스와 연결하세요.
role 없는 div/span 금지
비의미적 요소로 체크박스를 만들 때 role="checkbox"와 키보드 처리를 빠뜨리지 마세요.
대체 없이 네이티브 숨김 금지
display:none이나 visibility:hidden으로 네이티브 체크박스를 숨기면 접근성을 잃습니다.
FormControlLabel로 레이블 연결
MUI Checkbox는 FormControlLabel로 감싸 레이블을 연결하세요.
indeterminate 상태 처리
indeterminate prop으로 중간 선택 상태를 표현할 수 있으며 aria-checked="mixed"가 자동 설정됩니다.