HTML progress, meter ve output: İlerleme, Ölçüm ve Sonuç Göstermek

Hangisi ne zaman? Hızlı karşılaştırma

Ayrım önemlidir, çünkü yardımcı teknolojiler bu öğeleri farklı rollerle sunar. ARIA meter rolü sayfası açıkça şunu söyler: ölçer, ilerlemeyi (örneğin yükleme durumunu) göstermek için kullanılmamalıdır; bunun için <progress> vardır. Aynı sayfaya göre anlamlı bir üst sınırı olmayan değerler için de ölçer uygun değildir.

progress: görev ne kadar ilerledi?

<progress> iki öznitelik alır. max, görevin toplam iş miktarını belirtir; varsa sıfırdan büyük geçerli bir kayan noktalı sayı olmalıdır ve varsayılanı 1 değeridir. value tamamlanan miktardır; 0 ile max arasında, max yoksa 0 ile 1 arasında olmalıdır. <meter> öğesinden farklı olarak alt sınır her zaman sıfırdır ve min özniteliğine izin verilmez.

<label for="yukleme">Dosya yükleniyor:</label>
<progress id="yukleme" max="100" value="70">%70</progress>

<!-- max olmadan: 0 ile 1 arasında bir değer -->
<progress value="0.25">%25</progress>

İkinci satırda max yazılmadığı için varsayılan 1 kullanılır ve 0.25 değeri dörtte birlik ilerleme anlamına gelir. Etiketlerin arasındaki "%70" gibi metinler bu öğeyi desteklemeyen eski tarayıcılar için bir yedektir.

Belirsiz ilerleme çubuğu

value özniteliği hiç yoksa çubuk belirsiz durumdadır: bir işlemin sürdüğünü ama ne kadar süreceğinin bilinmediğini anlatır. CSS tarafında bu durum :indeterminate sözde sınıfıyla seçilebilir. Bir değer verdikten sonra çubuğu yeniden belirsiz yapmak için value özniteliğini removeAttribute() ile kaldırmanız gerekir; MDN bu yolu belirtir.

<label for="hazirlik">Rapor hazırlanıyor</label>
<progress id="hazirlik"></progress>

const cubuk = document.getElementById("hazirlik");
cubuk.value = 40;               // belirli duruma geçer
cubuk.removeAttribute("value"); // yeniden belirsiz olur

progress için erişilebilir ad

Çoğu durumda ilerleme çubuğuna erişilebilir bir ad verilmelidir. role="progressbar" taşıyan her öğe gibi aria-labelledby ya da aria-label kullanılabilir; <progress> etiketlenebilir (labelable) bir öğe olduğu için label öğesi de kullanılabilir. MDN özellikle uyarır: etiketlerin arasındaki metin erişilebilir ad değildir, yalnızca eski tarayıcılar için yedektir.

<label>
  Belge yükleniyor: <progress value="70" max="100">%70</progress>
</label>

<label for="belge-cubugu">Belge yükleniyor</label>
<progress id="belge-cubugu" value="70" max="100">%70</progress>

İlk biçimde çubuk <label> içine sarılır, ikinci biçimde for ile kimliğe bağlanır. İkisi de geçerlidir; for kullanımı etiketi çubuktan ayrı bir yere koymanıza izin verir.

Sayfanın bir bölümü yüklenirken

Çubuk sayfanın belirli bir bölümünün yüklenmesini anlatıyorsa MDN şu yapıyı önerir: güncellenen bölüme aria-busy="true" verilir ve aria-describedby ile ilerleme çubuğuna bağlanır; yükleme bitince aria-busy kaldırılır.

<div aria-busy="true" aria-describedby="icerik-cubugu">
  <!-- bu bölümün içeriği yükleniyor -->
</div>

<progress id="icerik-cubugu" aria-label="İçerik yükleniyor"></progress>

ARIA progressbar rolü sayfası bir ayrıntı daha ekler: bu rol anlamsal çocukları desteklemediği için tarayıcılar ilerleme çubuğunun tüm alt öğelerine presentation rolü uygular. Yani çubuğun içine başlık ya da bağlantı koymak yardımcı teknolojiler için anlam taşımaz. <progress> teknik özeti de bunu destekler: izin verilen içerik ifade içeriğidir ama içinde başka bir <progress> bulunamaz ve öğeye başka bir role verilmesine izin verilmez.

meter: bilinen bir aralıktaki ölçüm

<meter> bilinen bir aralıktaki sayısal değeri ya da bir oranı gösterir. Öznitelikleri ve varsayılanları MDN'de şöyle tanımlanır:

• value: Geçerli değer. Belirtilmezse ya da bozuksa 0 kabul edilir. Aralığın dışındaysa aralığın en yakın ucuna eşitlenir.
• min: Ölçülen aralığın alt sınırı; max değerinden küçük olmalıdır. Belirtilmezse 0.
• max: Aralığın üst sınırı; min değerinden büyük olmalıdır. Belirtilmezse 1.
• low: Aralığın düşük bölümünün üst sınırı. min değerinden büyük, high ve max değerlerinden küçük olmalıdır. Belirtilmezse ya da min değerinden küçükse min değerine eşit olur.
• high: Aralığın yüksek bölümünün alt sınırı. max değerinden küçük, low ve min değerlerinden büyük olmalıdır. Belirtilmezse ya da max değerinden büyükse max değerine eşit olur.
• optimum: En iyi değer; aralığın içinde olmalıdır. low ve high ile birlikte aralığın hangi bölümünün tercih edildiğini anlatır.

