스위치

언제 쓰나요

스위치는 “알림 받기”, “다크 모드”, “Wi-Fi”처럼 어떤 기능을 켜거나 끄는 설정에 씁니다. 체크박스와 비슷하지만 의미가 다릅니다. 체크박스는 “이 항목을 선택했다”를, 스위치는 “이 기능이 지금 켜져 있다”를 나타냅니다. 그래서 스위치는 보통 누르는 즉시 설정이 적용됩니다.

스위치, 체크박스, 토글 버튼 비교

세 가지 모두 키보드·보조기술 측면에서는 비슷하게 동작하므로, 화면에 보이는 모양과 의미가 일치하는 것을 고릅니다. 좌우로 미는 모양의 토글이라면 스위치, 네모 체크 표시라면 체크박스, 눌리는 버튼 모양이라면 토글 버튼이 자연스럽습니다.

구조

• 스위치 요소에 switch 역할을 줍니다.
• 상태는 aria-checked로 알리며 값은 true(켜짐) 또는 false(꺼짐)만 씁니다. 스위치에는 mixed 상태가 없습니다.
• 이름은 기능을 설명하는 고정된 텍스트입니다(예: “알림 받기”). 버튼 안의 글자, aria-labelledby, <label> 중 하나로 줍니다.
• 화면에 “켬/끔” 같은 상태 글자를 함께 보여 줄 수 있지만, 그 글자가 이름에 섞이거나 상태와 함께 이름이 바뀌면 안 됩니다. 상태는 aria-checked가 전달하므로, 보이는 상태 글자는 aria-hidden="true"로 숨기거나 이름 계산에서 빠지는 위치에 둡니다.
• 여러 스위치를 묶을 때는 <fieldset>이나 group으로 묶고 묶음 이름을 줍니다.

<span id="noti-label">알림 받기</span>
<button type="button" role="switch" aria-checked="true"
        aria-labelledby="noti-label">
  <span class="track" aria-hidden="true"></span>
  <span class="state" aria-hidden="true">켬</span>
</button>

키보드 동작

필요한 ARIA

직접 해 보기

왼쪽은 상태에 따라 버튼 글자만 “켜짐/꺼짐”으로 바뀌는 잘못된 구현입니다. 이름 자체가 바뀌어 무엇을 켜는 버튼인지 알 수 없습니다. 가운데와 오른쪽은 올바른 구현입니다. Tab으로 이동해 Space 또는 Enter로 바꿔 보세요.

전체 코드

<span>알림 받기</span>
<button type="button" onclick="this.textContent =
  this.textContent === '켜짐' ? '꺼짐' : '켜짐'">꺼짐</button>

<span id="noti-label">알림 받기</span>
<button type="button" role="switch" id="noti"
        aria-checked="false" aria-labelledby="noti-label">
  <span class="track" aria-hidden="true"></span>
</button>

var sw = document.getElementById('noti');

// <button>은 Space와 Enter 모두 click 이벤트를 발생시킵니다.
sw.addEventListener('click', function () {
  var on = sw.getAttribute('aria-checked') === 'true';
  sw.setAttribute('aria-checked', String(!on));
  // 여기서 실제 설정을 바로 적용합니다. 예: saveSetting('notification', !on);
});

<input type="checkbox" role="switch" id="dark">
<label for="dark">다크 모드</label>

[role="switch"][aria-checked="true"] .track { background: #1a5fb4; }

/* 상태를 속성 선택자로 그리면 화면과 ARIA 상태가 어긋날 수 없습니다. */
[role="switch"][aria-checked="true"] .track::after { transform: translateX(1.25rem); }

화면낭독기에서는

점검 체크리스트

• <button> 또는 <input type="checkbox">에 role="switch"를 얹어 만들었습니다.
• aria-checked 값이 true/false 중 하나이며 실제 설정 상태와 일치합니다(mixed를 쓰지 않음).
• 체크박스 기반 스위치에는 aria-checked를 덧붙이지 않았습니다.
• 접근 가능한 이름이 기능을 설명하고, 상태가 바뀌어도 이름은 바뀌지 않습니다.
• 보이는 “켬/끔” 글자가 이름에 섞이지 않습니다.
• Space로 바뀌며, 버튼 기반이면 Enter도 동작합니다.
• 켜짐·꺼짐이 색만이 아니라 손잡이 위치·글자로도 구분되고, 테두리가 배경과 3:1 이상 대비됩니다.
• 포커스 표시가 분명하게 보입니다.

관련 WCAG 성공 기준

• 1.3.1 정보와 관계 (A)
• 1.4.1 색의 사용 (A): 켜짐·꺼짐을 색만으로 구분하지 않습니다.
• 1.4.11 비텍스트 대비 (AA)
• 2.1.1 키보드 (A)
• 2.4.7 포커스 표시 (AA)
• 2.5.3 레이블 포함 이름 (A): 보이는 레이블이 접근 가능한 이름에 들어갑니다.
• 4.1.2 이름, 역할, 값 (A)