ARIA 접근성 가이드

역할 · 문서 구조

role="meter"

정해진 범위 안의 측정값(디스크 사용량, 배터리 잔량 등)을 나타냅니다. 진행률에는 쓰지 않습니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<meter>
이름 정하는 방법
작성자 (author)
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

meter는 알려진 범위 안의 스칼라 측정값이나 비율을 보여 주는 요소입니다. 저장 공간 사용량, 배터리 잔량, 비밀번호 강도, 평가 점수 등에 씁니다. WAI-ARIA 1.2에서 추가되었습니다.

HTML과의 관계

<meter> 요소가 대응하며, min/max/value가 각각 값 속성이 됩니다. HTML의 low, high, optimum에 해당하는 ARIA 속성은 1.2에 없습니다(명세는 이후 버전에서 검토한다고 밝히고 있습니다).

값 규칙

  • aria-valuenow는 필수입니다. aria-valuemin이 없으면 0, aria-valuemax가 없으면 100으로 봅니다.
  • valuenow는 min~max 범위를 벗어나면 안 됩니다.
  • 숫자만으로 의미가 부족하면 aria-valuetext로 “64GB 중 48GB 사용”처럼 읽힐 문구를 줍니다.
  • 이름이 필수입니다. 보이는 레이블을 aria-labelledby로 연결합니다.
  • 자식이 표현용(children presentational)이라 안의 막대 요소는 따로 노출되지 않습니다.

meter와 progressbar

작업 진행 상황(업로드 70%)은 progressbar로 나타냅니다. meter는 “현재 상태의 양”, progressbar는 “완료를 향한 진행”입니다.

지원 참고

일부 화면낭독기는 meter를 progressbar처럼 읽거나 값만 읽습니다. aria-valuetext로 의미를 담아 두면 어떤 환경에서도 이해할 수 있습니다.

함께 쓰는 속성

필수 속성

aria-valuenow

지원 속성

aria-valuemaxaria-valueminaria-valuetext

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

사용 예

HTML meter (권장)

권장HTML
<label for="disk">저장 공간</label>
<meter id="disk" min="0" max="64" value="48">64GB 중 48GB</meter>

ARIA meter

HTML
<span id="bat-l">배터리</span>
<div role="meter" aria-labelledby="bat-l"
     aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"
     aria-valuetext="35%, 약 2시간 사용 가능">
  <div class="bar" style="width:35%"></div>
</div>

업로드 진행률에 meter (비권장)

비권장HTML
<div role="meter" aria-label="업로드" aria-valuenow="70"></div>

진행률은 progressbar(또는 <progress>)입니다.

직접 해 보기

버튼으로 값을 바꾸면 aria-valuenow와 aria-valuetext가 함께 바뀝니다.

저장 공간

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
측정값으로 이동저장 공간, 미터, 64GB 중 48GB 사용

사용 지침

이렇게 쓰세요

  • 측정값은 <meter>를 우선 씁니다.
  • 보이는 레이블로 이름을 주고, 필요하면 aria-valuetext를 씁니다.

이렇게 쓰지 마세요

  • 진행률 표시에 meter를 쓰지 않습니다.
  • aria-valuenow를 범위 밖 값으로 두지 않습니다.
progressbarsliderscrollbar

참고 자료