Meter

Rol ve anlam

• Kök role="meter" taşır (Base UI Meter). aria-valuenow, aria-valuemin ve aria-valuemax değeri ve aralığı verir.
• Ad, etikettendir: aria-labelledby etikete bağlıdır. labelHidden etiketi yalnızca görsel olarak gizler.
• aria-valuetext biçimlendirilmiş değeri taşır (“%64”, “32 GB”). valueText bunu değiştirir.
• tone="auto" iken değer metnine bölgeyi söyleyen bir kelime eklenir: “%92, yüksek”, “%30, ideal”. Renk anlamı tek başına taşımaz. Sabit ton verilirse kelime eklenmez; anlamı metinle siz verin.
• Görünen değer aria-hiddendır; ekran okuyucu aynı bilgiyi iki kez okumaz.
• description varsa aria-describedby ile bağlanır.
• Zorunlu renkler modunda iz sistem renginde 1 px çerçeve alır ve dolgu vurgu rengini kullanır.

Klavye

Meter durağandır ve odak almaz; klavye etkileşimi yoktur.

Odak

Meter’ın odak halkası yoktur; yalnızca okunur.

Ekran okuyucu

Örnek	Okunan
Varsayılan	“Depolama alanı, ölçer, %64”
auto, kota 92 (düşük en iyi)	“Kota kullanımı, ölçer, %92, yüksek”
auto, kota 30	“Kota kullanımı, ölçer, %30, ideal”
Birimli	“Depolama alanı, ölçer, 32 GB”
Açıklamalı	Ardından “Son güncelleme bugün.”

Kelimeleri sağlayıcı diline göre kütüphane metinleri verir (ui.meter.*); valueText ile tümünü değiştirebilirsiniz.

Kontrast

Dolgu ile iz arasındaki oran her markada ve modda en az 3:1’dir (WCAG 1.4.11); değerler bigbang ve fixture token çıktısından hesaplandı. Metin en az 4.5:1’dir.

Çift	Açık mod	Koyu mod
color-status-brand-emphasis / color-surface-sunken	5.71:1	8.51:1
color-status-neutral-emphasis / color-surface-sunken	6.13:1	7.51:1
color-status-success-emphasis / color-surface-sunken	4.65:1	7.84:1
color-status-warning-emphasis / color-surface-sunken	4.36:1	8.41:1
color-status-danger-emphasis / color-surface-sunken	5.21:1	6.47:1
color-text-default / color-surface-default	16.16:1	17.18:1
color-text-subtle / color-surface-default	8.77:1	10.27:1

İzin sayfa yüzeyine oranı düşüktür; iz bilgi taşımaz, değer dolgudan ve metinden okunur.

WCAG 2.2

Ölçüt	Meter nasıl karşılar	Ürün ekibi ne yapmalı
1.1.1 Metin dışı içerik	Çubuğun karşılığı aria-valuetexttir.	Gerekirse valueText ile tam bir ifade verin.
1.3.1 Bilgi ve ilişkiler	role="meter", ad ve açıklama bağlı.	Etiketi boş bırakmayın.
1.4.1 Renk kullanımı	auto iken bölge kelimeyle de okunur.	Sabit tonda anlamı metinle de verin.
1.4.11 Metin dışı kontrast	Dolgu iz karşısında en az 4.36:1.	Özel renk vermeyin.
4.1.2 Ad, rol, değer	Ad, rol ve değer programatik.	Değer aralığın dışına çıkıyorsa verinin doğruluğunu kontrol edin.