접근성이 우수한 스위치 제어 빌드

웹 기능: <input type="checkbox" switch> accent-color

<input type="checkbox" switch>에서 연결된 <label>와 함께 HTML switch 속성을 사용하여 기본 양식 제출, 키보드 탐색, 스크린 리더 시맨틱을 유지하는 바이너리 켜기/끄기 전환을 빌드합니다(체크박스 스타일 지정 및 양식 참고).

마크업

표준 체크박스 입력에 불리언 switch 속성을 추가합니다.

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>
  • 라벨은 입력을 래핑하거나 for/id와 연결될 수 있습니다. 모든 스타일 지정은 입력을 타겟팅하므로 라벨 구조에 종속되지 않습니다.
  • 선택하면 입력에서 표준 체크박스 값을 제출합니다. JavaScript에서 change (또는 input) 이벤트를 수신 대기하고 .value 대신 .checked를 읽습니다.

스타일 지정

accent-color를 사용하여 컨트롤의 강조 표시 색상을 맞춤설정하고(브랜드 일관성 양식 참고) 포커스 스타일이 표시되는지 확인합니다.

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

대체 전략

스위치 제어의 대체 및 브라우저 지원

기준 타겟이 <input type="checkbox" switch>를 지원하지 않는 경우 'switch' in HTMLInputElement.prototype가 false일 때만 input-switch-polyfill를 로드합니다. 폴리필을 무조건 로드하지 마세요. 폴리필은 role="switch"를 설정하고, 스위치 스타일 지정 (appearance: none)을 적용하고, 계산된 accent-color를 동기화하고, 포인터 드래그 지원을 제공하여 switch 속성이 있는 체크박스를 개선합니다.

프로젝트에 적합한 패키지 로드 방식을 사용합니다. 아래 예에서는 설정에서 모듈 지정자를 확인할 수 있다고 가정합니다.

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

accent-color의 대체 및 브라우저 지원

accent-color 속성은 점진적 개선입니다. 이 속성을 지원하지 않는 브라우저는 이를 무시하고 기본 UI 색상을 사용합니다.