기본 코드 예시
공통 베이스라인
role="switch" 사용
role="switch"와 aria-checked로 on/off 상태를 명시해야 합니다.
레이블 연결
토글의 목적을 설명하는 레이블이 연결되어야 합니다.
키보드 작동
Space 키로 토글을 활성화할 수 있어야 합니다.
상태 변화 안내
상태 변경 시 스크린리더에 변경 사항이 전달되어야 합니다.
on/off 텍스트 제공
색상 외에 텍스트(켜짐/꺼짐)로 상태를 표시하세요.
터치 타겟 44×44px
모바일에서 충분한 터치 영역을 확보하세요.
색상만으로 상태 구분 금지
녹색/회색만으로 on/off를 나타내지 마세요. 색맹 사용자가 인식할 수 없습니다.
checkbox로 스위치 구현 금지
checkbox는 시각적으로 토글처럼 보여도 의미론적으로 다릅니다. role="switch"를 사용하세요.
디자인 시스템별 구현
추가 체크포인트
FormControlLabel로 레이블 연결
MUI Switch는 FormControlLabel과 함께 사용해 label prop으로 레이블을 연결하세요. 단독 사용 시 slotProps.input에 aria-label을 추가해야 합니다.
ToggleButtonGroup은 aria-label 필수
ToggleButton 그룹(aria-pressed 기반)은 ToggleButtonGroup에 aria-label로 그룹 목적을 명시하고 각 ToggleButton에 aria-label을 추가하세요.
Switch의 role="switch" 자동 적용 확인
MUI Switch는 내부 input에 role="switch"를 자동으로 적용하지 않습니다. 의미론적 스위치가 필요하다면 slotProps.input에 role="switch"를 추가하세요.
코드 샘플
구현 노트
- –MUI Switch는 내부적으로 <input type="checkbox">를 렌더링합니다. role="switch"는 자동 적용되지 않아 필요 시 slotProps.input으로 추가해야 합니다.
- –FormControlLabel의 label prop이 input의 aria-label로 자동 연결됩니다.
- –ToggleButtonGroup에 exclusive prop을 설정하면 한 번에 하나만 선택됩니다. 이때 aria-pressed가 자동 관리됩니다.
- –color prop 변경 시 배경색 대비율(최소 3:1)을 재검증하세요.