<p>Pil düzeyi: <meter min="0" max="100" value="75">%75</meter></p>

<p>
  Sınav puanı:
  <meter low="50" high="80" max="100" value="84">84/100</meter>
</p>

İkinci örnekte min yazılmamıştır; MDN bunun geçerli olduğunu, çünkü varsayılanın 0 olduğunu belirtir. Aralık üç bölüme ayrılır: 0 ile 50 arası düşük, 50 ile 80 arası orta, 80 ile 100 arası yüksek bölge. 84 puan yüksek bölgededir.

optimum değeri nasıl yorumlanır?

optimum hangi bölgenin "iyi" sayıldığını söyler. MDN'nin örneğiyle, optimum değeri min ile low arasındaysa alt bölge tercih edilen bölgedir. Tarayıcı, değerin optimum değerine göre konumuna bağlı olarak çubuğu farklı renklendirebilir. Aşağıdaki iki ölçer aynı aralığı kullanır, ama birinde yüksek değer iyidir, diğerinde düşük değer:

<p>
  <label for="yakit">Yakıt düzeyi:</label>
  <meter id="yakit" min="0" max="100" low="33" high="66" optimum="80" value="50">50/100</meter>
</p>
<p>
  <label for="disk">Disk doluluğu:</label>
  <meter id="disk" min="0" max="100" low="33" high="66" optimum="10" value="50">50/100</meter>
</p>

Yakıt örneğinde optimum="80" yüksek bölgededir, yani dolu depo iyidir. Disk örneğinde optimum="10" düşük bölgededir; boş alan çok olduğunda durum iyidir. Aynı value="50" iki ölçerde de orta bölgededir. Renklerin tam olarak nasıl görüneceği tarayıcıya bağlıdır; MDN yalnızca farklı renklendirilebileceğini söyler.

<meter> de etiketlenebilir bir öğedir ve <label> ile adlandırılabilir. Öğenin örtük rolü meter değeridir ve başka bir rol verilmesine izin verilmez. ARIA meter rolü sayfası, mümkün olan her durumda role="meter" yerine yerel <meter> öğesinin kullanılmasını önerir. Bu öğenin içinde de başka bir <meter> bulunamaz.

output: hesaplamanın sonucu

<output>, bir sitenin ya da uygulamanın hesaplama sonucunu veya kullanıcı işleminin çıktısını yerleştirdiği bir kapsayıcıdır. Üç özniteliği vardır:

• for: Hesaplamaya girdi veren ya da onu etkileyen öğelerin kimliklerinin boşlukla ayrılmış listesi.
• form: Öğenin bağlı olduğu formun kimliği. Belirtilmezse öğe, varsa, atası olan forma bağlanır. Bu öznitelik <output> öğesini belgenin herhangi bir yerindeki bir forma bağlamaya ve atası olan formu geçersiz kılmaya izin verir.
• name: Öğenin adı; form.elements arayüzünde kullanılır.

<form id="hesap">
  <input type="range" id="b" name="b" value="50"> +
  <input type="number" id="a" name="a" value="10"> =
  <output id="sonuc" name="sonuc" for="a b">60</output>
</form>

const a = document.getElementById("a");
const b = document.getElementById("b");
const sonuc = document.getElementById("sonuc");

function guncelle() {
  sonuc.value = a.valueAsNumber + b.valueAsNumber;
}
a.addEventListener("input", guncelle);
b.addEventListener("input", guncelle);
guncelle();

Kaydırıcının başlangıç değeri 50, sayı alanınınki 10 olduğu için ilk çıktı 60 olur; kullanıcı iki alandan birini değiştirdikçe input olayı toplamı yeniden yazar. for="a b" değeri iki alanın kimliğini boşlukla ayırarak listeler. MDN: for özniteliği sayfası aynı özniteliğin <label> üzerinde tek bir denetimi, <output> üzerinde ise birden çok kaynak öğeyi gösterdiğini vurgular. JavaScript tarafı için JavaScript öğrenme rehberine bakabilirsiniz.

output ve canlı bölge

MDN'ye göre birçok tarayıcı <output> öğesini bir aria-live bölgesi olarak uygular. Bu sayede yardımcı teknolojiler, odağı denetimlerden uzaklaştırmadan, öğeye yazılan sonuçları duyurur. Öğenin örtük rolü status değeridir; ARIA status rolü sayfasına göre bu rolün örtük aria-live değeri polite, örtük aria-atomic değeri true olur. Yani ekran okuyucu kullanıcı boşta olduğunda bölgenin tamamını okur.

