Meter
Meter는 디스크 사용량이나 점수처럼 알려진 범위 안의 측정값을 표시합니다.Meter.Label은 보조기술에 전달되는 이름이기도 합니다. 저장 공간, CPU 사용률처럼 무엇을 재는 값인지를 문구에 담으세요. 화면에 이름을 두지 않을 때는 Meter.Label 대신 Meter.Root에 aria-label을 주세요 — 둘을 함께 주면 aria-label이 무시됩니다.
Property
Size
size로 트랙의 높이를 조절합니다.
Type
type으로 채워진 영역의 색상을 지정합니다. 색만으로는 위험 구간을 알 수 없으므로 레이블에도 함께 적어줍니다.
Range
min, max로 범위를, format으로 표시 형식을 지정합니다. 값 텍스트가 단위만 담고 있다면 getAriaValueText로 무엇을 재는 값인지 함께 읽히도록 합니다.
Examples
Auto Update
값이 스스로 바뀌는 미터에는 갱신을 멈출 수단을 함께 둡니다. 갱신 간격은 초당 3회를 넘기지 않습니다.
Accessibility
role="meter"와 aria-valuenow / aria-valuemin / aria-valuemax는 Meter가 알아서 붙입니다. 나머지는 컴포넌트가 대신 지킬 수 없으니 쓰는 쪽에서 챙겨야 합니다.
진행률에는 쓰지 마세요
Meter가 다루는 값은 범위가 정해진 지금의 측정값입니다. 디스크 사용량, 점수, 잔량이 여기 해당합니다. 작업이 얼마나 끝났는지 보여주는 진행률이나 상한이 없는 값은 대상이 아닙니다.
진행률에 role="meter"가 붙으면 보조기술은 "완료를 향해 가는 값"이 아니라 "지금 재고 있는 값"으로 읽습니다. render로 역할만 갈아끼우지 말고 진행률에 맞는 컴포넌트를 쓰세요.
이름은 하나만 주세요
Meter.Label을 렌더하면 Meter.Root에 준 aria-label은 이름 계산에서 밀려납니다. 오류도 경고도 없이 조용히 사라지니 둘 중 하나만 쓰세요.
- 이름을 화면에 보여준다 →
Meter.Label - 화면에 이름을 두지 않는다 →
Meter.Root의aria-label
같은 값은 같은 문구·같은 형식으로
한 측정값이 여러 화면에 나온다면 레이블 문구와 format을 맞추세요. 여기서는 저장 공간 4.2GB, 저기서는 디스크 52%라면 읽는 사람은 둘이 같은 값인지 알 길이 없습니다.
자동으로 갱신된다면 멈출 수단을 두세요
값이 5초를 넘겨 저절로 바뀐다면 사용자가 일시정지·정지·숨김 중 하나를 고를 수 있어야 합니다. 갱신 간격은 초당 3회 이하로 잡으세요. 그보다 빠르면 화면이 깜빡이는 것처럼 보입니다. 위 Auto Update가 그 예입니다.
색을 바꿀 때는 대비를 확인하세요
className이나 $css로 색을 갈아끼우면 기본 색이 맞춰 둔 대비가 무너집니다.
Meter.Label/Meter.Value텍스트 대 배경 — 4.5:1 이상Meter.Indicator대Meter.Track,Meter.Track대 페이지 배경 — 3:1 이상
type="warning"처럼 색으로 상태를 알린다면 그 상태를 레이블 문구에도 적으세요. 색을 구분하지 못하는 사용자에게는 문구가 유일한 단서입니다.
미터를 가리킬 때 모양·색·위치로만 말하지 마세요
"오른쪽 초록 막대를 확인하세요" 같은 안내는 그 색과 위치를 알아채는 사람에게만 통합니다. 미터를 가리킬 때는 레이블 문구를 부르세요.
페이지와 언어가 다르면 표시하세요
레이블이 페이지 언어와 다른 언어로 적혀 있다면 그 요소에 lang을 주세요. 값 형식도 그 언어를 따라야 한다면 locale까지 맞춥니다.
폭을 고정하지 마세요
Meter.Root는 기본이 width: 100%입니다. width를 고정하는 대신 max-width를 쓰면 320px 폭에서도, 200% 확대에서도 내용이 잘리지 않습니다.
값은 텍스트로 보여주세요
42% 같은 숫자를 그림으로 만들어 넣지 마세요. Meter.Value가 내는 텍스트여야 사용자가 글자 크기나 자간을 바꿨을 때 값도 함께 바뀝니다.
Props Table
Meter.Root
Loading component documentation...
Meter.Label
Loading component documentation...
Meter.Value
Loading component documentation...
Meter.Track
Loading component documentation...
Meter.Indicator
Loading component documentation...