ARIA 접근성 가이드

역할 · 위젯

role="switch"

켜짐/꺼짐 두 상태를 가지는 스위치입니다. 상태는 aria-checked(true/false)로 알립니다.

기초

한눈에 보기

분류
위젯
대응 HTML
없음 (가장 가까운 것은 <input type="checkbox">)
이름 정하는 방법
콘텐츠, 작성자
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

switch는 checkbox의 하위 역할로, “선택했다/안 했다”보다 “켜져 있다/꺼져 있다”는 뜻을 전달합니다. 와이파이, 알림, 다크 모드처럼 바꾸는 즉시 적용되는 설정에 어울립니다. 체크박스와 달리 mixed 상태는 없으며, aria-checked="mixed"를 주면 false로 취급됩니다.

HTML에는 표준 스위치 요소가 없으므로 다음 중 하나로 만듭니다.

  • <button type="button" role="switch" aria-checked="false"> — Enter·Space와 포커스를 버튼이 처리해 줍니다.
  • <input type="checkbox" role="switch"> — 상태(checked)를 브라우저가 관리하고 <label>·폼 제출도 됩니다. 이 경우 aria-checked는 따로 쓰지 않고 checked를 씁니다.

이름은 고정하고 상태만 바꿉니다

“알림 켜기” → “알림 끄기”처럼 상태에 따라 이름을 바꾸지 않습니다. 이름은 “알림”으로 고정하고 aria-checked가 켜짐/꺼짐을 전달하게 합니다. 화면에 보이는 “ON/OFF” 글자도 이름에 섞이지 않도록 aria-hidden="true"로 숨깁니다.

지원이 오래된 일부 화면낭독기는 switch를 모르고 체크박스나 토글 버튼으로 읽을 수 있습니다. 하위 역할이라 의미는 크게 어긋나지 않습니다.

테스터 관점

  • Space(버튼 기반이면 Enter도)로 상태가 바뀌고 “켜짐/꺼짐”이 읽히는지 확인합니다.
  • 상태를 색만으로 구분하지 않는지(위치·아이콘 등) 확인합니다(WCAG 1.4.1).

함께 쓰는 속성

필수 속성

aria-checked

지원 속성

aria-disabledaria-errormessagearia-expandedaria-invalidaria-readonlyaria-required

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

키보드 동작

키보드 동작
키동작
Space스위치를 켜거나 끕니다.
Enter(선택 사항) 스위치를 켜거나 끕니다. <button>으로 만들면 자동으로 지원됩니다.
Tab스위치로 포커스를 옮깁니다.

사용 예

버튼으로 만든 스위치

권장권장
<button type="button" role="switch" aria-checked="false" id="notify">
  알림 <span aria-hidden="true" class="state">OFF</span>
</button>

체크박스로 만든 스위치

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

상태 바꾸기

JavaScript
sw.addEventListener('click', function () {
  var on = sw.getAttribute('aria-checked') === 'true';
  sw.setAttribute('aria-checked', String(!on));
  sw.querySelector('.state').textContent = on ? 'OFF' : 'ON';
});

이름에 상태를 넣는 실수

비권장비권장
<button role="switch" aria-checked="true">알림 끄기</button>
<!-- “알림 끄기, 스위치, 켜짐” → 누르면 어떻게 되는지 헷갈립니다 -->

직접 해 보기

스위치를 마우스나 Space·Enter로 바꿔 보세요. aria-checked가 바뀌고, 보이는 ON/OFF 글자는 aria-hidden으로 이름에서 빠져 있습니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
꺼진 스위치에 포커스블루투스, 전환 버튼, 꺼짐
Space로 켬켜짐

사용 지침

이렇게 쓰세요

  • 바로 적용되는 켜기/끄기 설정에 씁니다.
  • <button> 또는 <input type="checkbox">에 role="switch"를 붙여 만듭니다.
  • 이름은 고정하고, 상태는 aria-checked(또는 checked)로만 전달합니다.

이렇게 쓰지 마세요

  • mixed 상태를 쓰지 않습니다. 스위치는 두 상태뿐입니다.
  • “저장” 버튼을 눌러야 적용되는 폼 항목에는 체크박스가 더 자연스럽습니다.
  • aria-pressed와 aria-checked를 함께 쓰지 않습니다.
checkboxbuttonmenuitemcheckbox

이 역할을 쓰는 패턴

스위치버튼과 토글 버튼

참고 자료