ARIA 접근성 가이드

역할 · 위젯

role="checkbox"

선택됨(true), 선택 안 됨(false), 일부 선택(mixed) 상태를 가지는 체크박스입니다.

기초HTML 요소 우선

한눈에 보기

분류
위젯
대응 HTML
<input type="checkbox"> (혼합 상태는 indeterminate 속성)
이름 정하는 방법
콘텐츠, 작성자
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

checkbox는 각각 독립적으로 켜고 끌 수 있는 선택 항목입니다. 여러 개 중 하나만 고르는 경우에는 radio를 씁니다. 현재 상태는 필수 속성 aria-checked로 알립니다.

설명
aria-checked의미
true선택됨
false선택 안 됨
mixed일부 선택. 하위 체크박스 중 일부만 선택된 “전체 선택” 체크박스에 씁니다.

HTML <input type="checkbox">는 상태 관리, Space 토글, <label> 연결, 폼 제출, required 검증까지 제공합니다. 디자인 때문에 직접 만들어야 한다면 네이티브 체크박스를 시각적으로만 숨기고 스타일을 입히는 방법이 더 안전합니다. 혼합 상태도 HTML에서 input.indeterminate = true로 표현할 수 있고, 브라우저가 이를 mixed로 보조기술에 전달합니다.

체크박스는 Enter로 바뀌지 않습니다

APG 기준으로 체크박스의 토글 키는 Space입니다. 네이티브 체크박스도 Enter로는 바뀌지 않고, 폼 안에서는 Enter가 폼 제출을 일으킬 수 있습니다. 직접 만든 체크박스도 이 관례를 따릅니다.

그룹으로 묶기

관련된 체크박스 여러 개는 <fieldset>+<legend> 또는 role="group"+aria-labelledby로 묶어 질문(그룹 이름)을 함께 전달합니다.

테스터 관점

  • Space로 상태가 바뀌고, 바뀐 상태가 즉시 읽히는지 확인합니다.
  • 화면의 체크 표시와 aria-checked 값이 항상 일치하는지 확인합니다.
  • 라벨 텍스트를 클릭해도 토글되는지(네이티브 + <label>) 확인합니다.

함께 쓰는 속성

필수 속성

aria-checked

지원 속성

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

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

키보드 동작

키보드 동작
키동작
Space체크박스 상태를 바꿉니다. 혼합 상태 체크박스는 APG 예제 기준으로 혼합 → 모두 선택 → 모두 해제 → (원래 일부 선택 상태) 순서로 바뀝니다.
Tab다음 체크박스나 다음 포커스 요소로 이동합니다. 체크박스 하나하나가 탭 순서에 들어갑니다.

사용 예

네이티브 체크박스

권장권장
<input type="checkbox" id="agree">
<label for="agree">이용 약관에 동의합니다</label>

직접 만든 체크박스

역할, 상태, 포커스, 이름, 키보드 처리를 모두 갖춰야 합니다.

HTML
<span role="checkbox" aria-checked="false" tabindex="0"
      aria-labelledby="news-label"></span>
<span id="news-label">뉴스레터 받기</span>

상태 바꾸기 (혼합 상태 포함)

JavaScript
function setParent(parent, children) {
  var on = children.filter(function (c) { return c.getAttribute('aria-checked') === 'true'; }).length;
  parent.setAttribute('aria-checked',
    on === 0 ? 'false' : on === children.length ? 'true' : 'mixed');
}
box.addEventListener('keydown', function (e) {
  if (e.key === ' ') { e.preventDefault(); toggle(box); }
});

상태를 클래스로만 표시하는 실수

비권장비권장
<div class="checkbox is-checked" onclick="toggle(this)">알림 받기</div>
<!-- 역할·상태·포커스가 없어 “알림 받기” 텍스트로만 읽힙니다 -->

직접 해 보기

“모두 선택” 체크박스는 아래 세 항목의 상태에 따라 true · false · mixed로 바뀝니다. Tab으로 이동하고 Space로 바꿔 보세요.

피자 토핑

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
선택 안 된 체크박스에 포커스버섯, 체크 박스, 체크 안 됨
Space로 선택체크됨
일부 선택된 “모두 선택”에 포커스모두 선택, 체크 박스, 부분 체크됨
그룹 안으로 처음 이동피자 토핑, 그룹, 모두 선택, 체크 박스, 부분 체크됨

사용 지침

이렇게 쓰세요

  • 가능하면 <input type="checkbox">와 <label>을 씁니다.
  • 직접 만들면 aria-checked를 항상 true/false/mixed 중 하나로 명시합니다.
  • “모두 선택” 체크박스는 하위 항목 상태에 맞춰 mixed를 갱신합니다.
  • 관련 체크박스는 그룹으로 묶고 그룹 이름을 붙입니다.

이렇게 쓰지 마세요

  • 하나만 고를 수 있는 선택지에 체크박스를 쓰지 않습니다. 라디오 버튼을 씁니다.
  • 즉시 설정이 적용되는 켜기/끄기에는 체크박스보다 스위치가 더 적합할 수 있습니다. 의미를 구분해 고릅니다.
  • 체크 표시를 CSS 가상 요소의 텍스트(예: content:"✓")로 넣지 않습니다. 이름에 섞여 읽힐 수 있습니다.
switchradiomenuitemcheckboxoption

이 역할을 쓰는 패턴

체크박스폼 오류 검증

참고 자료