ARIA 접근성 가이드

역할 · 위젯

role="slider"

정해진 범위 안에서 손잡이를 움직여 값을 고르는 입력 요소입니다.

중급HTML 요소 우선

한눈에 보기

분류
위젯
대응 HTML
<input type="range">
이름 정하는 방법
작성자
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

slider는 최솟값과 최댓값 사이에서 값을 고르는 위젯입니다. 포커스를 받는 요소는 손잡이(thumb)이며, 역할과 값 속성도 손잡이에 붙입니다.

HTML <input type="range">는 이 모든 것과 키보드 조작을 기본 제공하므로 먼저 고려합니다. 손잡이가 두 개인 범위 선택(최저가~최고가)은 손잡이마다 슬라이더 역할을 주고 각각 이름을 붙입니다(APG Multi-Thumb Slider).

터치 화면낭독기에서의 주의

모바일 화면낭독기(iOS VoiceOver, Android TalkBack)는 슬라이더를 위아래 스와이프로 조절하는데, 직접 만든 ARIA 슬라이더는 이 제스처를 받지 못하는 경우가 많습니다. 모바일 지원이 중요하면 <input type="range">를 쓰거나 증감 버튼을 함께 제공합니다. 자세한 내용은 모바일 ARIA를 참고하세요.

테스터 관점

  • 손잡이에 이름이 있고, 값이 바뀔 때마다 새 값(또는 값 텍스트)이 읽히는지 확인합니다.
  • Home/End가 최솟값/최댓값으로 가는지, 범위를 벗어나지 않는지 확인합니다.
  • 드래그만 되는 슬라이더가 아닌지 확인합니다(WCAG 2.5.7 드래그 동작, 2.1.1 키보드).

함께 쓰는 속성

필수 속성

aria-valuenow

지원 속성

aria-disabledaria-errormessagearia-haspopuparia-invalidaria-orientationaria-readonlyaria-valuemaxaria-valueminaria-valuetext

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

키보드 동작

키보드 동작
키동작
→값을 한 단계 올립니다.
↑값을 한 단계 올립니다.
←값을 한 단계 내립니다.
↓값을 한 단계 내립니다.
Home최솟값으로 설정합니다.
End최댓값으로 설정합니다.
Page Up(선택 사항) 값을 큰 단위(예: 10)로 올립니다.
Page Down(선택 사항) 값을 큰 단위로 내립니다.

사용 예

네이티브 범위 입력

권장권장
<label for="vol">음량</label>
<input type="range" id="vol" min="0" max="100" step="5" value="50">

ARIA 슬라이더

HTML
<span id="temp-label">난방 온도</span>
<div class="track">
  <div role="slider" tabindex="0" aria-labelledby="temp-label"
       aria-valuemin="16" aria-valuemax="30" aria-valuenow="22"
       aria-valuetext="22도"></div>
</div>

값 바꾸기

JavaScript
function setValue(thumb, v) {
  var min = +thumb.getAttribute('aria-valuemin'), max = +thumb.getAttribute('aria-valuemax');
  v = Math.max(min, Math.min(max, v));
  thumb.setAttribute('aria-valuenow', String(v));
  thumb.setAttribute('aria-valuetext', v + '도');
  thumb.style.left = ((v - min) / (max - min) * 100) + '%';
}

트랙에 역할을 붙이는 실수

비권장비권장
<div role="slider" aria-valuenow="22" class="track">   <!-- 포커스도 이름도 없음 -->
  <div class="thumb" tabindex="0"></div>                  <!-- 포커스는 손잡이에 -->
</div>

직접 해 보기

손잡이에 포커스를 두고 방향키, Page Up/Page Down(10씩), Home/End로 값을 바꿔 보세요. 트랙을 클릭하거나 손잡이를 끌어도 됩니다.

음량

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
손잡이에 포커스음량, 슬라이더, 50%
→로 값 올림51%
aria-valuetext가 없을 때음량, 슬라이더, 51

사용 지침

이렇게 쓰세요

  • 역할·값·tabindex="0"은 손잡이에 붙입니다.
  • 숫자만으로 뜻이 불분명하면 aria-valuetext를 씁니다.
  • 드래그 외에 클릭·키보드로도 값을 바꿀 수 있게 합니다.

이렇게 쓰지 마세요

  • 값을 바꿀 때 aria-valuenow 갱신을 빠뜨리지 않습니다.
  • 정확한 숫자 입력이 중요한 경우(수량, 금액) 슬라이더만 제공하지 않습니다. 스핀버튼이나 입력란을 함께 둡니다.
  • 진행 상황 표시(읽기 전용)에 쓰지 않습니다. progressbar를 씁니다.
spinbuttonscrollbarprogressbarmeter

이 역할을 쓰는 패턴

슬라이더

참고 자료