ARIA 접근성 가이드

속성 · 값·범위

aria-valuemin

범위 위젯이 가질 수 있는 가장 작은 값을 숫자로 알립니다.

기초

한눈에 보기

구분
속성 (Property)
분류
값·범위
값 형식
숫자 (number)
기본값
0 (spinbutton: 없음)
적용 범위
특정 역할에만 사용
HTML 대체
<input type="range">·<input type="number">·<meter>의 min (<progress>는 항상 0부터 시작)

설명

aria-valuemin은 범위 위젯의 최솟값을 정합니다. slider, spinbutton, progressbar, meter, scrollbar, 포커스를 받을 수 있는 separator에서 쓰며, 반드시 aria-valuemax보다 작거나 같아야 합니다. 음수와 소수도 쓸 수 있습니다(예: 온도 −20~40).

생략하면 slider, scrollbar, progressbar, meter, separator는 0, spinbutton은 최솟값 없음으로 처리됩니다. 범위가 0에서 시작하지 않는 위젯(예: 연도 1900~2100, 인원 1~10)은 반드시 값을 적어야 백분율 계산과 Home 키 동작이 맞아떨어집니다.

aria-valuemin은 ARIA 속성일 뿐이어서 값을 제한하는 기능은 없습니다. 사용자가 최솟값 아래로 내려가지 못하게 막는 일은 스크립트가 해야 합니다. 속성 값과 실제 동작이 어긋나면 화면낭독기 사용자는 "최솟값은 1"이라는 정보와 다른 결과를 듣게 됩니다.

손잡이가 두 개인 범위 슬라이더에서는 "최고 가격" 손잡이의 최솟값을 "최저 가격" 손잡이의 현재 값으로 맞춰, 두 손잡이가 서로를 넘지 못하게 하고 그 사실을 속성으로도 알립니다.

검수할 때는 Home 키를 눌렀을 때 aria-valuenow가 aria-valuemin과 같아지는지, 화면의 최솟값 표기와 속성 값이 일치하는지, 범위가 바뀌는 위젯에서 값이 함께 갱신되는지 확인합니다.

값

값
값의미
<숫자>범위의 최솟값입니다. 음수·소수도 쓸 수 있으며 aria-valuemax보다 작거나 같아야 합니다. (예: 0, 1, -20)
(생략) 기본값slider·scrollbar·progressbar·meter·separator는 0으로, spinbutton은 최솟값이 없는 것으로 처리됩니다.

사용 예

1부터 시작하는 인원 선택 스핀버튼

권장HTML
<label id="ppl-label">인원</label>
<div role="spinbutton" tabindex="0"
     aria-labelledby="ppl-label"
     aria-valuemin="1" aria-valuemax="10" aria-valuenow="2">2</div>

spinbutton은 최솟값 기본값이 없으므로, 1 아래로 내려갈 수 없다면 꼭 적어야 합니다.

음수 범위 슬라이더

권장HTML
<div role="slider" tabindex="0" aria-label="냉동실 온도"
     aria-valuemin="-24" aria-valuemax="-14" aria-valuenow="-18"
     aria-valuetext="영하 18도"></div>

최솟값 아래로 내려가지 않게 제한하기

JavaScript
function setValue(el, v) {
  const min = Number(el.getAttribute('aria-valuemin'));
  const max = Number(el.getAttribute('aria-valuemax'));
  v = Math.min(max, Math.max(min, v)); // 범위 안으로 자르기
  el.setAttribute('aria-valuenow', String(v));
}

직접 해 보기

가격 범위 슬라이더입니다. 최저 가격 손잡이를 움직이면 최고 가격 손잡이의 aria-valuemin이 따라 바뀌는 모습을 실시간 코드에서 확인할 수 있습니다.

가격 범위

각 손잡이에서 방향키(5,000원 단위), Page Up / Page Down(20,000원 단위), Home / End를 눌러 보세요. 한 손잡이를 움직이면 다른 손잡이의 aria-valuemin 또는 aria-valuemax가 함께 바뀝니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
인원 스핀버튼에 포커스인원, 스핀 버튼, 2
최솟값(1)에서 아래 방향키를 누름1 (값이 그대로 유지됨)
최고 가격 손잡이에서 Home 키를 누름20,000원 (최저 가격 손잡이 값까지 내려감)

사용 지침

이렇게 쓰세요

  • 범위가 0에서 시작하지 않으면 aria-valuemin을 명시합니다.
  • 스크립트에서 값을 최솟값 아래로 내려가지 않게 제한합니다.
  • Home 키로 최솟값에 바로 이동할 수 있게 합니다(APG 슬라이더·스핀버튼 키보드 동작).

이렇게 쓰지 마세요

  • aria-valuemin을 aria-valuemax보다 크게 설정하지 않습니다.
  • 속성만 넣고 실제로는 최솟값 아래 값이 입력되게 두지 않습니다.
  • <progress> 요소에 aria-valuemin을 덧붙여 0이 아닌 시작값을 흉내 내지 않습니다. 범위를 0부터 다시 계산합니다.

사용할 수 있는 역할

sliderspinbuttonprogressbarmeterscrollbarseparator
aria-valuemaxaria-valuenowaria-valuetext

이 속성을 쓰는 패턴

슬라이더

참고 자료