Bir sınırlama vardır: canlı bölge güncellemeleri genellikle düz metin olarak duyurulur; <output> içine konan bağlantılar, düğmeler ve diğer anlamsal öğeler duyuruda aktarılmayabilir. Ayrıca status rolü sayfası, içerik güncellendiğinde bu bölgeye odak verilmemesi gerektiğini söyler. <output> öğesine, <progress> ve <meter> öğelerinden farklı olarak, herhangi bir ARIA rolü verilebilir. Canlı bölgeler ve diğer ilkeler için WCAG temelleri yazısına bakın.

Teknik özet: içerik kategorileri ne söylüyor?

Üç öğe de MDN teknik özetlerinde akış ve ifade içeriği olarak geçer, yani paragraf içinde metnin bir parçası gibi kullanılabilir ve ifade içeriği kabul eden her öğenin içinde yer alabilir. <progress> ve <meter> ayrıca etiketlenebilir (labelable) ve somut (palpable) içeriktir; ikisinin de içine yalnızca ifade içeriği yazılabilir ve kendi türlerinden bir öğe iç içe konamaz.

<output> bunlara ek olarak form ile ilişkili (form-associated) öğeler kategorisindedir ve bu kategorinin alt gruplarından bazılarına girer. "Listed" olduğu için formun elements koleksiyonunda görünür; name özniteliğinin form.elements ile kullanılması buradan gelir. "Resettable" olduğu için form sıfırlandığında etkilenebilir. Ancak "submittable" grubunda yer almaz; içerik kategorileri sayfası bu grupta yalnızca <button>, <input>, <select> ve <textarea> öğelerini sayar. <output> değerinin sunucuya gitmemesinin kategori düzeyindeki karşılığı budur. Bu kategorilerin tamamı MDN: içerik kategorileri sayfasında.

Adım adım örnek: dosya yükleme ekranı

Üç öğeyi tek bir ekranda birlikte düşünelim. Kullanıcı bir dosya seçer, yükleme sürerken ilerleme görür, kotasının ne kadarının dolduğunu bir ölçerle izler ve işlem sonucu bir metin olarak duyurulur.

<form id="yukle">
  <p>
    <label for="dosya">Dosya seçin</label>
    <input type="file" id="dosya" name="dosya">
  </p>
  <p>
    <label for="ilerleme">Yükleme durumu</label>
    <progress id="ilerleme" max="100" value="0">%0</progress>
  </p>
  <p>
    <label for="kota">Kullanılan kota</label>
    <meter id="kota" min="0" max="10" high="8" optimum="2" value="6.5">6,5 / 10 GB</meter>
  </p>
  <p><output id="durum" for="dosya"></output></p>
</form>

Bu ekranda <progress> öğesinin değeri yükleme ilerledikçe betikle artırılır; boyut bilinmiyorsa value yazılmaz ve çubuk belirsiz kalır. <meter> öğesinde high="8" ile 8 GB üzerini yüksek bölge yaptık, optimum="2" ile düşük kullanımın iyi olduğunu söyledik; low yazılmadığı için min değerine, yani sıfıra eşittir. <output> ise "Yükleme tamamlandı" gibi bir sonucu taşıyacak ve tarayıcıların çoğunda canlı bölge olarak duyurulacak. Dosya alanının kendisi input file yazısında anlatılıyor.

Sık yapılan hatalar

• Yükleme ilerlemesi için <meter> kullanmak. İlerleme için <progress> doğru öğedir.
• <progress> öğesine min yazmak. Bu öznitelik izinli değildir; alt sınır her zaman sıfırdır.
• max yazmadan value="70" gibi büyük bir değer vermek. Varsayılan max değeri 1 olduğu için değer aralığın dışına düşer.
• Etiketlerin arasındaki metni erişilebilir ad sanmak. Ad için <label>, aria-label ya da aria-labelledby kullanın.
• <output> değerinin formla gönderileceğini sanmak.
• Çubuğu yeniden belirsiz yapmak için value özelliğine boş değer atamak; MDN özniteliğin kaldırılmasını söyler.

Sık Sorulan Sorular

progress ve meter görünümü nasıl değiştirilir?

Görünüm CSS ile değiştirilir. MDN bu öğeler için bazı tarayıcıya özgü, standart dışı sözde öğeleri listeler; bu yazının kapsamı HTML yapısıyla sınırlıdır.

output yerine span kullanabilir miyim?

Kullanabilirsiniz, ama <output> size for ile kaynak öğe ilişkisini, form bağını ve çoğu tarayıcıda canlı bölge davranışını hazır verir. <span> ile aynı sonucu almak için bu ilişkileri ARIA ile kendiniz kurmanız gerekir.

meter değeri aralığın dışında olursa ne olur?

MDN'ye göre min ve max ile tanımlı aralığın dışındaki değer, aralığın en yakın ucuna eşitlenir. Örneğin max="100" iken value="120" değeri 100 gibi gösterilir.

Belirsiz progress ekran okuyucuda nasıl sunulur?

ARIA progressbar rolü sayfası, değer belirsizken aria-valuenow kullanılmamasını söyler. Yerel <progress> öğesinde value yazmamak bu durumu zaten ifade eder; yine de çubuğa bir erişilebilir ad vermeyi unutmayın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · input number ve range · label ve fieldset · form etiketi · input file · WCAG temelleri